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"><span data-count="100">100</span><span class="plus">+</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"><span data-count="850">850</span><span class="plus">+</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="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>
 

style.css

@@ -13,8 +13,9 @@
   --accent-soft: #e7eef1;     /* tint for panels */
   --accent-ink: #356b7b;      /* accessible dusty-blue for links/text on light */
   --accent-deep: #2b5563;     /* hover */
-  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  --sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;   /* micro UI only: eyebrows, nav, labels, buttons */
-  --serif: 'Lora', Georgia, 'Times New Roman', serif;
+  --serif: 'Lora', Georgia, 'Times New Roman', serif;                          /* body prose + h3 */
+  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;            /* titles */
   --wrap: 1140px;
   --gap: clamp(1.25rem, 4vw, 2.5rem);
 }
@@ -25,19 +26,23 @@ html { scroll-behavior: smooth; }
 
 body {
   margin: 0;
-  font-family: var(--sans);
+  font-family: var(--serif);
-  font-size: clamp(1.02rem, 0.55vw + 0.9rem, 1.14rem);
+  font-size: clamp(1.06rem, 0.4vw + 0.96rem, 1.2rem);
-  line-height: 1.7;
+  line-height: 1.72;
   color: var(--ink);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin: 0 0 .5em; }
+h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.07; color: var(--ink); margin: 0 0 .4em; }
-h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
+h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; line-height: 1.28; color: var(--ink); margin: 0 0 .5em; }
-h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
+h1 { font-size: clamp(2.7rem, 5.4vw, 4.4rem); line-height: 1.04; }
-h3 { font-size: clamp(1.18rem, 1.4vw, 1.4rem); letter-spacing: -0.01em; }
+h2 { font-size: clamp(2.05rem, 3.7vw, 3rem); }
+h3 { font-size: clamp(1.34rem, 1.5vw, 1.62rem); }
+/* micro UI stays sans for crispness; big stat numbers use the display serif */
+.eyebrow, .hero-creds, .nav-links a, .nav-mobile a, .card .when, .card .lab, .stat .lab, .contact-box .placeholder { font-family: var(--sans); }
+.stat .num { font-family: var(--display); }
 p { margin: 0 0 1.1rem; }
 a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
 a:hover { color: var(--accent-deep); }
@@ -75,8 +80,13 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; }
 
 /* ---- nav ---- */
 .nav {
-  position: sticky; top: 0; z-index: 50; background: rgba(246,245,242,.86);
+  position: sticky; top: 0; z-index: 50; background: transparent;
-  backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
+}
+.nav.scrolled {
+  background: rgba(246,245,242,.72); -webkit-backdrop-filter: saturate(140%) blur(14px);
+  backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line);
+  box-shadow: 0 4px 24px rgba(35,31,32,.05);
 }
 .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }
 .nav-logo { display: inline-flex; align-items: center; }
@@ -163,7 +173,7 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; }
 /* ---- proof / stats ---- */
 .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2.6rem; text-align: center; }
 .stat .num { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
-.stat .num span { color: var(--accent); }
+.stat .num .plus { color: var(--accent); }
 .stat .lab { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(246,245,242,.7); margin-top: .5rem; }
 .quotes { display: grid; gap: 1.2rem; }
 @media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } }
@@ -176,7 +186,7 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; }
 @media (min-width: 820px) { .practice { grid-template-columns: 1fr 1fr; } }
 .practice .item { border-left: 3px solid var(--accent); padding-left: 1.3rem; }
 .practice .item h3 { margin-bottom: .4rem; }
-.practice .item p { color: var(--charcoal); font-size: .98rem; }
+.practice .item p { color: rgba(246,245,242,.85); font-size: .98rem; }
 
 /* ---- principles ---- */
 .principles { display: grid; gap: 1.1rem; margin-top: 2rem; }
@@ -196,6 +206,16 @@ section { padding-block: clamp(3.4rem, 7vw, 6rem); scroll-margin-top: 86px; }
 .site-footer nav a:hover { color: var(--accent); }
 .site-footer .fine { font-size: .82rem; color: rgba(246,245,242,.55); max-width: 60ch; }
 
+/* ---- subtle interaction: lift the content cards to draw the eye (desktop affordance) ---- */
+.card, .principle { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
+.card:hover, .principle:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(35,31,32,.10); border-color: var(--accent); }
+.quote { transition: transform .25s ease, border-color .25s ease, background .25s ease; }
+.quote:hover { transform: translateY(-3px); border-color: rgba(157,189,199,.5); background: rgba(255,255,255,.09); }
+@media (prefers-reduced-motion: reduce) {
+  .card, .principle, .quote { transition: none; }
+  .card:hover, .principle:hover, .quote:hover { transform: none; }
+}
+
 /* ---- motion: subtle reveal on scroll (gated; hero never animates; CLS-safe) ---- */
 .has-motion main section:not(.hero) > .wrap {
   opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease;