mike/shopwisdom-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild SW site to OC standard (continuity-led, steel-accent sibling)

Browse Source 
Sibling of the finished OC site: shared paper+navy + Playfair/Lora/DM Sans foundation, steel-blue accent (replaces warm amber). First-person voice. Restructured to diagnose -> fix -> keep-it-handled with the recurring Continuity Partner elevated as a feature card; web-tools cases kept as proof of delivery; single earned OC handoff. Tuned per the Charlene Li REC: reinvention-not-efficiency hero, messy-data objection killer, MIT 95% stat (primary-sourced), sovereignty stated louder. continuity-audit.html rebuilt to match.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-23 20:13:46 -07:00
parent 925733a894
commit 8ed9bd1ffd
3 changed files with 746 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
continuity-audit.html
+155 -65
View File
@@ -4,10 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Continuity Audit | Shop Wisdom</title> <title>The Continuity Audit | Shop Wisdom</title>
<meta name="description" content="Find out exactly where your shop is exposed. The Continuity Audit is a fixed-fee diagnostic: who holds the critical know-how, what it would cost you if they left, and what it's doing to the value of your business — with a plain-English report and roadmap."> <meta name="description" content="Find out exactly where your shop is exposed. The Continuity Audit is a fixed-fee diagnostic: who holds the critical know-how, what it would cost you if they left, and what it's doing to the value of your business — with a plain-English report and roadmap you keep.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="robots" content="index,follow"> <meta name="robots" content="index,follow">
<meta name="theme-color" content="#faf7f2"> <meta name="theme-color" content="#f7f4ef">
<link rel="canonical" href="https://shopwisdom.ca/continuity-audit.html"> <link rel="canonical" href="https://shopwisdom.ca/continuity-audit.html">
<link rel="icon" href="favicon.svg" type="image/svg+xml"> <link rel="icon" href="favicon.svg" type="image/svg+xml">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
@@ -21,28 +24,30 @@
<meta property="og:image:alt" content="Shop Wisdom — your best people are retiring. Their know-how doesn't have to."> <meta property="og:image:alt" content="Shop Wisdom — your best people are retiring. Their know-how doesn't have to.">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://shopwisdom.ca/og-card.png"> <meta name="twitter:image" content="https://shopwisdom.ca/og-card.png">
<script>document.documentElement.className += ' has-motion';</script>
</head> </head>
<body> <body>
<header class="site-header"> <header class="nav" id="nav">
<div class="wrap header-row"> <a class="nav-logo" href="index.html#top" aria-label="Shop Wisdom — home">
<a class="wordmark" href="index.html#top">Shop<span>Wisdom</span></a> <span class="nav-wordmark">Shop<span>Wisdom</span></span>
<nav class="site-nav" aria-label="Main"> </a>
<nav class="nav-links-desktop" aria-label="Main">
<a href="index.html#work">The work</a> <a href="index.html#work">The work</a>
<a href="index.html#results">Client results</a> <a href="index.html#results">Client results</a>
<a href="index.html#process">How it works</a> <a href="index.html#process">How it works</a>
<a href="index.html#about">About</a> <a href="index.html#about">About</a>
<a class="tel nav-phone" data-p1="778" data-p2="985" data-p3="6736" href="#contact" aria-label="Call Shop Wisdom">778&#8209;985&#8209;OPEN</a> <a class="tel nav-phone" data-p1="778" data-p2="985" data-p3="6736" href="#contact" aria-label="Call Shop Wisdom">778&#8209;985&#8209;OPEN</a>
<a class="nav-cta" href="#contact">Book a call</a> <a class="nav-cta" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a call</a>
</nav> </nav>
<button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false"> <button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
<svg class="nav-toggle-icon" viewBox="0 0 32 32" aria-hidden="true"> <svg class="nav-toggle-icon" viewBox="0 0 32 32" aria-hidden="true">
<line class="bar bar-top" x1="6" y1="10" x2="26" y2="10"/> <line class="bar bar-top" x1="6" y1="10" x2="26" y2="10"/>
<line class="bar bar-mid" x1="6" y1="16" x2="26" y2="16"/> <line class="bar bar-mid" x1="6" y1="16" x2="26" y2="16"/>
<line class="bar bar-bot" x1="6" y1="22" x2="26" y2="22"/> <line class="bar bar-bot" x1="6" y1="22" x2="26" y2="22"/>
<circle class="o-ring" cx="16" cy="16" r="9"/>
</svg> </svg>
</button> </button>
</div>
</header> </header>
<div class="nav-mobile-menu" id="navMobileMenu"> <div class="nav-mobile-menu" id="navMobileMenu">
<a href="index.html#work">The work</a> <a href="index.html#work">The work</a>
@@ -50,60 +55,64 @@
<a href="index.html#process">How it works</a> <a href="index.html#process">How it works</a>
<a href="index.html#about">About</a> <a href="index.html#about">About</a>
<a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">Call 778&#8209;985&#8209;OPEN (6736)</a> <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">Call 778&#8209;985&#8209;OPEN (6736)</a>
<a class="nav-cta" href="#contact">Book a call</a> <a class="nav-cta" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a call</a>
</div> </div>
<main id="top"> <main id="top">
<section class="hero"> <section class="hero band light" data-bg="light">
<div class="wrap"> <div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">Start here · A fixed&#8209;fee diagnostic</p> <p class="eyebrow">Start here · a fixed&#8209;fee diagnostic</p>
<h1>Find out exactly where your shop is exposed.</h1> <h1>Find out exactly where your shop is <em>exposed.</em></h1>
<p class="hero-sub">The Continuity Audit is the first step: a clear, honest read on whose knowledge your business depends on — and what it would cost you to lose them.</p> <p class="lead">The Continuity Audit is the first step: a clear, honest read on whose knowledge your business depends on — and what it would cost you to lose them.</p>
<div class="hero-actions"> <div class="actions">
<a class="btn" href="#contact">Book a fit call — free, no pitch</a> <a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a fit call — free, no pitch</a>
<a class="btn ghost" href="index.html#work">See all the work</a> <a class="btn link" href="index.html#work">See all the work</a>
</div> </div>
<p class="hero-call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p> <p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p>
</div></div>
</section>
<section class="band dark statement" data-bg="dark">
<div class="motif" aria-hidden="true"></div>
<div class="wrap narrow reveal">
<p class="eyebrow">Why start with an audit</p>
<h2 class="statement-line">Most owners have a gut feeling about who they can't afford to lose. <em>This turns it into something you can act on.</em></h2>
<p>A clear map of where the knowledge lives, how exposed you are, and what to fix first. It's deliberately low&#8209;commitment — no software to buy, no obligation to do the bigger work. You come away with a real deliverable whether or not we ever work together again.</p>
<p class="emph">You can't fix what you can't see. This is how you see it.</p>
</div> </div>
</section> </section>
<section class="moment"> <section class="band light">
<div class="wrap narrow"> <div class="wrap reveal">
<h2>Why start with an audit</h2> <p class="eyebrow">What you get</p>
<p>Most owners have a gut feeling about who they can't afford to lose. The Continuity Audit turns that feeling into something you can act on — a clear map of where the knowledge lives, how exposed you are, and what to fix first.</p> <h2>A short, focused engagement — <em>not</em> weeks of disruption.</h2>
<p>It's deliberately low&#8209;commitment. No software to buy. No obligation to do the bigger work. You come away with a real deliverable whether or not we ever work together again.</p> <p class="section-intro">Built around a few hours on your floor, scheduled around your production.</p>
<p class="pull">You can't fix what you can't see. This is how you see it.</p> <div class="cards stagger">
</div> <div class="card">
</section> <span class="step-k">Map</span>
<section class="services">
<div class="wrap">
<h2>What you get</h2>
<p class="section-intro">A short, focused engagement — built around a few hours on your floor, not weeks of disruption.</p>
<div class="service">
<h3>A knowledge&#8209;risk map</h3> <h3>A knowledge&#8209;risk map</h3>
<p>Who holds the critical know&#8209;how in your shop — the setups, the fixes, the customer history, the judgment that isn't written down anywhere. We identify the people, the roles, and the single points of failure.</p> <p>Who holds the critical know&#8209;how — the setups, the fixes, the customer history, the judgment that isn't written down anywhere. The people, the roles, and the single points of failure.</p>
</div> </div>
<div class="card">
<div class="service"> <span class="step-k">Quantify</span>
<h3>An honest exposure read</h3> <h3>An honest exposure read</h3>
<p>What it would actually cost you if a key person left tomorrow — in downtime, scrap, late jobs, and lost customers. The risks ranked, so you know what's urgent and what can wait.</p> <p>What it would actually cost you if a key person left tomorrow — in downtime, scrap, late jobs, and lost customers. The risks ranked, so you know what's urgent and what can wait.</p>
</div> </div>
<div class="card feature">
<div class="service flagship"> <span class="card-tag">Yours to keep</span>
<h3>A plain&#8209;English report &amp; roadmap <span class="tag">Yours to keep</span></h3> <h3>A plain&#8209;English report &amp; roadmap</h3>
<p>A written summary you can read in one sitting — no jargon — plus a prioritized roadmap of what to capture first and how. <strong>For owners thinking about exit, it doubles as a clear statement of where your business value is concentrated, and how to protect it before you sell.</strong></p> <p>A written summary you can read in one sitting — no jargon — plus a prioritized roadmap of what to capture first and how. For owners thinking about exit, it doubles as a clear statement of where your business value is concentrated, and how to protect it before you sell.</p>
</div> </div>
</div>
<p class="reassure">Fixed fee, agreed before we start. You'll know exactly what it costs and what you get.</p> <p class="reassure">Fixed fee, agreed before we start. You'll know exactly what it costs and exactly what you get.</p>
</div> </div>
</section> </section>
<section class="process"> <section class="band alt">
<div class="wrap narrow"> <div class="wrap narrow reveal">
<h2>How it works</h2> <p class="eyebrow">How it works</p>
<h2>Three steps. <em>That's it.</em></h2>
<ol class="steps"> <ol class="steps">
<li> <li>
<h3>A free fit call</h3> <h3>A free fit call</h3>
@@ -121,36 +130,58 @@
</div> </div>
</section> </section>
<section class="contact" id="contact"> <div class="o-divider" aria-hidden="true">
<div class="wrap narrow"> <svg viewBox="0 0 538 538"><path d="M269.06,0C120.46,0,0,120.46,0,269.06s120.46,269.06,269.06,269.06,269.06-120.46,269.06-269.06S417.66,0,269.06,0ZM276.06,356.34c-48.2,0-87.28-39.07-87.28-87.28s39.07-87.28,87.28-87.28,87.28,39.08,87.28,87.28-39.07,87.28-87.28,87.28Z"/></svg>
<h2>See where you stand.</h2> </div>
<section class="band light contact" data-bg="light" id="contact">
<div class="wrap narrow reveal">
<p class="eyebrow">Start a conversation</p>
<h2>See where you <em>stand.</em></h2>
<p>Start with a free fit call. Describe your shop — even roughly — and we'll figure out whether an audit makes sense for you.</p> <p>Start with a free fit call. Describe your shop — even roughly — and we'll figure out whether an audit makes sense for you.</p>
<p class="contact-action"> <p class="actions center">
<a class="btn" href="mailto:michael@opencommunications.consulting?subject=Continuity%20Audit%20—%20Shop%20Wisdom">Email Michael</a> <a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a fit call</a>
<a class="btn ghost tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778&#8209;985&#8209;OPEN (6736)</a> <a class="btn link" href="mailto:michael@opencommunications.consulting?subject=Continuity%20Audit%20—%20Shop%20Wisdom">Email Michael</a>
<a class="btn link tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778&#8209;985&#8209;OPEN (6736)</a>
</p> </p>
<p class="contact-promise">The first call is free and commits you to nothing.</p> <p class="promise">The first call is free and commits you to nothing.</p>
</div> </div>
</section> </section>
</main> </main>
<footer class="site-footer"> <footer class="site-footer" data-bg="dark">
<div class="wrap"> <div class="footer-bg" aria-hidden="true">
<p class="footer-brand">Shop<span>Wisdom</span></p> <svg class="footer-bg-img" viewBox="0 0 1267.12 317" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<p>Built with care and AI · Work owned by its clients</p> <path d="M158.5,0C70.96,0,0,70.96,0,158.5s70.96,158.5,158.5,158.5,158.5-70.96,158.5-158.5S246.04,0,158.5,0ZM158.42,210.08c-28.44,0-51.5-23.06-51.5-51.5s23.06-51.5,51.5-51.5,51.5,23.06,51.5,51.5-23.06,51.5-51.5,51.5Z"/>
<p>Hosted in Beauharnois, Québec — your data stays in Canada.</p> <path d="M475.45.08c-87.54,0-158.5,70.96-158.5,158.5,0,1.27.02,2.54.05,3.81v154.87h106.87v-158.6h0c0-28.44,23.06-51.5,51.5-51.5s51.5,23.06,51.5,51.5-23.06,51.5-51.5,51.5c-6.49,0-12.7-1.21-18.42-3.41v109.24c6.07.71,12.24,1.08,18.5,1.08,87.54,0,158.5-70.96,158.5-158.5S562.99.08,475.45.08Z"/>
<p class="footer-call"><a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">778&#8209;985&#8209;OPEN (6736)</a></p> <path d="M791.96,210.25c-28.44,0-51.5-23.06-51.5-51.5s23.06-51.5,51.5-51.5,51.5,23.06,51.5,51.5c0,6.49-1.21,12.7-3.41,18.42h109.41c.71-6.07,1.08-12.24,1.08-18.5C950.54,71.13,879.57.17,792.04.17s-158.5,70.96-158.5,158.5,70.96,158.5,158.5,158.5c69.48,0,128.51-44.71,149.91-106.92h-149.99Z"/>
<p class="footer-legal">Shop Wisdom and Open Communications are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p> <path d="M1109.31,0h0S950.12,0,950.12,0v159.19h0c.35,81.64,62.41,148.7,141.95,156.95v-156.13c0-9.14,7.41-16.54,16.54-16.54s16.54,7.41,16.54,16.54v156.13c79.76-8.27,141.96-75.69,141.96-157.64C1267.12,71.19,1196.53.38,1109.31,0Z"/>
</svg>
</div>
<div class="footer-content">
<div class="footer-block">
<p class="footer-wordmark">Shop<span>Wisdom</span></p>
<nav class="footer-links" aria-label="Footer">
<a href="index.html#work">The work</a>
<a href="index.html#results">Client results</a>
<a href="index.html#process">How it works</a>
<a href="https://www.opencommunications.consulting/">Open Communications</a>
</nav>
<p class="footer-note">Built with care and AI · Work owned by its clients · Hosted in Beauharnois, Québec — your data stays in Canada.</p>
<p class="footer-copy">Shop Wisdom and Open Communications are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p>
</div>
</div> </div>
</footer> </footer>
<div class="float-cta">
<a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a call</a>
</div>
<script> <script>
(function () { (function () {
var links = document.querySelectorAll('a.tel'); for (var l of document.querySelectorAll('a.tel')) {
for (var i = 0; i < links.length; i++) { l.setAttribute('href', 'tel:+1' + l.dataset.p1 + l.dataset.p2 + l.dataset.p3);
var el = links[i];
el.setAttribute('href', 'tel:+1' + el.dataset.p1 + el.dataset.p2 + el.dataset.p3);
} }
var toggle = document.getElementById('navToggle'); var toggle = document.getElementById('navToggle');
var menu = document.getElementById('navMobileMenu'); var menu = document.getElementById('navMobileMenu');
@@ -164,9 +195,68 @@
menu.classList.toggle('open', open); toggle.classList.toggle('open', open); menu.classList.toggle('open', open); toggle.classList.toggle('open', open);
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu'); toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
updateNavTheme();
}); });
var mlinks = menu.querySelectorAll('a'); for (var a of menu.querySelectorAll('a')) { a.addEventListener('click', closeMenu); }
for (var j = 0; j < mlinks.length; j++) { mlinks[j].addEventListener('click', closeMenu); } }
var nav = document.getElementById('nav');
var sections = Array.prototype.slice.call(document.querySelectorAll('[data-bg]'));
function darkBehind(y) {
for (var i = 0; i < sections.length; i++) {
var r = sections[i].getBoundingClientRect();
if (r.top <= y && r.bottom > y) return sections[i].dataset.bg === 'dark';
}
return false;
}
function updateNavTheme() {
nav.classList.toggle('scrolled', window.scrollY > 24);
var nr = nav.getBoundingClientRect();
nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
if (menu && menu.classList.contains('open')) {
var links = menu.querySelectorAll('a');
var probe = links.length ? links[links.length - 1].getBoundingClientRect().bottom : (nav.getBoundingClientRect().bottom);
menu.classList.toggle('on-dark', darkBehind(probe));
}
}
updateNavTheme();
window.addEventListener('scroll', function () { window.requestAnimationFrame(updateNavTheme); }, { passive: true });
window.addEventListener('resize', updateNavTheme);
})();
</script>
<!-- Cal.com booking embed -->
<script>
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); } else p(cal, ar); return; } p(cal, ar); }; })(window, "https://cal.shopwisdom.ca/embed/embed.js", "init");
Cal("init", { origin: "https://cal.shopwisdom.ca" });
</script>
<!-- Motion: reveal-on-scroll + stagger + open-o + persistent CTA. Gated on html.has-motion. -->
<script>
(function () {
var root = document.documentElement;
if (!root.classList.contains('has-motion')) return;
var nodes = [].slice.call(document.querySelectorAll('.reveal, .stagger, .o-divider'));
function showAll() { nodes.forEach(function (n) { n.classList.add('in'); }); }
try {
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });
nodes.forEach(function (n) { io.observe(n); });
} else { showAll(); }
} catch (err) { showAll(); }
var cta = document.querySelector('.float-cta');
var hero = document.querySelector('.hero');
var contact = document.getElementById('contact');
if (cta && hero) {
var upd = function () {
var pastHero = window.scrollY > hero.offsetHeight - 90;
var atContact = contact && contact.getBoundingClientRect().top < window.innerHeight * 0.92;
cta.classList.toggle('show', pastHero && !atContact);
};
upd();
window.addEventListener('scroll', function () { window.requestAnimationFrame(upd); }, { passive: true });
window.addEventListener('resize', upd);
} }
})(); })();
</script> </script>
index.html
+214 -123
View File
@@ -4,16 +4,19 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shop Wisdom | Keep What Your Best People Know — for Canadian Manufacturers</title> <title>Shop Wisdom | Keep What Your Best People Know — for Canadian Manufacturers</title>
<meta name="description" content="Your best people are retiring. Shop Wisdom helps Canadian manufacturers and production shops capture the know-how that lives in a few heads and turn it into systems the whole shop can use — before it walks out the door. You own everything we build."> <meta name="description" content="Your best people are retiring. I help Canadian manufacturers capture the know-how that lives in a few heads, build it into systems the whole shop can run on, and stay on to keep it that way. You own everything — and it stays in Canada.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="robots" content="index,follow"> <meta name="robots" content="index,follow">
<meta name="theme-color" content="#faf7f2"> <meta name="theme-color" content="#f7f4ef">
<link rel="canonical" href="https://shopwisdom.ca/"> <link rel="canonical" href="https://shopwisdom.ca/">
<link rel="icon" href="favicon.svg" type="image/svg+xml"> <link rel="icon" href="favicon.svg" type="image/svg+xml">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:site_name" content="Shop Wisdom"> <meta property="og:site_name" content="Shop Wisdom">
<meta property="og:title" content="Shop Wisdom — keep what your best people know"> <meta property="og:title" content="Shop Wisdom — keep what your best people know">
<meta property="og:description" content="Your best people are retiring. We help Canadian manufacturers capture the know-how that lives in a few heads and turn it into systems the whole shop can use — before it walks out the door."> <meta property="og:description" content="Your best people are retiring. I help Canadian manufacturers capture the know-how that lives in a few heads and build it into systems the whole shop can run on — before it walks out the door.">
<meta property="og:url" content="https://shopwisdom.ca/"> <meta property="og:url" content="https://shopwisdom.ca/">
<meta property="og:locale" content="en_CA"> <meta property="og:locale" content="en_CA">
<meta property="og:image" content="https://shopwisdom.ca/og-card.png"> <meta property="og:image" content="https://shopwisdom.ca/og-card.png">
@@ -31,7 +34,7 @@
"name": "Shop Wisdom", "name": "Shop Wisdom",
"url": "https://shopwisdom.ca/", "url": "https://shopwisdom.ca/",
"logo": "https://shopwisdom.ca/favicon.svg", "logo": "https://shopwisdom.ca/favicon.svg",
"description": "Knowledge continuity for Canadian manufacturers — capturing veteran know-how and turning it into systems the whole shop can use, before it walks out the door.", "description": "Knowledge continuity for Canadian manufacturers — capturing veteran know-how and turning it into systems the whole shop can run on, before it walks out the door.",
"areaServed": { "@type": "Country", "name": "Canada" }, "areaServed": { "@type": "Country", "name": "Canada" },
"founder": { "@type": "Person", "name": "Michael Victory" }, "founder": { "@type": "Person", "name": "Michael Victory" },
"telephone": "+1-778-985-6736", "telephone": "+1-778-985-6736",
@@ -41,13 +44,15 @@
"knowsAbout": ["knowledge capture", "succession planning", "business continuity", "standard operating procedures", "manufacturing", "AI tools for business"] "knowsAbout": ["knowledge capture", "succession planning", "business continuity", "standard operating procedures", "manufacturing", "AI tools for business"]
} }
</script> </script>
<script>document.documentElement.className += ' has-motion';</script>
</head> </head>
<body> <body>
<header class="site-header"> <header class="nav" id="nav">
<div class="wrap header-row"> <a class="nav-logo" href="#top" aria-label="Shop Wisdom — home">
<a class="wordmark" href="#top">Shop<span>Wisdom</span></a> <span class="nav-wordmark">Shop<span>Wisdom</span></span>
<nav class="site-nav" aria-label="Main"> </a>
<nav class="nav-links-desktop" aria-label="Main">
<a href="#work">The work</a> <a href="#work">The work</a>
<a href="#results">Client results</a> <a href="#results">Client results</a>
<a href="#process">How it works</a> <a href="#process">How it works</a>
@@ -60,9 +65,9 @@
<line class="bar bar-top" x1="6" y1="10" x2="26" y2="10"/> <line class="bar bar-top" x1="6" y1="10" x2="26" y2="10"/>
<line class="bar bar-mid" x1="6" y1="16" x2="26" y2="16"/> <line class="bar bar-mid" x1="6" y1="16" x2="26" y2="16"/>
<line class="bar bar-bot" x1="6" y1="22" x2="26" y2="22"/> <line class="bar bar-bot" x1="6" y1="22" x2="26" y2="22"/>
<circle class="o-ring" cx="16" cy="16" r="9"/>
</svg> </svg>
</button> </button>
</div>
</header> </header>
<div class="nav-mobile-menu" id="navMobileMenu"> <div class="nav-mobile-menu" id="navMobileMenu">
<a href="#work">The work</a> <a href="#work">The work</a>
@@ -75,101 +80,96 @@
<main id="top"> <main id="top">
<section class="hero"> <section class="hero band light" data-bg="light">
<div class="wrap"> <div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">For Canadian manufacturers &amp; production shops</p> <p class="eyebrow">Knowledge continuity · for Canadian manufacturers</p>
<h1>Your best people are retiring. Their know&#8209;how doesn't have to.</h1> <h1>Your best people are retiring. Their know&#8209;how doesn't <em>have to.</em></h1>
<p class="hero-sub">Before your veterans walk out the door, we turn what's in their heads into systems your whole shop can use.</p> <p class="lead">I don't just install AI. Before your best people walk out the door, I turn the pricing instincts, the fixes, the hard&#8209;won judgment in their heads into systems your whole shop can run on — and I stay on to keep it that way.</p>
<div class="hero-actions"> <div class="actions">
<a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a fit call — free, no pitch</a> <a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a fit call — free, no pitch</a>
<a class="btn ghost" href="#results">See client results</a> <a class="btn link" href="#results">See client results</a>
</div> </div>
<p class="hero-call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p> <p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p>
</div></div>
</section>
<section class="band dark statement" data-bg="dark" id="moment">
<div class="motif" aria-hidden="true"></div>
<div class="wrap narrow reveal">
<p class="eyebrow">The moment your shop is in</p>
<h2 class="statement-line">The real work runs on what lives in two or three people's heads. And those heads are <em>heading for the door.</em></h2>
<p>The veteran who knows which machine runs hot, how to save a bad batch, what the customer really meant — it's never been written down. Here's the part nobody likes to say out loud: a business that lives in a few people's heads is worth less the day you go to sell it. Buyers see the risk even when you don't. So do your best customers — the first time a job goes sideways after someone walks out the door.</p>
<p class="emph">This isn't a technology problem. It's a continuity problem — and it's fixable.</p>
</div> </div>
</section> </section>
<section class="moment"> <section class="band light" data-bg="light">
<div class="wrap narrow"> <div class="wrap reveal">
<h2>The moment your shop is in</h2> <p class="eyebrow">How I work</p>
<p>The real work runs on knowledge that lives in one or two heads — the veteran who knows which machine runs hot, how to save a bad batch, what the customer really meant. It's never been written down. And those heads are heading for retirement.</p> <h2>I work differently — <em>on purpose.</em></h2>
<p>Here's the part nobody likes to say out loud: a business that lives in a few people's heads is worth less the day you go to sell it. Buyers see the risk even when you don't. So do your best customers — the first time a job goes sideways after someone walks out the door.</p> <p class="section-intro">The default — automation to cut headcount, AI as a sales pitch, delivered through tools you'll never own — leaves owners anxious and good people sidelined. That's not this.</p>
<p class="pull">This isn't a technology problem. It's a continuity problem — and it's fixable.</p> <div class="cards four stagger">
</div>
</section>
<section class="principles">
<div class="wrap">
<h2>We work differently</h2>
<p class="section-intro">The default approach — automation for cost reduction, AI as a sales pitch, delivered through tools you'll never own — leaves businesses anxious and people sidelined.</p>
<div class="grid four">
<div class="card"> <div class="card">
<h3>People stay essential</h3> <h3>People stay essential</h3>
<p>Used well, modern tools make your people more capable, not less needed. We design systems that respect the judgment your team has earned.</p> <p>Used well, modern tools make your people more capable, not less needed. I design systems that respect the judgment your team has earned.</p>
</div> </div>
<div class="card"> <div class="card">
<h3>Wisdom over speed</h3> <h3>Wisdom over speed</h3>
<p>Wisdom is a slower technology than intelligence. We work at the pace good work requires, not the pace the hype cycle demands.</p> <p>Wisdom is a slower technology than intelligence. I work at the pace good work needs, not the pace the hype cycle demands.</p>
</div> </div>
<div class="card"> <div class="card">
<h3>You own everything</h3> <h3>You own everything</h3>
<p>Every tool we build, every system we design — you own it completely. No retainers, no lock&#8209;in, no subscriptions you can't escape.</p> <p>Every system I build is yours — hosted on Canadian soil, fully documented. Your data never leaves the country, and nothing locks you in.</p>
</div> </div>
<div class="card"> <div class="card">
<h3>One person, accountable</h3> <h3>One person, accountable</h3>
<p>The person you talk to is the person doing the work. No pipelines, no account managers, no chatbots between you and the help you need.</p> <p>The person you talk to is the person doing the work. No account managers, no pipelines, no chatbots between you and the help.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="services" id="work"> <section class="band light" data-bg="light" id="work">
<div class="wrap"> <div class="wrap reveal">
<h2>The work</h2> <p class="eyebrow">The work</p>
<p class="section-intro">It starts with keeping what your best people know — then turning it into tools the whole shop can use. Every engagement begins with understanding your actual problem before suggesting a solution.</p> <h2>Keep what they know. <em>Then</em> build it into the shop.</h2>
<p class="section-intro">Three steps: find out where you're exposed, fix it, and keep it handled. Every engagement starts by understanding your actual problem before I suggest a thing.</p>
<div class="service flagship"> <div class="cards stagger">
<h3>Wisdom preservation <span class="tag">Knowledge transfer · Succession</span></h3> <div class="card">
<p>Before your best people retire — or before you sell the business — encode the judgment that lives in their heads. The shortcuts. The warnings. The feel for when something's off. The institutional knowledge that exists nowhere else. We document that expertise and build it into tools your team can use long after the experts are gone — decision guides, diagnostic tools, training systems.</p> <span class="step-k">Start here · Diagnose</span>
<p>The value of a business isn't just its revenue — it's the knowledge that makes the revenue possible. We help you capture that before the transition, so the business retains its value after you step away. <strong>For owners thinking about exit: this work is one of the most direct ways to protect the value of what you've built.</strong></p> <h3>The Continuity Audit</h3>
<p class="service-cta"><a href="continuity-audit.html">Start with a Continuity Audit — find out where you're exposed →</a></p> <p>I spend time on your floor and find exactly where you're exposed: who holds what, what it would cost you if they left tomorrow, and what it's doing to the value of your business. You get a plain&#8209;English risk report and a roadmap. Fixed fee. Nothing to install.</p>
<p class="outcome">You walk away knowing where your shop is exposed — and what to do about it.</p>
<a class="card-link" href="continuity-audit.html">How the audit works →</a>
</div> </div>
<div class="card">
<div class="handoff"> <span class="step-k">Fix · Capture &amp; build</span>
<p>The hardest part of capturing what someone knows is getting them to share it — and getting a shop to actually change how it works. That's a people problem, not a paperwork one — and it's exactly what our sister practice, <a href="https://opencommunications.consulting">Open Communications →</a>, is built for.</p> <h3>Capture it — and make it usable</h3>
<p>I sit down with your best people, draw out what's in their heads, and build it into systems the whole crew can actually use — documented, trained, and built to last. You don't need to clean up thirty years of spreadsheets first: that mess <strong>is</strong> the knowledge, and waiting for perfect data is how it gets lost. The modern tools do the heavy lifting so it's fast and affordable; the part that matters is human — getting your veteran to open up, and capturing the judgment, not just the steps.</p>
<p class="outcome">The day your best person retires, the work doesn't stop.</p>
</div> </div>
<div class="card feature">
<div class="service"> <span class="step-k">Keep it handled · Recurring</span>
<h3>From static to smart</h3> <span class="card-tag">The Continuity Partner</span>
<p>Most shops are running on processes built for a world a decade behind. Pricelists in Excel. Catalogues in PDF. Order forms printed and faxed. These tools work — until they don't, and until the person who knows how to use them isn't there. We take what you have and turn it into a searchable, shareable, hosted web tool your team and customers can access from anywhere. The logic stays the same. The friction disappears.</p> <h3>I stay on, so you never face this again</h3>
<p>Continuity isn't a one&#8209;time job. I stay on: capture the next person before they leave, bring new hires up to speed on the system, and keep everything current. Quarterly, on a simple retainer. This is where most shops finally stop firefighting.</p>
<p class="outcome">Continuity stays handled — forever, not once.</p>
</div> </div>
<div class="service">
<h3>Custom web tools</h3>
<p>Phone&#8209;tag quoting. Email&#8209;chain approvals. Clipboard scheduling. These workflows depend on one person knowing where everything is — and they break the moment that person is unavailable. We replace them with guided online systems that get the right answer without back&#8209;and&#8209;forth. Your customers and partners self&#8209;serve. Your staff focus on work that actually needs them.</p>
</div> </div>
<p class="reassure">Everything I build comes with full documentation and a handover session. You'll never be dependent on me to keep it running.</p>
<div class="service">
<h3>Measured AI integration <span class="tag">No hype · No lock&#8209;in</span></h3>
<p>AI is genuinely useful in a narrow set of situations. It's also genuinely overhyped in most others. I'll tell you which is which before we start — and I'll tell you what it can't do, not just what it can. We add AI to your existing tools only where it saves real time, makes real decisions clearer, or protects work your team is already doing well. No proprietary platforms. No black boxes.</p>
</div>
<div class="service">
<h3>Personal AI practice</h3>
<p>Most AI advice is written for people who already understand the tools. This isn't that. A personal session designed around your specific work and what you're trying to do — whether you're a business owner, a professional, or someone who just wants to stop feeling behind. We figure out where AI genuinely helps you, what tools fit how you actually think, and what habits will stick. Includes a 30&#8209;day follow&#8209;up to see what stuck, what didn't, and what to adjust.</p>
</div>
<p class="reassure">All projects include full documentation and a handover session. You will never be dependent on me to keep your tool running.</p>
</div> </div>
</section> </section>
<section class="results" id="results"> <section class="band light" data-bg="light" id="results">
<div class="wrap"> <div class="wrap reveal">
<h2>Client results</h2> <p class="eyebrow">Client results</p>
<p class="section-intro">Real projects. Real clients. The before and after of replacing manual processes with intelligent web tools.</p> <h2>What "build it into a system" <em>actually</em> looks like.</h2>
<p class="section-intro">Real projects for real Canadian shops — the before and after of taking knowledge that lived in a spreadsheet (and one person's head) and turning it into a tool the whole team can use.</p>
<div class="cases">
<div class="case"> <div class="case">
<h3>Dealer pricing: from emailed workbook to live catalog</h3> <h3>Dealer pricing: from emailed workbook to live catalog</h3>
<p><strong>Before —</strong> dealer pricing lived in a multi&#8209;tab Excel workbook that was emailed to resellers on request. Dealers had to manually calculate their own pricing, and any discount change meant redistributing the file. Staff spent significant time fielding calls from dealers who couldn't find what they needed.</p> <p><strong>Before —</strong> dealer pricing lived in a multi&#8209;tab Excel workbook emailed to resellers on request. Dealers calculated their own pricing by hand, and any discount change meant redistributing the file. Staff spent real time fielding calls from dealers who couldn't find what they needed.</p>
<p><strong>After —</strong> a hosted dealer pricing tool with real&#8209;time discount logic, profile&#8209;based pricing tiers, product filtering, and a built&#8209;in order builder with export and email summary. Dealers access it directly — no file to download, no call required.</p> <p><strong>After —</strong> a hosted dealer pricing tool with real&#8209;time discount logic, profile&#8209;based pricing tiers, product filtering, and a built&#8209;in order builder with export and email summary. Dealers access it directly — no file to download, no call required.</p>
<div class="case-shots"> <div class="case-shots">
<figure class="case-shot"> <figure class="case-shot">
@@ -192,7 +192,7 @@
<div class="case"> <div class="case">
<h3>Order forms: from printed sheet to guided system</h3> <h3>Order forms: from printed sheet to guided system</h3>
<p><strong>Before —</strong> the customer order form was a printed Excel sheet with basic formulas. Sales reps filled it in manually, calculated totals by hand, and emailed or faxed it in. The process was error&#8209;prone, slow, and entirely dependent on one person knowing where everything was.</p> <p><strong>Before —</strong> the customer order form was a printed Excel sheet with basic formulas. Sales reps filled it in by hand, calculated totals manually, and emailed or faxed it in. Error&#8209;prone, slow, and entirely dependent on one person knowing where everything was.</p>
<p><strong>After —</strong> a hosted web order form with multiple pricing tiers, a pattern selector with live unit pricing, cut&#8209;length calculators, and a print&#8209;ready summary. Orders are submitted electronically — no phone call, no fax, no manual calculation.</p> <p><strong>After —</strong> a hosted web order form with multiple pricing tiers, a pattern selector with live unit pricing, cut&#8209;length calculators, and a print&#8209;ready summary. Orders are submitted electronically — no phone call, no fax, no manual calculation.</p>
<div class="case-shots"> <div class="case-shots">
<figure class="case-shot"> <figure class="case-shot">
@@ -213,64 +213,83 @@
</blockquote> </blockquote>
</div> </div>
<p class="reassure">Have a spreadsheet or process that needs the same treatment? <a href="#contact">Start with a conversation.</a></p> </div>
<p class="reassure">Have a spreadsheet or a process that should work this way? <a class="card-link" href="#contact">Start with a conversation.</a></p>
</div> </div>
</section> </section>
<section class="process" id="process"> <section class="band light" data-bg="light">
<div class="wrap narrow"> <div class="wrap narrow reveal">
<h2>How it works</h2> <p class="eyebrow">The honest part</p>
<p class="section-intro">Every step explained. Every decision yours to approve. No black boxes, no surprises — a transparent process from first call to final handoff.</p> <h2>The hard part isn't the paperwork. <em>It's people.</em></h2>
<p>Most attempts at this quietly stall — MIT's 2025 "State of AI in Business" study found 95% of company AI projects deliver no measurable return, and the tools usually aren't the problem. Most shops have already learned it the hard way: there's a binder somewhere — half&#8209;finished, on a shelf, out of date the week it was printed. It didn't fail because the writing was bad. It failed because getting a veteran to hand over what he knows, and getting a shop to actually change how it works, is a people problem, not a paperwork one. Your best people aren't holding back to be difficult — they're protecting the thing that's made them irreplaceable for thirty years.</p>
<div class="handoff">
<p>That human side is exactly what my other practice, <a href="https://www.opencommunications.consulting/">Open Communications →</a>, is built for. Same business, same straight talk — one side works on the shop, the other works with the crew.</p>
</div>
</div>
</section>
<section class="band alt" data-bg="light" id="process">
<div class="wrap narrow reveal">
<p class="eyebrow">How it works</p>
<h2>Every step explained. <em>Every decision yours.</em></h2>
<p class="section-intro">No black boxes, no surprises — a transparent path from the first call to the final handoff.</p>
<ol class="steps"> <ol class="steps">
<li> <li>
<h3>A free fit call</h3> <h3>A free fit call</h3>
<p>A short conversation to see if there's a match. You describe what's slowing you down. I give you an honest read on whether I can help. No pitch, no obligation. If it's not the right match, I'll tell you honestly and point you somewhere that can help.</p> <p>A short conversation to see if there's a match. You describe what's slowing you down; I give you an honest read on whether I can help. No pitch, no obligation. If it's not a fit, I'll tell you and point you somewhere that is.</p>
</li> </li>
<li> <li>
<h3>A paid discovery session</h3> <h3>A paid discovery session</h3>
<p>If there's a fit, a focused 90&#8209;minute working meeting where we map the real problem, identify what's worth solving first, and outline what a solution would look like. You leave with a written recommendation, whether or not we work together further.</p> <p>If there's a fit, a focused 90&#8209;minute working meeting where we map the real problem, decide what's worth solving first, and outline what a solution looks like. You leave with a written recommendation — whether or not we work together further.</p>
</li> </li>
<li> <li>
<h3>A fixed&#8209;scope proposal</h3> <h3>A fixed&#8209;scope proposal</h3>
<p>You know exactly what gets built, what it costs, and what you own at the end — before any work begins. The proposal is written in plain language, not technical jargon. Scope changes are a conversation, not a surprise invoice.</p> <p>You know exactly what gets built, what it costs, and what you own at the end — before any work begins. Written in plain language, not jargon. Scope changes are a conversation, not a surprise invoice.</p>
</li> </li>
<li> <li>
<h3>A deliverable you own</h3> <h3>A deliverable you own</h3>
<p>The work moves in iterative cycles with regular review meetings. At the end: hosted, documented, and yours. Full documentation and a walkthrough session. Update it, share it, use it — without ever calling me again. Unless you want to. Ongoing support is available, but never required.</p> <p>The work moves in short cycles with regular review. At the end it's hosted, documented, and yours — update it, share it, use it without ever calling me again. Unless you want to: ongoing support is available, never required.</p>
</li> </li>
</ol> </ol>
</div> </div>
</section> </section>
<section class="about" id="about"> <section class="band light" data-bg="light" id="about">
<div class="wrap narrow"> <div class="wrap narrow reveal">
<h2>About</h2> <p class="eyebrow">About</p>
<p class="about-name">Michael Victory — Principal, Shop Wisdom</p> <h2>The person you'll <em>actually</em> be working with.</h2>
<p>I've spent 25 years inside small and mid&#8209;sized businesses, including 13 years building long&#8209;term partnerships across a dealer network, and the last several years training non&#8209;technical people to use modern tools well. I know what it looks like when good people are slowed down by tools that were never built for how they actually work — and what it costs a shop when the person who knew how everything worked finally retires.</p> <p class="about-name">Michael Victory — ShopWisdom</p>
<p>I started this practice because I kept seeing the same gap: the distance between what a business needs and what technology vendors were willing to build honestly and affordably. Most consultants either over&#8209;engineer the solution or under&#8209;explain the cost. I've been on the receiving end of both.</p> <p>I've spent 25 years inside small and mid&#8209;sized businesses — including 13 building long&#8209;term partnerships across a dealer network, and the last several years helping non&#8209;technical people use modern tools well. I know what it looks like when good people are slowed down by tools that were never built for how they work — and what it costs a shop when the person who knew how everything ran finally retires.</p>
<p>I use modern tools — including AI — to build faster and at lower cost than traditional development. I'll always tell you how something was built and what it can't do. No mystification, no inflated promises. And I'll tell you if you don't need me. That conversation costs nothing and saves everyone time.</p> <p>I started this practice because I kept seeing the same gap: the distance between what a business actually needs and what technology vendors were willing to build honestly and affordably. Most consultants either over&#8209;engineer the solution or under&#8209;explain the cost. I've been on the receiving end of both.</p>
<p>I use modern tools — including AI — to build faster and cheaper than traditional development, and I'll always tell you how something was built and what it can't do. No mystification, no inflated promises. And I'll tell you if you don't need me. That conversation costs nothing and saves everyone time.</p>
</div> </div>
</section> </section>
<section class="fit" id="fit"> <section class="band light" data-bg="light" id="fit">
<div class="wrap narrow"> <div class="wrap narrow reveal">
<h2>Honest about fit</h2> <p class="eyebrow">Honest about fit</p>
<p class="section-intro">Shop Wisdom isn't for everyone. We're probably not the right fit for:</p> <h2>I'm <em>not</em> for everyone.</h2>
<p class="section-intro">ShopWisdom is probably not the right fit if you're:</p>
<ul class="notfor"> <ul class="notfor">
<li><strong>Businesses looking to cut headcount through automation.</strong> AI used to make people redundant isn't what we do.</li> <li><strong>Looking to cut headcount through automation.</strong> AI used to make people redundant isn't what I do.</li>
<li><strong>Anyone who wants a vendor forever.</strong> If you want to pay someone monthly to keep your system running, there are plenty of SaaS products. We're not one of them.</li> <li><strong>After a vendor forever.</strong> If you want to pay someone monthly just to keep your system running, there are plenty of SaaS products. I'm not one of them — the Continuity Partner keeps your knowledge current; it doesn't hold your tools hostage.</li>
<li><strong>Anyone looking for a Super Bowl AI strategy.</strong> No hype, no transformation slides, no buzzwords. Just specific work with measurable outcomes.</li> <li><strong>Shopping for a Super Bowl AI strategy.</strong> No hype, no transformation slides, no buzzwords. Just specific work with measurable outcomes.</li>
<li><strong>Businesses where the people problems run deeper than systems.</strong> Tools amplify what's already there. If trust is missing, software won't fix it — though that's exactly the kind of work our sister practice, <a href="https://opencommunications.consulting">Open Communications</a>, takes on.</li> <li><strong>Facing people problems that run deeper than systems.</strong> Tools amplify what's already there. If trust is missing, software won't fix it — though that's exactly what my other practice, <a href="https://www.opencommunications.consulting/">Open Communications</a>, takes on.</li>
</ul> </ul>
<p>If any of that describes you, we're probably not the right fit — and being honest now saves us both time.</p> <p>If any of that is you, we're probably not a fit — and being honest now saves us both time.</p>
</div> </div>
</section> </section>
<section class="contact" id="contact"> <div class="o-divider" aria-hidden="true">
<div class="wrap narrow"> <svg viewBox="0 0 538 538"><path d="M269.06,0C120.46,0,0,120.46,0,269.06s120.46,269.06,269.06,269.06,269.06-120.46,269.06-269.06S417.66,0,269.06,0ZM276.06,356.34c-48.2,0-87.28-39.07-87.28-87.28s39.07-87.28,87.28-87.28,87.28,39.08,87.28,87.28-39.07,87.28-87.28,87.28Z"/></svg>
<h2>Start with a conversation</h2> </div>
<p>No pitch. No proposal until we've had a real conversation. Describe the friction — even roughly. The more context you share, the more useful our first conversation will be.</p>
<p>I read every message personally and usually reply within one business day. If your problem isn't something I can help with, I'll tell you honestly — and point you somewhere that can.</p> <section class="band light contact" data-bg="light" id="contact">
<div class="wrap narrow reveal">
<p class="eyebrow">Start a conversation</p>
<h2>Your know&#8209;how built this shop. Let's make sure it <em>stays</em> in it.</h2>
<p>No pitch, no proposal until we've had a real conversation. Describe the friction — even roughly. The more context you share, the more useful our first call will be.</p>
<form class="lf" data-endpoint="https://n8n.shopwisdom.ca/webhook/lead" data-source="shopwisdom" novalidate> <form class="lf" data-endpoint="https://n8n.shopwisdom.ca/webhook/lead" data-source="shopwisdom" novalidate>
<div class="lf-progress" aria-hidden="true"><span class="lf-dot is-active"></span><span class="lf-dot"></span><span class="lf-dot"></span></div> <div class="lf-progress" aria-hidden="true"><span class="lf-dot is-active"></span><span class="lf-dot"></span><span class="lf-dot"></span></div>
@@ -287,7 +306,7 @@
<fieldset class="lf-step" data-step="2"> <fieldset class="lf-step" data-step="2">
<legend class="lf-q">Anything you want me to know? <span class="lf-opt">(optional)</span></legend> <legend class="lf-q">Anything you want me to know? <span class="lf-opt">(optional)</span></legend>
<textarea class="lf-input" name="detail" rows="3" placeholder="Even a rough sentence helps."></textarea> <textarea class="lf-input" name="detail" rows="3" placeholder="Even a rough sentence helps."></textarea>
<div class="lf-nav"><button type="button" class="btn ghost lf-back" data-back>← Back</button><button type="button" class="btn lf-next" data-next>Continue →</button></div> <div class="lf-nav"><button type="button" class="btn link lf-back" data-back>← Back</button><button type="button" class="btn lf-next" data-next>Continue →</button></div>
</fieldset> </fieldset>
<fieldset class="lf-step" data-step="3"> <fieldset class="lf-step" data-step="3">
<legend class="lf-q">Where do I reach you?</legend> <legend class="lf-q">Where do I reach you?</legend>
@@ -295,39 +314,55 @@
<input class="lf-input" type="email" name="email" placeholder="Email" required autocomplete="email"> <input class="lf-input" type="email" name="email" placeholder="Email" required autocomplete="email">
<input class="lf-input" type="tel" name="phone" placeholder="Phone (optional)" autocomplete="tel"> <input class="lf-input" type="tel" name="phone" placeholder="Phone (optional)" autocomplete="tel">
<input type="text" name="company_website" class="lf-hp" tabindex="-1" autocomplete="off" aria-hidden="true"> <input type="text" name="company_website" class="lf-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
<div class="lf-nav"><button type="button" class="btn ghost lf-back" data-back>← Back</button><button type="submit" class="btn lf-submit">Send it →</button></div> <div class="lf-nav"><button type="button" class="btn link lf-back" data-back>← Back</button><button type="submit" class="btn lf-submit">Send it →</button></div>
<p class="lf-err" hidden>Hmm — that didn't go through. Please <a href="mailto:michael@opencommunications.consulting">email me directly</a> and I'll get right back to you.</p> <p class="lf-err" hidden>Hmm — that didn't go through. Please <a href="mailto:michael@opencommunications.consulting">email me directly</a> and I'll get right back to you.</p>
</fieldset> </fieldset>
<div class="lf-done" hidden><p class="lf-done-msg">Got it — thanks. I read every message personally and usually reply within a business day.</p></div> <div class="lf-done" hidden><p class="lf-done-msg">Got it — thanks. I read every message personally and usually reply within a business day.</p></div>
</form> </form>
<p class="lf-alt">Prefer to reach out directly?</p> <p class="lf-alt">Prefer to reach out directly?</p>
<p class="contact-action"> <p class="actions center">
<a class="btn" href="mailto:michael@opencommunications.consulting?subject=Fit%20call%20—%20Shop%20Wisdom">Email Michael</a> <a class="btn link" href="mailto:michael@opencommunications.consulting?subject=Fit%20call%20—%20Shop%20Wisdom">Email Michael</a>
<a class="btn ghost tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778&#8209;985&#8209;OPEN (6736)</a> <a class="btn link tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">Call 778&#8209;985&#8209;OPEN (6736)</a>
</p> </p>
<p class="contact-promise">The first call is free and commits you to nothing.</p> <p class="promise">The first call is free and commits you to nothing.</p>
</div> </div>
</section> </section>
</main> </main>
<footer class="site-footer"> <footer class="site-footer" data-bg="dark">
<div class="wrap"> <div class="footer-bg" aria-hidden="true">
<p class="footer-brand">Shop<span>Wisdom</span></p> <svg class="footer-bg-img" viewBox="0 0 1267.12 317" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<p>Built with care and AI · Work owned by its clients</p> <path d="M158.5,0C70.96,0,0,70.96,0,158.5s70.96,158.5,158.5,158.5,158.5-70.96,158.5-158.5S246.04,0,158.5,0ZM158.42,210.08c-28.44,0-51.5-23.06-51.5-51.5s23.06-51.5,51.5-51.5,51.5,23.06,51.5,51.5-23.06,51.5-51.5,51.5Z"/>
<p>Hosted in Beauharnois, Québec — your data stays in Canada.</p> <path d="M475.45.08c-87.54,0-158.5,70.96-158.5,158.5,0,1.27.02,2.54.05,3.81v154.87h106.87v-158.6h0c0-28.44,23.06-51.5,51.5-51.5s51.5,23.06,51.5,51.5-23.06,51.5-51.5,51.5c-6.49,0-12.7-1.21-18.42-3.41v109.24c6.07.71,12.24,1.08,18.5,1.08,87.54,0,158.5-70.96,158.5-158.5S562.99.08,475.45.08Z"/>
<p class="footer-call"><a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="mailto:michael@opencommunications.consulting">778&#8209;985&#8209;OPEN (6736)</a></p> <path d="M791.96,210.25c-28.44,0-51.5-23.06-51.5-51.5s23.06-51.5,51.5-51.5,51.5,23.06,51.5,51.5c0,6.49-1.21,12.7-3.41,18.42h109.41c.71-6.07,1.08-12.24,1.08-18.5C950.54,71.13,879.57.17,792.04.17s-158.5,70.96-158.5,158.5,70.96,158.5,158.5,158.5c69.48,0,128.51-44.71,149.91-106.92h-149.99Z"/>
<p class="footer-legal">Shop Wisdom and Open Communications are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p> <path d="M1109.31,0h0S950.12,0,950.12,0v159.19h0c.35,81.64,62.41,148.7,141.95,156.95v-156.13c0-9.14,7.41-16.54,16.54-16.54s16.54,7.41,16.54,16.54v156.13c79.76-8.27,141.96-75.69,141.96-157.64C1267.12,71.19,1196.53.38,1109.31,0Z"/>
</svg>
</div>
<div class="footer-content">
<div class="footer-block">
<p class="footer-wordmark">Shop<span>Wisdom</span></p>
<nav class="footer-links" aria-label="Footer">
<a href="#work">The work</a>
<a href="#results">Client results</a>
<a href="#process">How it works</a>
<a href="https://www.opencommunications.consulting/">Open Communications</a>
</nav>
<p class="footer-note">Built with care and AI · Work owned by its clients · Hosted in Beauharnois, Québec — your data stays in Canada.</p>
<p class="footer-copy">Shop Wisdom and Open Communications are practices of Open Communications, owned and operated by Michael Victory · British Columbia, Canada</p>
</div>
</div> </div>
</footer> </footer>
<div class="float-cta">
<a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20-min-shop-wise-meeting" data-cal-link="michaelvictory/20-min-shop-wise-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a call</a>
</div>
<script> <script>
(function () { (function () {
var links = document.querySelectorAll('a.tel'); for (var l of document.querySelectorAll('a.tel')) {
for (var i = 0; i < links.length; i++) { l.setAttribute('href', 'tel:+1' + l.dataset.p1 + l.dataset.p2 + l.dataset.p3);
var el = links[i];
el.setAttribute('href', 'tel:+1' + el.dataset.p1 + el.dataset.p2 + el.dataset.p3);
} }
var toggle = document.getElementById('navToggle'); var toggle = document.getElementById('navToggle');
var menu = document.getElementById('navMobileMenu'); var menu = document.getElementById('navMobileMenu');
@@ -344,10 +379,34 @@
toggle.classList.toggle('open', open); toggle.classList.toggle('open', open);
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu'); toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
updateNavTheme();
}); });
var mlinks = menu.querySelectorAll('a'); for (var a of menu.querySelectorAll('a')) { a.addEventListener('click', closeMenu); }
for (var j = 0; j < mlinks.length; j++) { mlinks[j].addEventListener('click', closeMenu); }
} }
var nav = document.getElementById('nav');
var sections = Array.prototype.slice.call(document.querySelectorAll('[data-bg]'));
function darkBehind(y) {
for (var i = 0; i < sections.length; i++) {
var r = sections[i].getBoundingClientRect();
if (r.top <= y && r.bottom > y) return sections[i].dataset.bg === 'dark';
}
return false;
}
function updateNavTheme() {
nav.classList.toggle('scrolled', window.scrollY > 24);
var nr = nav.getBoundingClientRect();
nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
if (menu && menu.classList.contains('open')) {
var links = menu.querySelectorAll('a');
var probe = links.length
? links[links.length - 1].getBoundingClientRect().bottom
: (function () { var mr = menu.getBoundingClientRect(); return (mr.top + mr.bottom) / 2; })();
menu.classList.toggle('on-dark', darkBehind(probe));
}
}
updateNavTheme();
window.addEventListener('scroll', function () { window.requestAnimationFrame(updateNavTheme); }, { passive: true });
window.addEventListener('resize', updateNavTheme);
})(); })();
</script> </script>
@@ -410,5 +469,37 @@
Cal("init", { origin: "https://cal.shopwisdom.ca" }); Cal("init", { origin: "https://cal.shopwisdom.ca" });
</script> </script>
<!-- Motion: reveal-on-scroll + stagger + open-o divider + persistent CTA. Gated on html.has-motion. -->
<script>
(function () {
var root = document.documentElement;
if (!root.classList.contains('has-motion')) return;
var nodes = [].slice.call(document.querySelectorAll('.reveal, .stagger, .o-divider'));
function showAll() { nodes.forEach(function (n) { n.classList.add('in'); }); }
try {
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.12 });
nodes.forEach(function (n) { io.observe(n); });
} else { showAll(); }
} catch (err) { showAll(); }
var cta = document.querySelector('.float-cta');
var hero = document.querySelector('.hero');
var contact = document.getElementById('contact');
if (cta && hero) {
var upd = function () {
var pastHero = window.scrollY > hero.offsetHeight - 90;
var atContact = contact && contact.getBoundingClientRect().top < window.innerHeight * 0.92;
cta.classList.toggle('show', pastHero && !atContact);
};
upd();
window.addEventListener('scroll', function () { window.requestAnimationFrame(upd); }, { passive: true });
window.addEventListener('resize', upd);
}
})();
</script>
</body> </body>
</html> </html>
style.css
+296 -209
View File
@@ -1,268 +1,355 @@
:root { :root {
--ink: #21262b; --paper: #f7f4ef;
--ink-soft: #4a525a; --paper-2: #efebe3;
--paper: #faf7f2; --navy: #0f1729;
--panel: #ffffff; --navy-2: #1a2336;
--line: #e3ddd2; --ink: #0f1729;
--steel: #2c5d7c; --ink-soft: #4a5468;
--steel-deep: #1e4258; --gray: #374151;
--amber: #b9742a; --gray-line: #6b7280;
--max: 1080px; --cream: #f7f4ef;
--cream-soft: rgba(247, 244, 239, 0.62);
/* SW accent — steel-blue (the cool/industrial sibling of OC's warm amber) */
--accent: #2c5d7c;
--accent-deep: #1e4258;
--line: rgba(15, 23, 41, 0.12);
--line-dark: rgba(247, 244, 239, 0.16);
--max: 1100px;
--nav-h: 66px;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target, [id] { scroll-margin-top: 76px; } [id] { scroll-margin-top: 84px; }
body { body {
margin: 0; margin: 0;
background: var(--paper); background: var(--paper);
color: var(--ink); color: var(--ink);
font-family: Georgia, 'Times New Roman', serif; font-family: 'Lora', Georgia, serif;
font-size: 19px; font-size: 16px;
line-height: 1.65; line-height: 1.8;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
} }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .wrap { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 48px; }
.wrap.narrow { max-width: 780px; } .wrap.narrow { max-width: 1920px; }
.hero-col { max-width: 600px; }
.band.light p:not(.section-intro):not(.outcome) { max-width: 42em; }
h1, h2, h3 { font-family: Georgia, serif; font-weight: 700; line-height: 1.2; color: var(--ink); } h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; line-height: 1.08; margin: 0 0 0.5em; color: var(--ink); }
h2 { font-size: 2rem; margin: 0 0 0.5em; } h1 { font-size: 3.8rem; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; margin: 0 0 0.4em; } h2 { font-size: 2.6rem; letter-spacing: -0.01em; }
h3 { font-size: 1.45rem; line-height: 1.2; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
p { margin: 0 0 1.2em; }
strong { font-weight: 500; color: var(--ink); }
a { color: var(--steel); } /* Eyebrow with steel dash */
/* Header */
.site-header {
background: rgba(250, 247, 242, 0.8);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 100;
}
.header-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
/* Mobile hamburger -> X + frosted dropdown (placed OUTSIDE the header so its glass blurs the page) */
.nav-toggle { display: none; cursor: pointer; padding: 4px; background: none; border: none; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-toggle-icon { width: 30px; height: 30px; overflow: visible; }
.nav-toggle-icon .bar { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; transform-origin: 16px 16px; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(.4,0,.2,1); }
.nav-toggle.open .bar-top { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open .bar-mid { opacity: 0; }
.nav-toggle.open .bar-bot { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile-menu {
display: none; position: fixed; top: 53px; left: 0; right: 0; z-index: 90;
flex-direction: column; gap: 18px; padding: 24px 24px 28px;
background: rgba(250, 247, 242, 0.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line); align-items: flex-end; text-align: right;
font-family: Verdana, Geneva, sans-serif;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.nav-mobile-menu a:hover { color: var(--steel); }
.nav-mobile-menu a.tel { color: var(--steel); font-weight: bold; }
.nav-mobile-menu .nav-cta { color: #fff !important; }
.wordmark {
font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700;
color: var(--ink); text-decoration: none; letter-spacing: 0.01em;
}
.wordmark span { color: var(--amber); }
.site-nav { display: flex; flex-wrap: nowrap; gap: 22px; align-items: center; font-family: Verdana, Geneva, sans-serif; font-size: 0.82rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--steel); }
.nav-cta {
background: var(--steel); color: #fff !important;
padding: 8px 16px; border-radius: 4px;
}
.nav-cta:hover { background: var(--steel-deep); }
.nav-phone {
color: var(--steel) !important; font-weight: bold;
letter-spacing: 0.02em; white-space: nowrap;
}
.nav-phone:hover { color: var(--steel-deep) !important; }
/* Click-to-call */
a.tel { text-decoration: none; }
.hero-call { font-family: Verdana, Geneva, sans-serif; font-size: 0.9rem; color: var(--ink-soft); margin: 16px 0 0; }
.hero-call a.tel { color: var(--steel); font-weight: bold; white-space: nowrap; }
.footer-call a.tel { color: #fff; font-weight: bold; white-space: nowrap; }
/* OC handoff callout */
.handoff {
background: #f4efe6; border-left: 4px solid var(--amber); border-radius: 0 6px 6px 0;
padding: 20px 24px; margin: 18px 0 28px; max-width: 56em;
}
.handoff p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.handoff a { font-weight: bold; white-space: nowrap; }
/* Hero */
.hero { padding: 90px 0 70px; background: var(--paper); }
.eyebrow { .eyebrow {
font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem; font-family: 'DM Sans', sans-serif; font-size: 0.66rem; font-weight: 400;
text-transform: uppercase; letter-spacing: 0.14em; color: var(--amber); text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent);
margin: 0 0 18px; margin: 0 0 24px; display: flex; align-items: center;
} }
.hero h1 { font-size: 2.7rem; max-width: 18em; margin: 0 0 0.4em; } .eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--accent); margin-right: 18px; flex: none; }
.hero-sub { font-size: 1.3rem; color: var(--ink-soft); margin: 0 0 1.6em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Nav — frosted glass, small links that never wrap, hamburger->circle on mobile */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 0.85rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
background: transparent; border-bottom: 1px solid transparent;
transition: background-color 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
}
.nav.scrolled { background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(15, 23, 41, 0.08); }
.nav-logo { flex-shrink: 0; display: flex; align-items: baseline; text-decoration: none; }
.nav-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; transition: color 0.45s ease; }
.nav-wordmark span { color: var(--accent); }
.nav-links-desktop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); }
.nav-links-desktop a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; white-space: nowrap; transition: color 0.3s; }
.nav-links-desktop a:hover { color: #0f1729; }
.nav-links-desktop a.nav-phone { color: var(--accent-deep); font-weight: 500; }
.nav-cta {
font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.55rem 1.3rem; background: var(--accent); color: #fff !important; border-radius: 2px; text-decoration: none;
white-space: nowrap; border: none; transition: background 0.3s;
}
.nav-cta:hover { background: var(--accent-deep); }
a.tel { text-decoration: none; }
.nav-toggle { display: none; cursor: pointer; padding: 4px; background: none; border: none; align-items: center; justify-content: center; }
.nav-toggle-icon { width: 32px; height: 32px; overflow: visible; }
.nav-toggle-icon .bar { stroke: #0f1729; stroke-width: 1.8; stroke-linecap: round; transition: stroke 0.45s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1); }
.nav-toggle-icon .o-ring { fill: none; stroke: #0f1729; stroke-width: 1.8; stroke-dasharray: 57; stroke-dashoffset: 57; opacity: 0; transform-origin: 16px 16px; transition: stroke 0.45s ease, stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) 0.1s, opacity 0.2s ease 0.1s; }
.nav-toggle.open .bar-top { opacity: 0; transform: translateY(-4px); }
.nav-toggle.open .bar-mid { opacity: 0; transform: scaleX(0); }
.nav-toggle.open .bar-bot { opacity: 0; transform: translateY(4px); }
.nav-toggle.open .o-ring { stroke-dashoffset: 0; opacity: 1; }
.nav-mobile-menu {
display: none; position: fixed; top: 56px; left: 0; right: 0; z-index: 90;
flex-direction: column; gap: 1.25rem; padding: 1.75rem 1.5rem 2rem;
background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(15, 23, 41, 0.08); align-items: flex-end; text-align: right;
transition: background-color 0.45s ease, border-color 0.45s ease;
}
.nav-mobile-menu.open { display: flex; animation: navFadeIn 0.22s ease forwards; }
.nav-mobile-menu a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; transition: color 0.45s ease; }
.nav-mobile-menu a:hover { color: #0f1729; }
.nav-mobile-menu a.tel { color: var(--accent-deep); }
.nav-mobile-menu .nav-cta { color: #fff !important; }
@keyframes navFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* Adaptive: over a dark section, flip nav + menu to dark frosted with light text */
.nav.on-dark { background: rgba(15, 23, 41, 0.5); border-bottom-color: rgba(247, 244, 239, 0.14); }
.nav.on-dark .nav-wordmark { color: #f7f4ef; }
.nav.on-dark .nav-links-desktop a { color: rgba(247, 244, 239, 0.85); }
.nav.on-dark .nav-links-desktop a:hover { color: #fff; }
.nav.on-dark .nav-links-desktop a.nav-phone { color: #fff; }
.nav.on-dark .nav-toggle-icon .bar, .nav.on-dark .nav-toggle-icon .o-ring { stroke: #f7f4ef; }
.nav-mobile-menu.on-dark { background: rgba(15, 23, 41, 0.55); border-bottom-color: rgba(247, 244, 239, 0.14); }
.nav-mobile-menu.on-dark a { color: rgba(247, 244, 239, 0.9); }
.nav-mobile-menu.on-dark a:hover { color: #fff; }
.nav-mobile-menu.on-dark .nav-cta { color: #fff !important; }
@media (max-width: 900px) {
.nav { padding: 0.7rem 1.5rem; }
.nav-links-desktop { display: none; }
.nav-toggle { display: flex; }
}
/* Bands */
.band { padding: 112px 0; position: relative; overflow: hidden; }
.band.light { background: var(--paper); color: var(--ink); }
.band.alt { background: var(--paper-2); }
.band.dark { background: var(--navy); color: var(--cream); }
.band.dark h1, .band.dark h2, .band.dark h3 { color: #fff; }
.section-intro { max-width: 40em; margin-top: -0.1em; color: var(--ink-soft); }
.band.dark .section-intro { color: var(--cream-soft); }
/* Hero — text on paper, centered vertically */
.hero { background: var(--paper); position: relative; min-height: min(82vh, 760px); display: flex; align-items: center; padding: 150px 0 96px; }
.hero-wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { margin-bottom: 0.35em; }
.lead { font-size: 1.25rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 2.4em; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.actions.center { justify-content: center; }
.btn { .btn {
display: inline-block; background: var(--steel); color: #fff; display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 400;
font-family: Verdana, Geneva, sans-serif; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.13em;
padding: 14px 26px; border-radius: 4px; text-decoration: none; background: var(--accent); color: #fff; padding: 11px 22px; border-radius: 2px;
text-decoration: none; border: 1px solid var(--accent); transition: background-color .2s, border-color .2s;
} }
.btn:hover { background: var(--steel-deep); } .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.ghost { background: transparent; color: var(--steel); border: 1px solid var(--steel); } .btn.link {
.btn.ghost:hover { background: #eef3f6; } background: transparent; color: var(--gray); border: none; border-radius: 0;
padding: 0 0 2px; font-size: 0.78rem; letter-spacing: 0.08em; border-bottom: 1px solid var(--gray-line);
}
.btn.link:hover { background: transparent; color: var(--ink); }
.call { font-family: 'DM Sans', sans-serif; font-size: 0.84rem; color: var(--ink-soft); margin: 24px 0 0; }
.call a.tel { color: var(--accent-deep); white-space: nowrap; border-bottom: 1px solid currentColor; }
/* Sections */ /* Navy statement band */
section { padding: 70px 0; } .statement .motif {
section:nth-of-type(even) { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } position: absolute; left: -180px; top: -120px; width: 620px; height: 620px; border-radius: 50%;
.section-intro { color: var(--ink-soft); max-width: 46em; margin-top: 0; } background: var(--navy-2); pointer-events: none;
}
.statement .wrap { position: relative; }
.statement-line { font-size: 2.7rem; line-height: 1.25; max-width: 17em; color: var(--cream-soft) !important; }
.statement-line em { color: #fff; font-style: normal; }
.statement p { color: var(--cream-soft); max-width: 38em; }
.statement .emph { color: #fff; }
.pull { /* Light band body + bridge link */
font-size: 1.35rem; font-style: italic; color: var(--steel-deep); .band.light p { color: var(--ink-soft); }
border-left: 4px solid var(--amber); padding-left: 20px; margin-top: 1.6em; .bridge-link { margin-top: 1.8em; }
} .bridge-link a { color: var(--accent-deep); text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
/* Principles */ /* OC handoff callout — the earned single bridge */
.grid.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } .handoff { border-left: 2px solid var(--accent); background: var(--paper-2); padding: 26px 30px; margin: 8px 0 0; max-width: 46em; }
.card { .handoff p { margin: 0; color: var(--ink-soft); }
background: var(--panel); border: 1px solid var(--line); border-radius: 6px; .handoff a { color: var(--accent-deep); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 1px solid currentColor; }
padding: 24px;
}
.card h3 { font-size: 1.05rem; color: var(--steel-deep); }
.card p { font-size: 0.95rem; margin: 0; color: var(--ink-soft); }
/* Services */ /* Cards (principles = 4, the work = 3 with a feature) */
.service { border-top: 1px solid var(--line); padding: 30px 0; max-width: 56em; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 48px 0 0; background: var(--line); border: 1px solid var(--line); }
.service:first-of-type { border-top: 0; } .cards.four { grid-template-columns: repeat(4, 1fr); }
.service h3 { font-size: 1.3rem; } .card { background: var(--paper); padding: 34px 30px; }
.service .tag { .card.feature { background: var(--navy); }
font-family: Verdana, Geneva, sans-serif; font-size: 0.68rem; vertical-align: middle; .card.feature h3 { color: #fff; }
text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); .card.feature p { color: var(--cream-soft); }
border: 1px solid var(--amber); border-radius: 3px; padding: 3px 8px; margin-left: 10px; .card.feature .card-tag { color: #fff; }
} .card.feature .outcome { color: #fff; }
.service.flagship { .card-tag { font-family: 'DM Sans', sans-serif; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-deep); font-weight: 400; margin: 0 0 16px; }
background: #f4efe6; border: 1px solid #e0d5bf; border-radius: 8px; .card h3 { margin-bottom: 0.5em; }
padding: 30px; margin-top: 10px; .card p { font-size: 0.94rem; color: var(--ink-soft); }
} .card .step-k { font-family: 'DM Sans', sans-serif; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); display: block; margin: 0 0 14px; }
.service .note { font-size: 0.95rem; color: var(--ink-soft); font-style: italic; } .card.feature .step-k { color: #7fb0cf; }
.service-cta { font-family: Verdana, Geneva, sans-serif; font-size: 0.92rem; margin-top: 1.2em; } .card .outcome { color: var(--ink); font-style: italic; margin-bottom: 0; margin-top: 1.1em; font-size: 0.95rem; }
.service-cta a { font-weight: bold; } .card .card-link { display: inline-block; margin-top: 1.1em; color: var(--accent-deep); text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid currentColor; }
.reassure { margin-top: 34px; font-style: italic; color: var(--ink-soft); } .reassure { margin-top: 40px; font-style: italic; color: var(--ink-soft); }
/* Case studies */ /* Client results — before/after + quote */
.case { max-width: 56em; padding: 26px 0; border-top: 1px solid var(--line); } .cases { margin: 48px 0 0; }
.case:first-of-type { border-top: 0; } .case { padding: 44px 0; border-top: 1px solid var(--line); }
blockquote { .case:first-child { border-top: 0; padding-top: 8px; }
margin: 1.2em 0 0; padding: 18px 24px; background: var(--paper); .case h3 { margin-bottom: 0.6em; }
border-left: 4px solid var(--steel); border-radius: 0 6px 6px 0; .case > p { color: var(--ink-soft); max-width: 46em; }
} .case-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 6px; }
blockquote p { margin: 0; font-style: italic; color: var(--ink-soft); } .case-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.case-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 4px; } .case-shot-label { font-family: 'DM Sans', sans-serif; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.case-shot { margin: 0; display: flex; flex-direction: column; gap: 8px; } .case-shot-frame { border: 1px solid var(--line); overflow: hidden; background: #fff; height: 300px; }
.case-shot-label { font-family: Verdana, Geneva, sans-serif; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-deep); font-weight: bold; }
.case-shot-frame { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); height: 300px; }
.case-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .case-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.case-cite { display: flex; align-items: center; gap: 12px; margin-top: 16px; } blockquote { margin: 24px 0 0; padding: 0 0 0 28px; border-left: 2px solid var(--accent); }
.case-headshot { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); background: var(--paper); } blockquote p { margin: 0 0 1em; font-style: italic; color: var(--ink); font-size: 1.05rem; }
.case-cite { display: flex; align-items: center; gap: 14px; }
.case-headshot { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); background: var(--paper); }
.case-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .case-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.case-cite-text { display: flex; flex-direction: column; line-height: 1.3; } .case-cite-text { display: flex; flex-direction: column; line-height: 1.35; }
.case-name { font-family: Verdana, Geneva, sans-serif; font-size: 0.86rem; font-weight: bold; color: var(--ink); } .case-name { font-family: 'DM Sans', sans-serif; font-size: 0.84rem; font-weight: 500; color: var(--ink); }
.case-role { font-family: Verdana, Geneva, sans-serif; font-size: 0.76rem; color: var(--ink-soft); } .case-role { font-family: 'DM Sans', sans-serif; font-size: 0.74rem; color: var(--ink-soft); }
@media (max-width: 640px) { @media (max-width: 640px) {
.case-shots { grid-template-columns: 1fr; gap: 16px; } .case-shots { grid-template-columns: 1fr; gap: 16px; }
.case-shot-frame { height: 210px; } .case-shot-frame { height: 210px; }
} }
/* Process */ /* Process — numbered steps */
.steps { list-style: none; counter-reset: step; margin: 36px 0 0; padding: 0; } .steps { list-style: none; counter-reset: step; margin: 44px 0 0; padding: 0; }
.steps li { .steps li { counter-increment: step; position: relative; padding: 0 0 36px 74px; }
counter-increment: step; position: relative;
padding: 0 0 34px 70px;
}
.steps li::before { .steps li::before {
content: counter(step); content: counter(step); position: absolute; left: 0; top: -4px;
position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%;
width: 46px; height: 46px; border-radius: 50%; background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
background: var(--steel); color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1.1rem;
font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 1.1rem;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
.steps li:not(:last-child)::after { .steps li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 1px; background: var(--line); }
content: ""; position: absolute; left: 22px; top: 50px; bottom: 6px; .steps h3 { margin: 0 0 0.4em; }
width: 2px; background: var(--line);
}
.steps p { color: var(--ink-soft); margin: 0; } .steps p { color: var(--ink-soft); margin: 0; }
/* About */ /* About */
.about-name { .about-name { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-deep); margin: 0 0 1.4em; }
font-family: Verdana, Geneva, sans-serif; font-size: 0.85rem;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber);
}
/* Fit */ /* Honest about fit */
.notfor { list-style: none; margin: 30px 0; padding: 0; } .notfor { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line); }
.notfor li { .notfor li { padding: 22px 0 22px 38px; position: relative; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
padding: 16px 0 16px 34px; position: relative; color: var(--ink-soft); .notfor li::before { content: "✕"; position: absolute; left: 6px; top: 22px; color: var(--accent); font-family: 'DM Sans', sans-serif; }
border-top: 1px solid var(--line);
}
.notfor li::before { content: "✕"; position: absolute; left: 4px; color: var(--amber); font-weight: bold; }
.notfor strong { color: var(--ink); } .notfor strong { color: var(--ink); }
.notfor a { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
/* Contact */ /* Contact */
.contact { text-align: center; } .contact { text-align: center; }
.contact .eyebrow { justify-content: center; }
.contact .section-intro, .contact p { margin-left: auto; margin-right: auto; } .contact .section-intro, .contact p { margin-left: auto; margin-right: auto; }
.contact-action { margin: 2em 0 0.8em; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .contact h2 { max-width: 15em; margin-left: auto; margin-right: auto; }
.contact-promise { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; } .contact p:not(.actions) { max-width: 34em; color: var(--ink-soft); }
.actions.center { margin: 2.2em 0 0.8em; }
.promise { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
/* Footer */ /* Footer — open watermark dictates height; content overlaid */
.site-footer { .site-footer { border-top: 1.5px solid rgba(15, 23, 41, 0.1); background: #0f1729; position: relative; }
background: var(--ink); color: #b9bfc6; .footer-bg { width: 100%; display: block; pointer-events: none; }
padding: 50px 0; text-align: center; .footer-bg-img { width: 100%; height: auto; display: block; }
font-family: Verdana, Geneva, sans-serif; font-size: 0.82rem; .footer-bg-img path { fill: #1a2332; }
.footer-content { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1.5rem 2rem; }
.footer-block { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; }
.footer-wordmark span { color: var(--accent); }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f7f4ef; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--accent); }
.footer-note { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.5rem; color: #f7f4ef99; letter-spacing: 0.03em; line-height: 1.5; margin: 0; }
.footer-copy { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.5rem; color: #f7f4ef66; letter-spacing: 0.03em; line-height: 1.4; margin: 0; }
@media (max-width: 900px) {
.footer-content { padding: 1rem 1.25rem; }
.footer-bg-img { overflow: visible; }
.footer-wordmark { font-size: 1.1rem; }
} }
.site-footer p { margin: 6px 0; } @media (max-width: 600px) {
.footer-brand { font-family: Georgia, serif; font-size: 1.3rem; color: #fff; margin-bottom: 14px !important; } .footer-content { align-items: center; justify-content: flex-start; padding: 0 1.5rem; }
.footer-brand span { color: var(--amber); } .footer-block { align-items: flex-start; transform: scale(0.8); transform-origin: left center; }
.footer-legal { margin-top: 18px !important; color: #8a929b; } }
/* Focus */
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* Responsive */ /* Responsive */
@media (max-width: 900px) { @media (max-width: 860px) {
.grid.four { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 2.7rem; }
.hero h1 { font-size: 2.1rem; } h2 { font-size: 2rem; }
.site-nav { display: none; } .statement-line { font-size: 2rem; }
.nav-toggle { display: flex; } .cards, .cards.four { grid-template-columns: 1fr; }
.hero { padding: 128px 0 80px; min-height: 0; }
.band { padding: 80px 0; }
.case-shots { gap: 16px; }
} }
@media (max-width: 640px) { @media (max-width: 600px) {
body { font-size: 17px; } .wrap { padding: 0 22px; }
.grid.four { grid-template-columns: 1fr; }
.hero { padding: 56px 0 44px; }
section { padding: 48px 0; }
} }
/* ── Lead form: low-friction 3-step ─────────────────────────────────────── */ /* ── Lead form: low-friction 3-step ─────────────────────────────────────── */
.lf { max-width: 30rem; margin: 2rem auto 1.4rem; text-align: left; } .lf { max-width: 30rem; margin: 2.2rem auto 1.6rem; text-align: left; }
.lf-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 1.6rem; } .lf-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 1.7rem; }
.lf-dot { width: 30px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color 0.3s ease; } .lf-dot { width: 30px; height: 4px; border-radius: 2px; background: rgba(15, 23, 41, 0.12); transition: background-color 0.3s ease; }
.lf-dot.is-active { background: var(--steel); } .lf-dot.is-active { background: var(--accent); }
.lf-step { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; } .lf-step { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.lf-step.is-active { display: block; animation: lfIn 0.25s ease; } .lf-step.is-active { display: block; animation: lfIn 0.25s ease; }
@keyframes lfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes lfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lf-q { font-family: Georgia, serif; font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--ink); margin: 0 0 1rem; padding: 0; } .lf-q { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin: 0 0 1.1rem; padding: 0; }
.lf-opt { font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem; color: var(--ink-soft); font-weight: normal; } .lf-opt { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
.lf-choices { display: flex; flex-direction: column; gap: 10px; } .lf-choices { display: flex; flex-direction: column; gap: 10px; }
.lf-choice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 6px; font-family: Georgia, serif; font-size: 0.98rem; color: var(--ink); background: var(--panel); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .lf-choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; font-family: 'Lora', Georgia, serif; font-size: 0.98rem; color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.lf-choice:hover { border-color: var(--steel); } .lf-choice:hover { border-color: var(--accent); }
.lf-choice input { accent-color: var(--steel); width: 16px; height: 16px; flex: none; } .lf-choice input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.lf-choice:has(input:checked) { border-color: var(--steel); background: rgba(44, 93, 124, 0.06); } .lf-choice:has(input:checked) { border-color: var(--accent); background: rgba(44, 93, 124, 0.06); }
.lf-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font-family: Georgia, serif; font-size: 1rem; color: var(--ink); background: var(--panel); margin-bottom: 12px; } .lf-input { width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px; font-family: 'Lora', Georgia, serif; font-size: 1rem; color: var(--ink); background: #fff; margin-bottom: 12px; }
.lf-input:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(44, 93, 124, 0.12); } .lf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44, 93, 124, 0.12); }
.lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-nav { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 1.2rem; } .lf-nav { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 1.3rem; }
.lf-nav .lf-back { margin-right: auto; } .lf-nav .lf-back { margin-right: auto; }
.lf-done-msg { font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.6; color: var(--ink); text-align: center; padding: 1.4rem 0; margin: 0; } .lf-done-msg { font-family: 'Lora', Georgia, serif; font-size: 1.12rem; line-height: 1.6; color: var(--ink); text-align: center; padding: 1.6rem 0; margin: 0; }
.lf-err { font-family: Verdana, Geneva, sans-serif; font-size: 0.85rem; color: #b4452f; margin: 1rem 0 0; } .lf-err { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: #b4452f; margin: 1rem 0 0; }
.lf-err a { color: #b4452f; } .lf-err a { color: #b4452f; }
.lf-alt { font-family: Verdana, Geneva, sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 0.4rem 0 0.7rem; } .lf-alt { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 0.5rem 0 0.8rem; }
/* ── Motion — progressive enhancement (gated on html.has-motion) ─────────── */
.has-motion .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.has-motion .reveal.in { opacity: 1; transform: none; }
.has-motion .stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.has-motion .stagger.in > * { opacity: 1; transform: none; }
.has-motion .stagger.in > *:nth-child(2) { transition-delay: .1s; }
.has-motion .stagger.in > *:nth-child(3) { transition-delay: .2s; }
.has-motion .stagger.in > *:nth-child(4) { transition-delay: .3s; }
.bridge-link a, .handoff a, .notfor a, .card .card-link, .call a.tel {
background-image: linear-gradient(var(--accent-deep), var(--accent-deep));
background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat;
border-bottom: 0 !important;
transition: background-size .3s ease, color .2s ease;
}
.bridge-link a:hover, .handoff a:hover, .notfor a:hover, .card .card-link:hover, .call a.tel:hover { background-size: 100% 1.5px; }
/* Open-o divider — a quiet brand beat right before the ask */
.o-divider { text-align: center; margin: 18px 0; line-height: 0; }
.o-divider svg { width: 34px; height: 34px; overflow: visible; }
.o-divider path { fill: var(--accent); }
.has-motion .o-divider { opacity: 0; transform: scale(.55) rotate(-12deg); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.85,.25,1); }
.has-motion .o-divider.in { opacity: 1; transform: none; }
/* Persistent CTA — returns after the hero scrolls off, steps aside at contact */
.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 80; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.float-cta .btn { box-shadow: 0 6px 22px rgba(15, 23, 41, 0.18); }
@media (prefers-reduced-motion: reduce) {
.has-motion .reveal, .has-motion .stagger > * { opacity: 1; transform: none; }
.has-motion .o-divider { opacity: 1; transform: none; }
.float-cta { transition: none; }
}
@media (max-width: 600px) {
.float-cta { left: 0; right: 0; bottom: 0; background: #0f1729;
padding: 13px 14px calc(13px + env(safe-area-inset-bottom, 0px));
border-radius: 16px 16px 0 0; box-shadow: 0 -8px 26px rgba(15, 23, 41, 0.16); }
.float-cta .btn { display: block; text-align: center; }
}