mobile: carousel timeline, hero wordmark, arc + illustrations

Timeline: 12 event tiles are now a horizontal scroll-snap carousel
instead of a vertical stack. Each card flex-basis: 84vw, snap-align
start, with paper-tile styling + a subtle shadow + "NN / 12" index
in the top-right. A "Swipe →" hint sits above the track. Zero JS —
pure CSS scroll-snap + -webkit-overflow-scrolling.

Hero: Fenja wordmark (36px) placed above the "For regulated
environments" eyebrow, whole section wrapped in a paper-2 strip
with 72/80px top/bottom padding and hairline rules top + bottom.
Sits visually as its own chapter instead of a continuation of the
previous section.

Transition strip ("How Fenja AI addresses this") gets vertical
rules above and below and 88px vertical padding so it reads as a
deliberate pause between the timeline and the platform sections.

Capability cards: 4 per-layer illustrations (ai.png, lightbulb,
blocs tools, agents.png — all already in fenja/illustrations/)
placed as 72×72 PNGs in the top-right of each card. Card content
padding-right bumped to 92px for the num/eyebrow/title rows so
long titles wrap around the icon instead of under it.

Project Bifrost: the desktop aurora arc reused as a static SVG
backdrop. Scaled to 190% viewport width (max 900px) so the arc
runs off both edges of the phone screen, matching the desktop's
"bridge spans the stage" feel.

Treasure-map stops: community.svg, council.svg, pilot.svg sit
as 220px-wide illustrations above each stop's text, replacing
the text-only mobile rendering.

Join CTA: now wrapped in an inset paper tile with a 1.5px ink
border, a shadow, and an accent hairline ornament floating above
the eyebrow. Enclosing section gets a paper-3 background to push
the tile forward. Button grows to 20px serif / 18×34 padding.

Section padding standardised to 56-120px vertical so sections
breathe. Body overflow-x:hidden on html/body as a safety net for
the wide arc + the carousel overflow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

protected/mobile/index.html

@@ -33,102 +33,129 @@
     </p>
   </section>
 
-  <!-- ─── Vertical timeline ─── -->
+  <!-- ─── Timeline carousel (horizontal scroll-snap) ───
+       Twelve events become a single swipeable deck; each tile snaps
+       to the left edge so the user moves through one story at a
+       time instead of scrolling an endless vertical list. -->
   <section class="m-section m-timeline" aria-label="Timeline of events">
+    <div class="m-timeline-intro">
       <h2 class="m-section-head">The last 18 months, in twelve <em>moments.</em></h2>
+      <p class="m-swipe-hint" aria-hidden="true"><span>Swipe</span> &rarr;</p>
+    </div>
 
-    <article class="m-event" data-accent="copper">
+    <div class="m-timeline-track" role="list">
+
+      <article class="m-event" data-accent="copper" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Editorial</span><span class="m-event-date">September 2024</span></div>
         <h3 class="m-event-hed">Three American firms run 70% of Europe&rsquo;s cloud &mdash; and almost all of its <em>AI.</em></h3>
         <p class="m-event-body">Mario Draghi&rsquo;s verdict to the European Parliament: only four of the world&rsquo;s top fifty tech companies are European. &ldquo;It is too late,&rdquo; he writes, to challenge American cloud providers. Without radical reform, the EU faces &ldquo;slow agony.&rdquo;</p>
         <div class="m-event-source">The Draghi Report &middot; Brussels</div>
+        <div class="m-event-index"><span>01</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="copper">
+      <article class="m-event" data-accent="copper" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Field Note</span><span class="m-event-date">December 2024</span></div>
         <h3 class="m-event-hed">Denmark warns: digital society is now &ldquo;extremely <em>vulnerable.</em>&rdquo;</h3>
         <p class="m-event-body">The expert group on tech giants reports: dependence on a handful of foreign suppliers is no longer a procurement question. It is a national security one. Minister Bodskov: &ldquo;we need to fence in the tech giants.&rdquo;</p>
         <div class="m-event-source">Danish Expert Group &middot; Copenhagen</div>
+        <div class="m-event-index"><span>02</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="crimson">
+      <article class="m-event" data-accent="crimson" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2025</span></div>
         <h3 class="m-event-hed">Trump refuses to rule out military force against <em>Greenland.</em></h3>
         <p class="m-event-body">Two weeks before inauguration, the president-elect threatens &ldquo;very high tariffs&rdquo; on Denmark. The shock in Copenhagen is total.</p>
         <div class="m-event-source">Mar-a-Lago &middot; Press Conference</div>
+        <div class="m-event-index"><span>03</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="crimson">
+      <article class="m-event" data-accent="crimson" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">May 2025</span></div>
         <h3 class="m-event-hed">Microsoft cuts off the ICC chief prosecutor&rsquo;s <em>email.</em></h3>
         <p class="m-event-body">A US tech company, complying with a US executive order, disables the digital life of an officer of an international tribunal in the Netherlands. The &ldquo;kill switch&rdquo; stops being theoretical.</p>
         <div class="m-event-source">Associated Press &middot; The Hague</div>
+        <div class="m-event-index"><span>04</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="copper">
+      <article class="m-event" data-accent="copper" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">June 2025</span></div>
         <h3 class="m-event-hed">Microsoft admits under oath: it cannot guarantee European <em>sovereignty.</em></h3>
         <p class="m-event-body">Even data on European soil, with European staff, encrypted with European keys &mdash; US authorities can compel disclosure under the CLOUD Act. The legal fiction collapses.</p>
         <div class="m-event-source">French Senate Hearing &middot; Paris</div>
+        <div class="m-event-index"><span>05</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="ochre">
+      <article class="m-event" data-accent="ochre" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Field Note</span><span class="m-event-date">June 2025</span></div>
         <h3 class="m-event-hed">Copenhagen&rsquo;s Microsoft bill jumps <em>72% in five years.</em></h3>
         <p class="m-event-body">From 313 to 538 million Danish kroner. Copenhagen and Aarhus announce they will leave Microsoft entirely. The minister of emergency tells companies: &ldquo;create exit plans for cloud services.&rdquo;</p>
         <div class="m-event-source">Copenhagen Municipality &middot; Finance Report</div>
+        <div class="m-event-index"><span>06</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="copper">
+      <article class="m-event" data-accent="copper" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">Summer 2025</span></div>
         <h3 class="m-event-hed">A Danish minister tells industry: prepare your exit plans for <em>cloud services.</em></h3>
         <p class="m-event-body">Caroline Stage Olsen begins moving her ministry off Microsoft 365. The minister of emergency preparedness urges every Danish company to do the same. Continued dependence is now classified as a vulnerability.</p>
         <div class="m-event-source">Danish Ministry of Digital Affairs</div>
+        <div class="m-event-index"><span>07</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="crimson">
+      <article class="m-event" data-accent="crimson" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">August 2025</span></div>
         <h3 class="m-event-hed">Trump threatens tariffs against any country with digital <em>regulations.</em></h3>
         <p class="m-event-body">&ldquo;American technology is not the world&rsquo;s piggy bank.&rdquo; The DSA, the DMA, the AI Act &mdash; all reframed as discriminatory trade barriers. Chip export restrictions are added to the list of consequences.</p>
         <div class="m-event-source">Truth Social &middot; Washington</div>
+        <div class="m-event-index"><span>08</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="crimson">
+      <article class="m-event" data-accent="crimson" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2026</span></div>
         <h3 class="m-event-hed">Trump imposes tariffs on Denmark and seven <em>European nations.</em></h3>
         <p class="m-event-body">10% in February. 25% from June &mdash; until Denmark cedes Greenland. Denmark, Norway, Sweden, Finland, France, Germany, Netherlands, UK. The post-war alliance, weaponised.</p>
         <div class="m-event-source">Presidential Executive Order</div>
+        <div class="m-event-index"><span>09</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="crimson">
+      <article class="m-event" data-accent="crimson" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Rupture</span><span class="m-event-date">January 2026</span></div>
         <h3 class="m-event-hed">Denmark names the United States as a national security <em>threat.</em></h3>
         <p class="m-event-body">For the first time in history, the official Danish threat assessment lists the US alongside Russia and China. Defence committee chair Rasmus Jarlov tells Washington: &ldquo;You are the threat. Not them.&rdquo;</p>
         <div class="m-event-source">Danish Defence Intelligence &middot; FE</div>
+        <div class="m-event-index"><span>10</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="terracotta">
+      <article class="m-event" data-accent="terracotta" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Product</span><span class="m-event-date">February 2026</span></div>
         <h3 class="m-event-hed">The court that prosecutes war crimes can no longer use American <em>software.</em></h3>
         <p class="m-event-body">The ICC migrates to OpenDesk &mdash; an open-source suite delivered by the German Centre for Digital Sovereignty. If a global tribunal cannot trust Microsoft, the implication for every other European institution is unavoidable.</p>
         <div class="m-event-source">Handelsblatt &middot; The Hague</div>
+        <div class="m-event-index"><span>11</span> / 12</div>
       </article>
 
-    <article class="m-event" data-accent="copper">
+      <article class="m-event" data-accent="copper" role="listitem">
         <div class="m-event-meta"><span class="m-event-kind">Regulation</span><span class="m-event-date">Q1 2026</span></div>
         <h3 class="m-event-hed">Europe drafts a sovereignty law as US firms still hold 70% of the <em>cloud.</em></h3>
         <p class="m-event-body">Europe writes rules for infrastructure it does not own. US hyperscalers add &euro;10 billion of European capacity every quarter &mdash; more than Gaia-X spent in a decade. The servers stay in Texas. The AI models stay in California. The law changes neither.</p>
         <div class="m-event-source">European Commission &middot; Brussels</div>
+        <div class="m-event-index"><span>12</span> / 12</div>
       </article>
+
+    </div>
   </section>
 
   <!-- ─── Transition ─── -->
   <section class="m-section m-transition">
+    <span class="m-rule-top" aria-hidden="true"></span>
     <p class="m-transition-eyebrow">How Fenja AI <em>addresses</em> this</p>
+    <span class="m-rule-bottom" aria-hidden="true"></span>
   </section>
 
   <!-- ─── Hero ─── -->
   <section class="m-section m-hero">
+    <div class="m-hero-mark" aria-hidden="true">
+      <img src="/fenja/fenja-wordmark-black.svg" alt="" />
+    </div>
     <p class="m-eyebrow">For regulated environments</p>
     <h2 class="m-hero-title">
       Fenja AI &mdash; Secure &amp; <em>Sovereign,</em> hosted where it <em>belongs.</em>
@@ -148,6 +175,7 @@
     <h2 id="m-caps-head" class="m-section-head">The Fenja AI platform in <em>four steps.</em></h2>
 
     <article class="m-cap">
+      <img class="m-cap-icon" src="/fenja/illustrations/ai.png" alt="" aria-hidden="true" />
       <span class="m-cap-num">1 / 4</span>
       <p class="m-cap-eyebrow">The AI</p>
       <h3 class="m-cap-title">An <b>open-source</b> model, running on your <em>own hardware.</em></h3>
@@ -155,6 +183,7 @@
     </article>
 
     <article class="m-cap">
+      <img class="m-cap-icon" src="/fenja/illustrations/lightbulb%20-%20knowledge.png" alt="" aria-hidden="true" />
       <span class="m-cap-num">2 / 4</span>
       <p class="m-cap-eyebrow">The Knowledge</p>
       <h3 class="m-cap-title">The business context that makes <em>AI understand your world.</em></h3>
@@ -162,6 +191,7 @@
     </article>
 
     <article class="m-cap">
+      <img class="m-cap-icon" src="/fenja/illustrations/blocs%20tools.png" alt="" aria-hidden="true" />
       <span class="m-cap-num">3 / 4</span>
       <p class="m-cap-eyebrow">The Tools</p>
       <h3 class="m-cap-title">How AI <b>acts</b> &mdash; not just what it <em>knows.</em></h3>
@@ -169,6 +199,7 @@
     </article>
 
     <article class="m-cap">
+      <img class="m-cap-icon" src="/fenja/illustrations/agents.png" alt="" aria-hidden="true" />
       <span class="m-cap-num">4 / 4</span>
       <p class="m-cap-eyebrow">The Agents</p>
       <h3 class="m-cap-title">Specialized AI agents <b>working together</b> around <em>real tasks.</em></h3>
@@ -176,13 +207,54 @@
     </article>
   </section>
 
-  <!-- ─── Project Bifrost reveal ─── -->
+  <!-- ─── Project Bifrost reveal ───
+       The aurora arc from the desktop hero, held still as a cropped
+       backdrop. Sized wider than the viewport so the arc runs off
+       both edges rather than shrinking into a thin ribbon. Drawn
+       once, static — no GSAP, no scrub. -->
   <section class="m-section m-bifrost">
+    <div class="m-bifrost-arc" aria-hidden="true">
+      <svg viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="mAurora" x1="0" x2="1" y1="0" y2="0">
+            <stop offset="0%"   stop-color="#b48755" stop-opacity="0"/>
+            <stop offset="15%"  stop-color="#b48755" stop-opacity="0.95"/>
+            <stop offset="40%"  stop-color="#a4553b" stop-opacity="0.95"/>
+            <stop offset="65%"  stop-color="#5c7b8e" stop-opacity="0.95"/>
+            <stop offset="85%"  stop-color="#6e5a86" stop-opacity="0.95"/>
+            <stop offset="100%" stop-color="#6e5a86" stop-opacity="0"/>
+          </linearGradient>
+          <linearGradient id="mAuroraSoft" x1="0" x2="1" y1="0" y2="0">
+            <stop offset="0%"   stop-color="#b48755" stop-opacity="0"/>
+            <stop offset="15%"  stop-color="#b48755" stop-opacity="0.28"/>
+            <stop offset="40%"  stop-color="#a4553b" stop-opacity="0.28"/>
+            <stop offset="65%"  stop-color="#5c7b8e" stop-opacity="0.28"/>
+            <stop offset="85%"  stop-color="#6e5a86" stop-opacity="0.28"/>
+            <stop offset="100%" stop-color="#6e5a86" stop-opacity="0"/>
+          </linearGradient>
+          <filter id="mSoftGlow" x="-20%" y="-50%" width="140%" height="200%">
+            <feGaussianBlur stdDeviation="10"/>
+          </filter>
+        </defs>
+        <path d="M 60 420 Q 700 -40 1340 420"
+              fill="none" stroke="url(#mAuroraSoft)"
+              stroke-width="28" stroke-linecap="round"
+              filter="url(#mSoftGlow)"/>
+        <path d="M 60 420 Q 700 -40 1340 420"
+              fill="none" stroke="url(#mAurora)"
+              stroke-width="3" stroke-linecap="round"/>
+        <path d="M 80 420 Q 700 -20 1320 420"
+              fill="none" stroke="url(#mAurora)"
+              stroke-width="1" stroke-linecap="round" opacity="0.6"/>
+      </svg>
+    </div>
+    <div class="m-bifrost-content">
       <p class="m-bifrost-eyebrow">Introducing</p>
       <h2 class="m-bifrost-name">Project <em>Bifrost</em></h2>
       <p class="m-bifrost-sub">
         The bridge <em>between</em> an industrial-grade AI platform and the realities of regulated organisations &mdash; built <em>with</em> them, not just for them.
       </p>
+    </div>
   </section>
 
   <!-- ─── What Project Bifrost means ─── -->
@@ -196,6 +268,7 @@
     </p>
 
     <article class="m-stop">
+      <img class="m-stop-illust" src="/fenja/illustrations/community.svg" alt="" aria-hidden="true" />
       <p class="m-stop-eyebrow">Be part of a</p>
       <h3 class="m-stop-title"><em>Community</em></h3>
       <p class="m-stop-sub">Shape the future together</p>
@@ -203,6 +276,7 @@
     </article>
 
     <article class="m-stop">
+      <img class="m-stop-illust" src="/fenja/illustrations/council.svg" alt="" aria-hidden="true" />
       <p class="m-stop-eyebrow">Be part of an</p>
       <h3 class="m-stop-title"><em>Advisory Council</em></h3>
       <p class="m-stop-sub">Turn insight into influence</p>
@@ -210,6 +284,7 @@
     </article>
 
     <article class="m-stop">
+      <img class="m-stop-illust" src="/fenja/illustrations/pilot.svg" alt="" aria-hidden="true" />
       <p class="m-stop-eyebrow">Be part of</p>
       <h3 class="m-stop-title"><em>Pilot Projects</em></h3>
       <p class="m-stop-sub">Access the platform before others</p>

protected/mobile/mobile.css

@@ -12,6 +12,7 @@
 :root {
   --paper:      #faf6ee;
   --paper-2:    #f3efe4;
+  --paper-3:    #ece4d1;
   --ink:        #2e2e28;
   --ink-soft:   #5f5e5e;
   --ink-dim:    #8a887f;
@@ -35,6 +36,9 @@ html, body {
   font-size: 17px;
   line-height: 1.55;
   -webkit-text-size-adjust: 100%;
+  overflow-x: hidden; /* belt-and-suspenders — the arc + carousel both
+                        rely on horizontal overflow, so we make sure
+                        the page itself never horizontally scrolls. */
 }
 
 /* ─── Masthead ───────────────────────────────────────────── */
@@ -66,13 +70,12 @@ html, body {
 
 /* ─── Main layout ────────────────────────────────────────── */
 .m-main {
-  padding-bottom: 32px;
+  padding-bottom: 48px;
 }
+/* Default section = generous vertical rhythm. Individual sections
+   override this where they need their own breathing. */
 .m-section {
-  padding: 40px 22px;
+  padding: 56px 22px;
-}
-.m-section + .m-section {
-  border-top: 1px solid var(--line-soft);
 }
 
 /* ─── Shared type ────────────────────────────────────────── */
@@ -121,17 +124,57 @@ html, body {
 .m-body--accent em { color: var(--crimson); }
 
 /* ─── Intro ──────────────────────────────────────────────── */
-.m-intro { padding-top: 28px; }
+.m-intro {
+  padding: 44px 22px 48px;
+}
 
-/* ─── Timeline events ────────────────────────────────────── */
+/* ─── Timeline carousel ──────────────────────────────────── */
 .m-timeline {
   background: var(--paper-2);
+  padding: 56px 0 64px;  /* track bleeds edge-to-edge; use inner padding */
 }
+.m-timeline-intro {
+  padding: 0 22px 18px;
+}
+.m-swipe-hint {
+  margin: 0;
+  font-family: "Manrope", system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.m-swipe-hint span { letter-spacing: 0.22em; }
+
+.m-timeline-track {
+  display: flex;
+  flex-direction: row;
+  gap: 14px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline-start: 22px;
+  padding: 6px 22px 10px;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.m-timeline-track::-webkit-scrollbar { display: none; }
+
 .m-event {
-  padding: 20px 0;
+  flex: 0 0 84vw;
-  border-bottom: 1px solid var(--line);
+  max-width: 340px;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  padding: 22px 20px 18px;
+  background: #fffdf6;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  position: relative;
+  box-shadow: 0 10px 22px -18px rgba(46, 46, 40, 0.28);
 }
-.m-event:last-child { border-bottom: none; }
 .m-event-meta {
   display: flex;
   gap: 10px;
@@ -157,42 +200,79 @@ html, body {
   font-size: 20px;
   line-height: 1.22;
   letter-spacing: -0.01em;
-  margin: 0 0 8px 0;
+  margin: 0 0 10px 0;
   color: var(--ink);
   text-wrap: pretty;
 }
 .m-event-hed em { font-style: italic; font-weight: 700; }
 .m-event-body {
-  margin: 0 0 10px 0;
+  margin: 0 0 12px 0;
-  font-size: 16px;
+  font-size: 15.5px;
   line-height: 1.55;
   color: var(--ink-soft);
 }
 .m-event-source {
   font-family: "Manrope", system-ui, -apple-system, sans-serif;
-  font-size: 11px;
+  font-size: 10.5px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink-dim);
 }
+.m-event-index {
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  font-family: "Newsreader", Georgia, serif;
+  font-size: 13px;
+  color: var(--ink-dim);
+  font-variant-numeric: tabular-nums;
+}
+.m-event-index span {
+  color: var(--accent);
+  font-weight: 600;
+}
 
 /* ─── Transition strip ───────────────────────────────────── */
 .m-transition {
-  padding-top: 56px;
+  padding: 88px 22px;
-  padding-bottom: 16px;
   text-align: center;
 }
+.m-rule-top,
+.m-rule-bottom {
+  display: block;
+  width: 44px;
+  height: 1px;
+  margin: 0 auto 20px;
+  background: var(--ink-dim);
+}
+.m-rule-bottom { margin: 20px auto 0; }
 .m-transition-eyebrow {
   font-family: "Newsreader", Georgia, serif;
-  font-size: 22px;
+  font-size: 24px;
   line-height: 1.25;
   margin: 0;
   color: var(--ink);
 }
-.m-transition-eyebrow em { font-style: italic; font-weight: 700; }
+.m-transition-eyebrow em { font-style: italic; font-weight: 700; color: var(--accent); }
 
 /* ─── Hero ───────────────────────────────────────────────── */
-.m-hero { padding-top: 24px; padding-bottom: 52px; }
+.m-hero {
+  background: var(--paper-2);
+  padding: 72px 22px 80px;
+  text-align: center;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.m-hero-mark {
+  margin: 0 0 28px 0;
+  line-height: 0;
+}
+.m-hero-mark img {
+  height: 36px;
+  width: auto;
+  display: inline-block;
+  opacity: 0.95;
+}
 .m-eyebrow {
   font-family: "Manrope", system-ui, -apple-system, sans-serif;
   font-size: 11px;
@@ -200,7 +280,7 @@ html, body {
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--accent);
-  margin: 0 0 16px 0;
+  margin: 0 0 20px 0;
 }
 .m-hero-title {
   font-family: "Newsreader", Georgia, serif;
@@ -208,21 +288,22 @@ html, body {
   font-size: 34px;
   line-height: 1.08;
   letter-spacing: -0.018em;
-  margin: 0 0 20px 0;
+  margin: 0 0 22px 0;
   text-wrap: pretty;
 }
 .m-hero-title em { font-style: italic; font-weight: 700; color: var(--accent); }
 .m-hero-lede {
-  margin: 0 0 28px 0;
+  margin: 0 auto 32px;
   font-size: 18px;
   line-height: 1.55;
   color: var(--ink);
+  max-width: 44ch;
 }
 .m-support {
-  display: flex;
+  display: inline-flex;
   align-items: baseline;
   gap: 8px;
-  padding-top: 16px;
+  padding: 14px 18px 0;
   border-top: 1px solid var(--line);
 }
 .m-support-label {
@@ -241,22 +322,45 @@ html, body {
 }
 
 /* ─── Capabilities ───────────────────────────────────────── */
+.m-caps {
+  padding: 88px 22px 88px;
+}
 .m-cap {
-  padding: 22px 20px;
+  position: relative;
+  padding: 24px 22px 24px;
   margin: 0 0 18px 0;
   background: #fffdf6;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: 8px;
+  box-shadow: 0 12px 22px -18px rgba(46, 46, 40, 0.24);
+  /* reserve space on the right for the icon so long titles wrap
+     instead of running under it. */
+  padding-right: 96px;
+  min-height: 104px;
 }
 .m-cap:last-child { margin-bottom: 0; }
+.m-cap-icon {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+  object-position: center;
+  /* PNGs are illustrative — let the image rest rather than tinting
+     it, which the PNGs aren't authored to tolerate. */
+  opacity: 0.98;
+  pointer-events: none;
+}
 .m-cap-num {
   display: inline-block;
   font-family: "Newsreader", Georgia, serif;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 13.5px;
   color: var(--accent);
   margin-bottom: 10px;
   font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
 }
 .m-cap-eyebrow {
   font-family: "Manrope", system-ui, sans-serif;
@@ -270,12 +374,15 @@ html, body {
 .m-cap-title {
   font-family: "Newsreader", Georgia, serif;
   font-weight: 400;
-  font-size: 21px;
+  font-size: 20px;
-  line-height: 1.2;
+  line-height: 1.22;
   letter-spacing: -0.01em;
   margin: 0 0 10px 0;
   color: var(--ink);
   text-wrap: pretty;
+  /* allow title to relax into the icon column once the icon ends,
+     which lives only in the top-right 86px. */
+  padding-right: 0;
 }
 .m-cap-title b {
   font-weight: 700;
@@ -288,18 +395,58 @@ html, body {
 }
 .m-cap-body {
   margin: 0;
-  font-size: 16px;
+  padding-right: 0;
+  font-size: 15.5px;
   line-height: 1.55;
   color: var(--ink-soft);
 }
+/* Reclaim the right padding for the body copy once the text flows
+   below the icon area (icon is ~72px tall + 14px top = 86px). */
+.m-cap {
+  padding-right: 22px;
+}
+.m-cap-num,
+.m-cap-eyebrow,
+.m-cap-title {
+  /* These rows sit beside the icon — keep clear of it. */
+  padding-right: 92px;
+}
+.m-cap-body {
+  /* Body sits below the icon — use the whole card width. */
+  padding-right: 0;
+}
 
-/* ─── Bifrost reveal ─────────────────────────────────────── */
+/* ─── Project Bifrost reveal ─────────────────────────────── */
 .m-bifrost {
-  padding-top: 56px;
+  position: relative;
-  padding-bottom: 56px;
+  overflow: hidden;
-  text-align: center;
+  padding: 120px 22px 110px;
   background: linear-gradient(to bottom,
-    var(--paper) 0%, var(--paper-2) 50%, var(--paper) 100%);
+    var(--paper) 0%, var(--paper-2) 40%, var(--paper-2) 60%, var(--paper) 100%);
+  text-align: center;
+}
+/* The arc is drawn in an SVG that's wider than the viewport so the
+   gradient ends are always cropped at the screen edges — the bridge
+   runs off the sides instead of shrinking into a thin ribbon. */
+.m-bifrost-arc {
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+  width: 190%;
+  max-width: 900px;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.98;
+}
+.m-bifrost-arc svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.m-bifrost-content {
+  position: relative;
+  z-index: 2;
 }
 .m-bifrost-eyebrow {
   font-family: "Manrope", system-ui, sans-serif;
@@ -308,15 +455,15 @@ html, body {
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--accent);
-  margin: 0 0 18px 0;
+  margin: 0 0 20px 0;
 }
 .m-bifrost-name {
   font-family: "Newsreader", Georgia, serif;
   font-weight: 400;
-  font-size: 44px;
+  font-size: 48px;
   line-height: 1.05;
   letter-spacing: -0.02em;
-  margin: 0 0 22px 0;
+  margin: 0 0 26px 0;
 }
 .m-bifrost-name em {
   font-style: italic;
@@ -327,24 +474,36 @@ html, body {
   margin: 0 auto;
   font-size: 17px;
   line-height: 1.55;
-  color: var(--ink-soft);
+  color: var(--ink);
   max-width: 38ch;
 }
-.m-bifrost-sub em { font-style: italic; font-weight: 700; color: var(--ink); }
+.m-bifrost-sub em { font-style: italic; font-weight: 700; color: var(--accent); }
 
 /* ─── What Bifrost means ─────────────────────────────────── */
+.m-meaning {
+  padding: 80px 22px 72px;
+}
 .m-meaning-lede {
-  margin: 0 0 28px 0;
+  margin: 0 0 40px 0;
   font-size: 17px;
   line-height: 1.55;
   color: var(--ink-soft);
 }
 .m-meaning-lede em { font-style: italic; font-weight: 700; color: var(--ink); }
 .m-stop {
-  padding: 22px 0;
+  padding: 32px 0;
   border-top: 1px solid var(--line);
 }
-.m-stop:first-of-type { border-top: none; padding-top: 6px; }
+.m-stop:first-of-type { border-top: none; padding-top: 8px; }
+.m-stop-illust {
+  display: block;
+  width: 100%;
+  max-width: 220px;
+  height: auto;
+  margin: 0 0 20px 0;
+  /* SVG illustrations have white-ish backgrounds; let them sit on
+     paper without a frame. */
+}
 .m-stop-eyebrow {
   font-family: "Manrope", system-ui, sans-serif;
   font-size: 10.5px;
@@ -357,14 +516,14 @@ html, body {
 .m-stop-title {
   font-family: "Newsreader", Georgia, serif;
   font-weight: 400;
-  font-size: 26px;
+  font-size: 28px;
   line-height: 1.1;
   letter-spacing: -0.012em;
-  margin: 0 0 6px 0;
+  margin: 0 0 8px 0;
 }
 .m-stop-title em { font-style: italic; font-weight: 700; color: var(--accent); }
 .m-stop-sub {
-  margin: 0 0 12px 0;
+  margin: 0 0 14px 0;
   font-family: "Newsreader", Georgia, serif;
   font-style: italic;
   color: var(--ink-soft);
@@ -377,30 +536,48 @@ html, body {
   color: var(--ink);
 }
 
-/* ─── Join CTA ───────────────────────────────────────────── */
+/* ─── Join CTA — the most emphatic section on the page ───── */
 .m-join {
-  background: var(--paper-2);
+  padding: 100px 22px 120px;
+  background: var(--paper-3);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
 }
 .m-join-panel {
   text-align: center;
-  padding: 8px 0;
+  padding: 40px 24px 36px;
+  background: #fffdf6;
+  border: 1.5px solid var(--ink);
+  border-radius: 10px;
+  box-shadow:
+    0 30px 50px -24px rgba(46, 46, 40, 0.28),
+    0 8px 18px -10px rgba(46, 46, 40, 0.14);
+  position: relative;
+}
+.m-join-panel::before {
+  content: "";
+  position: absolute;
+  top: -8px; left: 50%;
+  transform: translateX(-50%);
+  width: 48px; height: 1.5px;
+  background: var(--accent);
 }
 .m-join-eyebrow {
   font-family: "Manrope", system-ui, sans-serif;
-  font-size: 11px;
+  font-size: 12px;
-  font-weight: 600;
+  font-weight: 700;
-  letter-spacing: 0.18em;
+  letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--accent);
-  margin: 0 0 14px 0;
+  margin: 0 0 16px 0;
 }
 .m-join-headline {
   font-family: "Newsreader", Georgia, serif;
   font-weight: 400;
-  font-size: 28px;
+  font-size: 30px;
-  line-height: 1.12;
+  line-height: 1.1;
-  letter-spacing: -0.012em;
+  letter-spacing: -0.014em;
-  margin: 0 0 24px 0;
+  margin: 0 0 28px 0;
   text-wrap: pretty;
 }
 .m-join-headline em { font-style: italic; font-weight: 700; color: var(--accent); }
@@ -410,17 +587,23 @@ html, body {
   background: var(--ink);
   color: var(--paper);
   font-family: "Newsreader", Georgia, serif;
-  font-size: 18px;
+  font-size: 20px;
+  font-weight: 500;
   letter-spacing: 0.01em;
-  padding: 14px 26px;
+  padding: 18px 34px;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  box-shadow: 0 6px 14px -8px rgba(46,46,40,0.35);
+  box-shadow:
+    0 14px 26px -14px rgba(46, 46, 40, 0.55),
+    0 4px 10px -6px rgba(46, 46, 40, 0.3);
+}
+.m-join-button:active {
+  background: #000;
+  transform: translateY(1px);
 }
-.m-join-button:active { background: #000; transform: translateY(1px); }
 .m-join-button:disabled { opacity: 0.55; cursor: progress; }
 .m-join-subtext {
-  margin: 20px 0 0 0;
+  margin: 24px 0 0 0;
   font-family: "Manrope", system-ui, sans-serif;
   font-size: 11px;
   letter-spacing: 0.14em;
@@ -435,7 +618,7 @@ html, body {
 }
 .m-confirm-list li {
   position: relative;
-  padding: 12px 0 12px 28px;
+  padding: 14px 0 14px 30px;
   border-top: 1px solid var(--line);
   font-size: 16px;
   line-height: 1.5;
@@ -446,7 +629,7 @@ html, body {
   content: "";
   position: absolute;
   left: 0;
-  top: 19px;
+  top: 22px;
   width: 14px;
   height: 8px;
   border-left: 2px solid var(--accent);