Inga: serif type system + refined scale, frosted nav, counting stats, card lift, contrast fix

- Typography: switch to a serif system — Playfair Display titles + Lora body
  (matches the OC family), DM Sans kept only for micro-labels/nav/buttons. Rebuilt
  the type scale so titles read clearly above body (the sans grotesque + tight
  hierarchy read amateurish).
- Nav: frosted-glass like OC — transparent at top, blurs in on scroll.
- Proof numbers count up from 0 when scrolled into view (reduced-motion safe).
- Content cards (service/principle/quote) lift subtly on hover.
- Fix low-contrast body text in the dark "In practice" band: the practice
  paragraphs were charcoal on ink (~1.3:1) — now light paper (~11:1).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -8,7 +8,7 @@
 <meta name="description" content="Leadership and team development for organizations doing meaningful work in an unpredictable world. Systems-aware, trauma-informed coaching and facilitation that builds the capacity to perform and relate well — even when the path isn't clear.">
 <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=Inter:wght@400;500;600;700;800;900&family=Lora:ital@0;1&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&display=swap">
 <link rel="stylesheet" href="style.css">
 <link rel="icon" href="favicon.svg" type="image/svg+xml">
 <meta property="og:type" content="website">
@@ -194,9 +194,9 @@
       <p class="eyebrow">In practice</p>
       <h2>A decade of work alongside teams under pressure.</h2>
       <div class="stats">
-        <div class="stat"><div class="num">100<span>+</span></div><div class="lab">Workshops</div></div>
-        <div class="stat"><div class="num">850<span>+</span></div><div class="lab">Coaching sessions</div></div>
-        <div class="stat"><div class="num">25<span>+</span></div><div class="lab">Team engagements</div></div>
+        <div class="stat"><div class="num"><span data-count="100">100</span><span class="plus">+</span></div><div class="lab">Workshops</div></div>
+        <div class="stat"><div class="num"><span data-count="850">850</span><span class="plus">+</span></div><div class="lab">Coaching sessions</div></div>
+        <div class="stat"><div class="num"><span data-count="25">25</span><span class="plus">+</span></div><div class="lab">Team engagements</div></div>
       </div>
 
       <div class="practice">
@@ -314,6 +314,33 @@
   } else {
     nodes.forEach(function (n) { n.classList.add('in'); });
   }
+
+  // frosted-glass nav: transparent at top, blurs in on scroll
+  var nav = document.getElementById('nav');
+  if (nav) {
+    var onScroll = function () { nav.classList.toggle('scrolled', window.scrollY > 16); };
+    onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
+  }
+
+  // count the proof numbers up when they scroll into view
+  var counters = [].slice.call(document.querySelectorAll('[data-count]'));
+  if (counters.length && !rm && 'IntersectionObserver' in window) {
+    counters.forEach(function (c) { c.textContent = '0'; });
+    var run = function (el) {
+      var to = parseInt(el.getAttribute('data-count'), 10), dur = 1500, t0 = null;
+      var tick = function (ts) {
+        if (!t0) t0 = ts;
+        var p = Math.min((ts - t0) / dur, 1), e = 1 - Math.pow(1 - p, 3);
+        el.textContent = Math.round(e * to);
+        if (p < 1) requestAnimationFrame(tick);
+      };
+      requestAnimationFrame(tick);
+    };
+    var nio = new IntersectionObserver(function (es) {
+      es.forEach(function (e) { if (e.isIntersecting) { run(e.target); nio.unobserve(e.target); } });
+    }, { threshold: 0.5 });
+    counters.forEach(function (c) { nio.observe(c); });
+  }
 })();
 </script>