Merge option 2 homepage and visual language into the site

Rebuild the homepage on option 2's sections and effects (3D DNA, spinning
cube, giant words, fireworks journey, neon type, chrome ribbon) with copy
kept verbatim from the content document. Each venture now has its own 3D
object, the portfolio dashboard sits beside the DNA, the journey uses the
original stats row and the playbook keeps our book. Inner pages adopt the
same navy, glass and gradient skin, with dark as the default theme.

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

src/pages/home.mjs

@@ -1,109 +1,181 @@
 import { icon, eyebrow, btn, textLink, mark } from '../layout.mjs';
 
 const ventures = [
-  ['search', 'MARKETING & AI SEARCH', 'Leading teams through a constantly changing search landscape.'],
-  ['chip', 'AI SOFTWARE', 'Building around new opportunities created by AI.'],
-  ['bottle', 'SPIRITS', 'Taking a consumer brand from idea to market.'],
-  ['edu', 'EDUCATION TECHNOLOGY', 'Creating technology designed for real classrooms.'],
-  ['shield', 'CYBERSECURITY', 'Solving security challenges for growing businesses.'],
-  ['bag', 'E-COMMERCE', 'Turning product ideas into businesses built around real customers.'],
+  ['search', 'MARKETING & AI SEARCH'],
+  ['chip', 'AI SOFTWARE'],
+  ['bottle', 'SPIRITS'],
+  ['edu', 'EDUCATION TECHNOLOGY'],
+  ['shield', 'CYBERSECURITY'],
+  ['bag', 'E-COMMERCE'],
 ];
 
 const exits = [
-  ['umbrella', 'Insurance', 'I grew an insurance business around strong client relationships, a clear understanding of the market, and service people could trust.'],
-  ['megaphone', 'Marketing', 'Led an agency focused on helping businesses reach the right audiences, strengthen their presence, and turn attention into growth.'],
-  ['heart', 'Home Healthcare', 'Grew a people-first business in an industry where trust, quality of care, and responsible leadership mattered every day.'],
-  ['shirt', 'Apparel', 'Took a consumer concept into the market, shaping the product, brand, and customer experience from the ground up.'],
+  ['Insurance', 'I grew an insurance business around strong client relationships, a clear understanding of the market, and service people could trust.', '<path d="M24 5 8 11v11c0 10 7 17 16 21 9-4 16-11 16-21V11z"/><path d="m17 24 5 5 9-10"/>'],
+  ['Marketing', 'Led an agency focused on helping businesses reach the right audiences, strengthen their presence, and turn attention into growth.', '<path d="M8 20v8h6l14 8V12l-14 8z"/><path d="M34 18c3 2 3 10 0 12M14 28l2 9h5l-2-9"/>'],
+  ['Home Healthcare', 'Grew a people-first business in an industry where trust, quality of care, and responsible leadership mattered every day.', '<path d="M6 22 24 7l18 15M10 20v21h28V20"/><path d="M24 35c-6-4-8-7-8-10a4.2 4.2 0 0 1 8-1.5A4.2 4.2 0 0 1 32 25c0 3-2 6-8 10z"/>'],
+  ['Apparel', 'Took a consumer concept into the market, shaping the product, brand, and customer experience from the ground up.', '<path d="M17 6 6 12l4 9 5-2v23h18V19l5 2 4-9-11-6c-1 3-4 5-7 5s-6-2-7-5z"/>'],
+];
+
+const consult = [
+  ['<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/>', 'We look closely at the business', ''],
+  ['<path d="M4 5h16v11H9l-5 4z"/>', 'Talk through what is getting in the way', ''],
+  ['<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>', 'Figure out where your attention can make the biggest difference', ''],
+  ['<path d="M12 3 4 6v6c0 4.5 3.4 7.6 8 9 4.6-1.4 8-4.5 8-9V6z"/><path d="m8.5 12 2.5 2.5 4.5-5"/>', 'Every engagement starts with a diagnostic.', 'Not because I already know the answer, but because your business deserves one that actually fits.'],
 ];
 
 const ventureRows = ventures
-  .map(([ic, name]) => `<div class="row"><span class="ico">${icon(ic)}</span><span class="name">${name.replace('&amp;', '&amp;')}</span><span class="status"><span class="dot"></span>Active</span></div>`)
+  .map(([ic, name]) => `<div class="row"><span class="ico">${icon(ic)}</span><span class="name">${name}</span><span class="status"><span class="dot"></span>Active</span></div>`)
   .join('');
 const exitRows = exits
-  .map(([, name]) => `<div class="row">${icon('check', 'check')}<span class="name">${name}</span><span class="status">Exited</span></div>`)
+  .map(([name]) => `<div class="row">${icon('check', 'check')}<span class="name">${name}</span><span class="status">Exited</span></div>`)
   .join('');
+const exitWords = ['Insurance.', 'Marketing.', 'Home&nbsp;Healthcare.', 'Apparel.'];
+const arrowUR = '<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10 10 4M5 4h5v5"/></svg>';
 
 export default {
   path: '/',
   title: 'Dylan Mazzei | Founder, Operator &amp; Entrepreneur',
   description: 'Meet Dylan Mazzei, a founder and operator leading ventures across AI, software, spirits, education, cybersecurity, e-commerce, and more.',
+  head: '<link rel="stylesheet" href="/assets/home.css">',
+  scripts: '<script src="/assets/o2/three.min.js" defer></script>\n<script src="/assets/o2/dna-hero.min.js" defer></script>\n<script src="/assets/home.js" defer></script>',
   body: `
-<section class="hero" aria-labelledby="hero-title">
-  <div class="wrap">
-    <div class="hero-copy anim">
-      <span class="tag tag-upper tag-white" style="border:1px solid var(--mist)"><span class="dot"></span>DYLAN MAZZEI | FOUNDER &amp; OPERATOR</span>
-      <h1 id="hero-title" class="h-display-lg">One Good Idea Has Never Been Enough for Me.</h1>
-      <p class="lead">I’ve spent the last eight years turning ideas into companies across marketing, AI, software, spirits, education, cybersecurity, e-commerce, and more. Four have been sold. Others are growing. And I’m nowhere near finished building.</p>
-      <div class="btn-row">${btn('MY STORY', '/about/')}</div>
-    </div>
+<div class="o2">
 
-    <div class="cluster" aria-hidden="true">
-      <div class="panel dash">
-        <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span>Portfolio</span><span class="panel-url">dylanmazzei.com/portfolio</span></div>
-        <div class="dash-body">
-          <div class="dash-head"><div><small>CURRENT VENTURES</small><strong>The Companies I’m Leading Today</strong></div></div>
-          <div class="kpis">
-            <div class="kpi"><span>EXITS</span><b>4</b></div>
-            <div class="kpi"><span>INDUSTRIES</span><b>6</b></div>
-            <div class="kpi"><span>YEARS OPERATING</span><b>8+</b></div>
-            <div class="kpi"><span>WHERE I WORK</span><b>4</b></div>
-          </div>
-          <div class="dash-cols">
-            <div class="list"><div class="list-head"><span>CURRENT VENTURES</span><span></span></div>${ventureRows}</div>
-            <div class="list"><div class="list-head"><span>4 EXITS</span><span></span></div>${exitRows}</div>
-          </div>
-        </div>
+<section id="hero" aria-labelledby="hero-title">
+  <div class="beam" aria-hidden="true"></div>
+  <div class="floaters" id="floaters" aria-hidden="true"></div>
+  <div class="hero-in">
+    <div class="emblem" id="emblem"><img alt="Dylan Mazzei monogram" src="/assets/o2/dylan-monogram.webp" width="720" height="480"></div>
+    ${eyebrow('DYLAN MAZZEI | FOUNDER &amp; OPERATOR')}
+    <h1 id="hero-title"><span class="grad">One Good Idea Has Never</span> <span class="grad2">Been Enough for Me.</span></h1>
+    <p class="lead">I’ve spent the last eight years turning ideas into companies across marketing, AI, software, spirits, education, cybersecurity, e-commerce, and more. Four have been sold. Others are growing. And I’m nowhere near finished building.</p>
+    <div class="btn-row">${btn('MY STORY', '/about/')}${btn('EXPLORE MY VENTURES', '#ventures', 'ghost')}</div>
+    <div class="icon-row" id="iconRow" aria-hidden="true"></div>
+  </div>
+  <div class="scroll-note" aria-hidden="true"><i></i></div>
+</section>
+
+<section class="wsec" id="words" aria-label="Four exits">
+  <div class="wsec-in">
+    <div class="cube-glow" aria-hidden="true"></div>
+    <div class="cube" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="w-top">${eyebrow('4 EXITS')}</div>
+    <div class="wmask" aria-hidden="true"><div id="wTrack">${[...exitWords, ...exitWords].map((w) => `<span>${w}</span>`).join('')}</div></div>
+    <p class="sr-only">Insurance. Marketing. Home Healthcare. Apparel.</p>
+    <div class="w-side"><p>Four have been sold. Others are growing. And I’m nowhere near finished building.</p>${btn('FOLLOW THE JOURNEY', '#journey', 'ghost', 'btn-sm')}</div>
+  </div>
+</section>
+
+<section id="building" aria-labelledby="building-title">
+  <div class="wrap">
+    <div class="bhead reveal">
+      <div class="stack-sm">${eyebrow('CURRENT VENTURES')}<h2 id="building-title" class="h-display">The Companies I’m Leading Today</h2></div>
+      <div class="stack-sm">
+        <p class="lead">I like being close to the decisions that shape a company, especially when there is something new to figure out.</p>
+        <div>${btn('EXPLORE MY VENTURES', '/portfolio/')}</div>
       </div>
-      <div class="panel profile">
-        <img src="/assets/dylan-portrait.jpg" alt="" width="900" height="900">
-        <div class="profile-meta">
-          <strong>Dylan Mazzei</strong>
-          <span class="prole">FOUNDER &amp; OPERATOR</span>
-          <div class="chips"><span class="tag">Texas</span><span class="tag">Florida</span><span class="tag">New York</span><span class="tag">Dubai</span></div>
-          <span class="btn btn-primary btn-sm btn-block">START A CONVERSATION</span>
-        </div>
+    </div>
+    <div class="bgrid">
+      <div class="bstack" id="bstack">
+        ${'<span class="r" aria-hidden="true">Still building</span>'.repeat(6)}
+        <div class="bglow" aria-hidden="true"></div>
+        <dna-hero id="dna" class="dna3d" transparent interactive duration="20" aria-label="3D chrome DNA helix. Drag to rotate."></dna-hero>
+        <img class="helix" id="dnaFallback" hidden alt="" src="/assets/o2/dna-fallback.webp">
       </div>
-      <div class="panel panel-dark code">
-        <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span class="file">${icon('brace')}dylan.json</span></div>
+      <div class="cluster-fit reveal">
+        <div class="cluster" aria-hidden="true">
+          <div class="panel dash">
+            <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span>Portfolio</span><span class="panel-url">dylanmazzei.com/portfolio</span></div>
+            <div class="dash-body">
+              <div class="dash-head"><div><small>CURRENT VENTURES</small><strong>The Companies I’m Leading Today</strong></div></div>
+              <div class="kpis">
+                <div class="kpi"><span>EXITS</span><b>4</b></div>
+                <div class="kpi"><span>INDUSTRIES</span><b>6</b></div>
+                <div class="kpi"><span>YEARS OPERATING</span><b>8+</b></div>
+                <div class="kpi"><span>WHERE I WORK</span><b>4</b></div>
+              </div>
+              <div class="dash-cols">
+                <div class="list"><div class="list-head"><span>CURRENT VENTURES</span><span></span></div>${ventureRows}</div>
+                <div class="list"><div class="list-head"><span>4 EXITS</span><span></span></div>${exitRows}</div>
+              </div>
+            </div>
+          </div>
+          <div class="panel profile">
+            <img src="/assets/dylan-portrait.jpg" alt="" width="900" height="900">
+            <div class="profile-meta">
+              <strong>Dylan Mazzei</strong>
+              <span class="prole">FOUNDER &amp; OPERATOR</span>
+              <div class="chips"><span class="tag">Texas</span><span class="tag">Florida</span><span class="tag">New York</span><span class="tag">Dubai</span></div>
+            </div>
+          </div>
+          <div class="panel panel-dark code">
+            <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span class="file">${icon('brace')}dylan.json</span></div>
 <pre class="code-pre"><span class="ln"><span class="p">{</span></span><span class="ln">  <span class="k">"role"</span><span class="p">:</span> <span class="s">"Founder &amp; Operator"</span><span class="p">,</span></span><span class="ln">  <span class="k">"exits"</span><span class="p">:</span> <span class="n">4</span><span class="p">,</span></span><span class="ln">  <span class="k">"industries"</span><span class="p">:</span> <span class="n">6</span><span class="p">,</span></span><span class="ln">  <span class="k">"yearsOperating"</span><span class="p">:</span> <span class="s">"8+"</span><span class="p">,</span></span><span class="ln">  <span class="k">"whereIWork"</span><span class="p">: [</span></span><span class="ln">    <span class="s">"Texas"</span><span class="p">,</span> <span class="s">"Florida"</span><span class="p">,</span></span><span class="ln">    <span class="s">"New York"</span><span class="p">,</span> <span class="s">"Dubai"</span></span><span class="ln">  <span class="p">],</span></span><span class="ln">  <span class="k">"finishedBuilding"</span><span class="p">:</span> <span class="n">false</span><span class="cursor"></span></span><span class="ln"><span class="p">}</span></span></pre>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </section>
 
-<section class="section" id="ventures" aria-labelledby="ventures-title">
+<section id="ventures" aria-labelledby="ventures-title">
   <div class="wrap">
-    <div class="sec-head reveal">
-      <div class="stack-sm">${eyebrow('CURRENT VENTURES')}<h2 id="ventures-title" class="h-display">The Companies I’m Leading Today</h2></div>
-      <div class="prose">
-        <p>I like being close to the decisions that shape a company, especially when there is something new to figure out.</p>
-        <p>Today, I lead businesses across AI, marketing, software, spirits, education technology, cybersecurity, and e-commerce. They operate in very different worlds, which keeps me curious.</p>
+    <div class="vhead reveal">
+      ${eyebrow('CURRENT VENTURES')}
+      <h2 id="ventures-title" class="sr-only">Current ventures</h2>
+      <p class="lead">Today, I lead businesses across AI, marketing, software, spirits, education technology, cybersecurity, and e-commerce. They operate in very different worlds, which keeps me curious.</p>
+    </div>
+    <ul class="sr-only">
+      <li>MARKETING &amp; AI SEARCH Leading teams through a constantly changing search landscape.</li>
+      <li>AI SOFTWARE Building around new opportunities created by AI.</li>
+      <li>SPIRITS Taking a consumer brand from idea to market.</li>
+      <li>EDUCATION TECHNOLOGY Creating technology designed for real classrooms.</li>
+      <li>CYBERSECURITY Solving security challenges for growing businesses.</li>
+      <li>E-COMMERCE Turning product ideas into businesses built around real customers.</li>
+    </ul>
+    <div class="vtabs reveal" id="vtabs" role="tablist" aria-label="Ventures"></div>
+    <div class="vpanel reveal" id="vpanel">
+      <div class="vinfo">
+        <div><span class="vnum" id="vnum">01 / 06</span></div>
+        <div class="vt" id="vt" aria-live="polite"><h3 id="vname">MARKETING &amp; AI SEARCH</h3><p id="vdesc">Leading teams through a constantly changing search landscape.</p></div>
+        <div class="btn-row">${btn('EXPLORE MY VENTURES', '/portfolio/', 'primary', 'btn-sm')}</div>
+      </div>
+      <canvas id="vcanvas" aria-hidden="true"></canvas>
+      <div class="varrows">
+        <button id="vprev" type="button" aria-label="Previous venture"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4 3 8l4 4"/></svg></button>
+        <button id="vnext" type="button" aria-label="Next venture"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg></button>
       </div>
     </div>
-    <div class="features reveal">
-      ${ventures.map(([ic, h, p]) => `<article class="feature"><span class="ic">${icon(ic)}</span><h3>${h}</h3><p>${p}</p></article>`).join('')}
-    </div>
-    <div class="sec-foot reveal" style="justify-content:flex-end">${btn('EXPLORE MY VENTURES', '/portfolio/')}</div>
   </div>
 </section>
 
-<section class="section" id="journey" aria-labelledby="journey-title">
+<section id="journey" aria-labelledby="journey-title">
   <div class="wrap">
-    <div class="sec-head reveal">
-      <div class="stack-sm">${eyebrow('THE JOURNEY SO FAR')}<h2 id="journey-title" class="h-display">Good Opportunities Rarely Look the Same.</h2></div>
-      <p class="body">I’ve never looked at opportunity through the lens of one industry. Over the years, that curiosity has taken me into very different businesses, including four that grew into successful exits.</p>
+    <div class="jgrid">
+      <div class="jhead reveal">
+        ${eyebrow('THE JOURNEY SO FAR')}
+        <h2 id="journey-title" class="h-display">Good Opportunities Rarely Look the Same.</h2>
+        <p class="lead">I’ve never looked at opportunity through the lens of one industry. Over the years, that curiosity has taken me into very different businesses, including four that grew into successful exits.</p>
+      </div>
+      <div class="jstage" id="jstage">
+        <div class="floor" aria-hidden="true"></div>
+        <div class="pins" aria-hidden="true">
+          ${['Insurance', 'Marketing', 'Home Healthcare', 'Apparel', 'Today'].map((p) => `<div class="pn"><i></i><b></b><em>${p}</em></div>`).join('')}
+        </div>
+        <canvas id="fw" aria-hidden="true"></canvas>
+        <p class="jfinal" id="jfinal">Others are growing. And I’m nowhere near finished building.</p>
+        <button class="btn btn-ghost-light btn-sm jreplay" id="jreplay" type="button">Replay</button>
+      </div>
+      <div class="jbody">
+        <ul class="jlist">
+          ${exits.map(([h, p, path]) => `<li class="jx"><div class="ji"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg></div><div><h3>${h}</h3><p>${p}</p></div></li>`).join('')}
+        </ul>
+      </div>
     </div>
-    <div class="cards cards-4 exits reveal">
-      ${exits
-        .map(
-          ([ic, h, p]) => `<article class="card exit"><div class="card-top"><span class="ic">${icon(ic)}</span><span class="tag tag-white">${icon('check', 'check')}Exit</span></div><h3 class="h-md">${h}</h3><p>${p}</p></article>`
-        )
-        .join('')}
-    </div>
-    <div class="stats reveal">
-      <div class="stat"><span>EXITS</span><b data-count="4">4</b></div>
-      <div class="stat"><span>INDUSTRIES</span><b data-count="6">6</b></div>
-      <div class="stat"><span>YEARS OPERATING</span><b data-count="8" data-suffix="+">8+</b></div>
+    <div class="stats">
+      <div class="stat"><span>EXITS</span><b id="cEx">4</b></div>
+      <div class="stat"><span>INDUSTRIES</span><b id="cInd">6</b></div>
+      <div class="stat"><span>YEARS OPERATING</span><b id="cYr">8+</b></div>
       <div class="stat stat-note">
         <p>Different businesses have called for different decisions, teams, and ways of thinking. That range still shapes how I approach every opportunity today.</p>
         ${textLink('FOLLOW THE JOURNEY', '/about/')}
@@ -112,116 +184,98 @@ export default {
   </div>
 </section>
 
-<section class="section" id="about" aria-labelledby="about-title">
+<section id="about" aria-labelledby="about-title">
+  <div class="wrap agrid">
+    <div class="stack">
+      ${eyebrow('ABOUT DYLAN')}
+      <h2 id="about-title" class="awords"><span class="grad">Curiosity</span><span class="grad">Got Me Started.</span><span class="neon">Ambition</span><span class="neon n2">Kept Me Moving.</span></h2>
+    </div>
+    <div class="atext reveal">
+      <p class="q">I have always been more interested in what could be possible than what already exists.</p>
+      <p class="lead">That curiosity has taken me into industries I never expected to enter, across markets, teams, and ideas that looked nothing alike from the outside. What connects them is the part I enjoy most: seeing potential early, bringing the right people around it, and giving an idea the chance to become something real.</p>
+      <p class="lead">Business is a big part of my story, but it is not the whole story.</p>
+      ${btn('GET TO KNOW DYLAN', '/about/')}
+    </div>
+  </div>
+</section>
+
+<section id="consult" aria-labelledby="consult-title">
   <div class="wrap">
-    <div class="showcase reveal">
-      <div class="stack">
-        ${eyebrow('ABOUT DYLAN')}
-        <h2 id="about-title" class="h-display">Curiosity Got Me Started. Ambition Kept Me Moving.</h2>
-        <p class="quote-line">I have always been more interested in what could be possible than what already exists.</p>
-        <div class="prose">
-          <p>That curiosity has taken me into industries I never expected to enter, across markets, teams, and ideas that looked nothing alike from the outside. What connects them is the part I enjoy most: seeing potential early, bringing the right people around it, and giving an idea the chance to become something real.</p>
-          <p>Business is a big part of my story, but it is not the whole story.</p>
-        </div>
-        <div class="btn-row">${btn('GET TO KNOW DYLAN', '/about/')}</div>
+    <div class="chead">
+      <div class="stack-sm reveal">${eyebrow('CONSULT DYLAN')}<h2 id="consult-title" class="h-display">Sometimes You Need Another Founder in the Room.</h2></div>
+      <div class="stack-sm reveal">
+        <p class="lead" style="color:var(--ink)">I know what it is like to make decisions when the answer isn't obvious, and the outcome belongs to you.</p>
+        <p class="lead">That is the perspective I bring when I work with founders. We look closely at the business, talk through what is getting in the way, and figure out where your attention can make the biggest difference.</p>
+        <div>${btn('WORK WITH DYLAN', '/consulting/')}</div>
       </div>
-      <div class="visual portrait">
-        <img src="/assets/dylan-portrait.jpg" alt="Dylan Mazzei" width="900" height="900" loading="lazy">
-        <div class="flow" aria-hidden="true">
-          <small>What connects them is the part I enjoy most:</small>
-          <ol><li>seeing potential early</li><li>bringing the right people around it</li><li>giving an idea the chance to become something real</li></ol>
-        </div>
+    </div>
+    <div class="cgrid">
+      ${consult.map(([path, h, p]) => `<article class="cc reveal"><div class="cic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg></div><h3>${h}</h3>${p ? `<p>${p}</p>` : ''}</article>`).join('')}
+    </div>
+  </div>
+</section>
+
+<section id="playbook" aria-labelledby="playbook-title">
+  <div class="pbword" id="pbword" aria-hidden="true">Playbook Playbook</div>
+  <div class="wrap pbgrid">
+    <div class="pbtext reveal">
+      ${eyebrow('FROM THE NOTEBOOK')}
+      <h2 id="playbook-title" class="h-display">Different Businesses. Different Beginnings. One Playbook.</h2>
+      <p class="lead">I’ve started enough businesses to know the beginning matters.</p>
+      <p class="lead">The early calls. The first customers. The moments when an idea has to become more than an idea.</p>
+      <p class="lead">The Business Launch Playbook puts my approach to those moments on the page, shaped by years of starting, operating, and growing businesses across very different industries.</p>
+    </div>
+    <div class="book-stage reveal">
+      <div class="book" id="book" role="img" aria-label="The Business Launch Playbook by Dylan Mazzei">
+        ${mark()}
+        <h3>The Business Launch Playbook</h3>
+        <div class="by">Dylan Mazzei</div>
+        <span class="sheen" aria-hidden="true"></span>
       </div>
     </div>
   </div>
 </section>
 
-<section class="section" id="consulting" aria-labelledby="consult-title">
+<section id="press" aria-labelledby="press-title">
   <div class="wrap">
-    <div class="showcase reverse reveal">
-      <div class="visual panel steps-panel" aria-hidden="true">
-        <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><strong>Diagnosis Before Prescription.</strong></div>
-        <ol>
-          <li class="sp-step"><span class="num">1</span><h4>Business Diagnostic</h4></li>
-          <li class="sp-step"><span class="num">2</span><h4>Roadmap Delivery</h4></li>
-          <li class="sp-step"><span class="num">3</span><h4>Execution Sprint or Advisory</h4></li>
-        </ol>
-      </div>
-      <div class="stack">
-        ${eyebrow('CONSULT DYLAN')}
-        <h2 id="consult-title" class="h-display">Sometimes You Need Another Founder in the Room.</h2>
-        <p class="quote-line">I know what it is like to make decisions when the answer isn't obvious, and the outcome belongs to you.</p>
-        <div class="prose">
-          <p>That is the perspective I bring when I work with founders. We look closely at the business, talk through what is getting in the way, and figure out where your attention can make the biggest difference.</p>
-          <p>Every engagement starts with a diagnostic. Not because I already know the answer, but because your business deserves one that actually fits.</p>
-        </div>
-        <div class="btn-row">${btn('WORK WITH DYLAN', '/consulting/')}</div>
+    <div class="phead">
+      <div class="stack-sm reveal">${eyebrow('PRESS &amp; MEDIA')}<h2 id="press-title" class="h-display">The Work Spoke. Then I Did.</h2></div>
+      <div class="stack-sm reveal" style="max-width:48ch">
+        <p class="lead">About the businesses. The exits. The ideas. What worked. What didn’t. And what I’m thinking about next.</p>
+        <p class="lead">Some of those conversations made it into interviews, profiles, podcasts, and features.</p>
       </div>
     </div>
+    <div class="pgrid">
+      ${['Interviews', 'Profiles', 'Podcasts', 'Features'].map((t) => `<a class="pt reveal" href="/press/"><h3>${t}</h3><span class="arrow">${arrowUR}</span></a>`).join('')}
+    </div>
+    <div class="btn-row reveal" style="margin-top:2rem">${btn('SEE THE FEATURES', '/press/', 'ghost')}</div>
   </div>
 </section>
 
-<section class="section" id="playbook" aria-labelledby="playbook-title">
-  <div class="wrap">
-    <div class="showcase reveal">
-      <div class="stack">
-        ${eyebrow('FROM THE NOTEBOOK')}
-        <h2 id="playbook-title" class="h-display">Different Businesses. Different Beginnings. One Playbook.</h2>
-        <p class="body">I’ve started enough businesses to know the beginning matters.</p>
-        <ul class="beats">
-          <li>${icon('arrow')}The early calls.</li>
-          <li>${icon('arrow')}The first customers.</li>
-          <li>${icon('arrow')}The moments when an idea has to become more than an idea.</li>
-        </ul>
-        <p class="body">The Business Launch Playbook puts my approach to those moments on the page, shaped by years of starting, operating, and growing businesses across very different industries.</p>
-      </div>
-      <div class="visual book-stage">
-        <div class="book" role="img" aria-label="The Business Launch Playbook by Dylan Mazzei">
-          ${mark()}
-          <h3>The Business Launch Playbook</h3>
-          <div class="by">Dylan Mazzei</div>
-        </div>
-      </div>
-    </div>
+<section id="poetry" aria-labelledby="poetry-title">
+  <div class="arc" aria-hidden="true"></div>
+  <div class="in-wrap reveal">
+    ${eyebrow('A DIFFERENT SIDE')}
+    <h2 id="poetry-title" class="h-display">And Then There’s Poetry.</h2>
+    <p class="poem-line">Not every idea of mine becomes a company.<br>Some become words.</p>
+    <p class="lead">Poetry gives me somewhere to put thoughts that don't belong in a business plan, a strategy session, or a boardroom.</p>
   </div>
 </section>
 
-<section class="section" id="press" aria-label="Press and poetry">
-  <div class="wrap duo reveal">
-    <article class="card card-lg">
-      ${eyebrow('PRESS &amp; MEDIA')}
-      <h2 class="h-display">The Work Spoke. Then I Did.</h2>
-      <div class="prose">
-        <p>About the businesses. The exits. The ideas. What worked. What didn’t. And what I’m thinking about next.</p>
-        <p>Some of those conversations made it into interviews, profiles, podcasts, and features.</p>
-      </div>
-      <div class="spacer"></div>
-      <div>${btn('SEE THE FEATURES', '/press/')}</div>
-    </article>
-    <article class="card card-lg card-dark" id="poetry">
-      ${eyebrow('A DIFFERENT SIDE')}
-      <h2 class="h-display">And Then There’s Poetry.</h2>
-      <p class="poem"><span>Not every idea of mine becomes a company.</span><span>Some become words.</span></p>
-      <p class="body">Poetry gives me somewhere to put thoughts that don't belong in a business plan, a strategy session, or a boardroom.</p>
-    </article>
+<section id="connect" aria-labelledby="connect-title">
+  <div class="talk" aria-hidden="true"><img class="ribbon" alt="" src="/assets/o2/ribbon.webp" width="1600" height="900" loading="lazy"><h2>Let’s talk</h2></div>
+  <div class="cbody">
+    ${eyebrow('LET’S CONNECT')}
+    <h3 id="connect-title" class="grad">Interesting Things Usually Start With a Conversation.</h3>
+    <div class="prose">
+      <p>Maybe you have an idea taking shape. A business at an interesting crossroads. A partnership worth exploring. Or simply a question you think I might have a perspective on.</p>
+      <p>I’ve learned to pay attention when an interesting conversation begins. Some of the best opportunities in my life have started exactly that way.</p>
+      <p style="color:var(--ink)">If there’s something worth talking about, I’m listening.</p>
+    </div>
+    <div class="btn-row">${btn('START A CONVERSATION', '/contact/')}</div>
   </div>
 </section>
 
-<section class="section" id="connect" aria-labelledby="connect-title">
-  <div class="wrap">
-    <div class="closing reveal">
-      <div class="closing-inner">
-        ${eyebrow('LET’S CONNECT')}
-        <h2 id="connect-title" class="h-display-lg">Interesting Things Usually Start With a Conversation.</h2>
-        <div class="prose">
-          <p>Maybe you have an idea taking shape. A business at an interesting crossroads. A partnership worth exploring. Or simply a question you think I might have a perspective on.</p>
-          <p>I’ve learned to pay attention when an interesting conversation begins. Some of the best opportunities in my life have started exactly that way.</p>
-          <p class="body-ink">If there’s something worth talking about, I’m listening.</p>
-        </div>
-        <div class="btn-row">${btn('START A CONVERSATION', '/contact/')}</div>
-      </div>
-    </div>
-  </div>
-</section>
+</div>
 `,
 };