hero: two-column layout with Fenja wordmark on the right

- Hero copy moves into a .hero-copy column on the left; a new
  .hero-mark column on the right holds the Fenja wordmark at
  clamp(200px, 22vw, 320px) wide — same position as the welcome
  page's .welcome-logo (~75% across the viewport).
- New eyebrow "Meet Fenja AI", headline "Trusted & Sovereign AI /
  built in Denmark, for Europe.", and expanded lede explaining
  that Fenja AI is both the company and the platform.
- "Supported by" → "Backed by". Both the wordmark font-size and
  the Innovationsfonden SVG get a 50% size bump (calc(--step-sm *
  1.5) on the text, 18px → 27px on the svg).
- Responsive: at <780px the grid collapses to a single column so
  the wordmark stacks below the copy on narrow desktop viewports
  (the mobile UA still gets the separate static mobile view).

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

protected/index.html

@@ -838,16 +838,38 @@
     padding-bottom: clamp(6rem, 16vh, 11rem);
   }
   #page-overview #hero .hero-wrap {
-    /* Constrain to the left column so Europe is visible to its right.
+    /* Two-column layout: editorial copy on the left, Fenja wordmark
-       Widened from 62ch to 74ch (~+20%) so the new longer hero lede
+       on the right — the right column anchors the logo at the same
-       ("Fenja AI is a sovereign AI platform…") sits comfortably on
+       viewport position the welcome page uses (~75% across). */
-       fewer lines. */
+    display: grid;
-    max-width: 74ch;
+    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
-    /* Zeroed: wrap padding-top was adding down-drift inside the centered
+    gap: clamp(2rem, 5vw, 4rem);
-       container, pushing the hero-foot toward the dot-nav. Vertical
+    align-items: center;
-       position is now controlled entirely by #hero's asymmetric padding. */
+    max-width: none;
     padding-top: 0;
   }
+  #page-overview #hero .hero-copy {
+    max-width: 62ch;
+  }
+
+  /* Right-column wordmark — sized to match the welcome page's
+     .welcome-logo (280px at the top end). Decorative only; the
+     heading remains the left-column <h1>. */
+  #page-overview #hero .hero-mark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+  #page-overview #hero .hero-mark img {
+    width: clamp(200px, 22vw, 320px);
+    height: auto;
+    display: block;
+    opacity: 0.92;
+  }
+  /* No separate reveal/opacity rule needed: the whole .hero-wrap
+     fades in as one via bifrost.js's hero tween, so both columns
+     arrive together. */
 
   /* Make sure scenes don't accidentally inherit `main { position: relative }` */
   #overview-scroll > section { position: relative; z-index: 2; }
@@ -998,12 +1020,16 @@ html {
   .support {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    /* All three axes bumped ~50% from the original: gap 0.75→1.1rem,
-    font-size: var(--step-sm);
+       font-size ×1.5 via a calc on --step-sm, and the svg wordmark
+       grows 18→27px so the Innovationsfonden lockup reads with more
+       weight. */
+    gap: 1.1rem;
+    font-size: calc(var(--step-sm) * 1.5);
     text-transform: uppercase;
     letter-spacing: 0.18em;
   }
-  .support svg { height: 18px; width: auto; }
+  .support svg { height: 27px; width: auto; }
 
   .scroll-hint {
     display: inline-flex;
@@ -1564,6 +1590,14 @@ html {
 
     .hero-foot { margin-top: 2rem; flex-direction: column; gap: 1rem; align-items: flex-start; }
     #hero { padding-top: 5rem; padding-bottom: 3rem; min-height: auto; }
+    /* Narrow viewports: collapse the hero's 2-column grid so the
+       wordmark sits below the copy instead of beside it. */
+    #page-overview #hero .hero-wrap {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+    #page-overview #hero .hero-mark { justify-content: flex-start; }
+    #page-overview #hero .hero-mark img { width: clamp(160px, 40vw, 220px); }
   }
 
   @media (max-width: 520px) {
@@ -2447,25 +2481,28 @@ html {
        ============================================================ -->
   <section id="hero" class="scene" aria-labelledby="hero-title">
     <div class="hero-wrap">
-      <div>
+      <!-- Left column: eyebrow + headline + lede + foot row. The
-        <div class="eyebrow" data-reveal>For regulated environments</div>
+           right column (.hero-mark) holds the Fenja wordmark,
+           mirroring the welcome page's right-side lockup. -->
+      <div class="hero-copy">
+        <div class="eyebrow" data-reveal>Meet Fenja AI</div>
         <h1 id="hero-title" class="hero-title" data-reveal-lines>
-          Fenja AI — Secure &amp; <em>Sovereign,</em><br/>
+          Trusted &amp; <em>Sovereign AI</em><br/>
-          hosted where it <em>belongs.</em>
+          built in Denmark, for <em>Europe.</em>
         </h1>
         <p class="hero-lede" data-reveal>
-          Fenja AI is a sovereign AI platform, enabling highly advanced AI capabilities hosted within the client's own secure infrastructure.
+          Fenja AI is both our company and our platform &mdash; one mission, one name. An entirely client-managed AI platform built in Denmark, so Danish and European organisations can take full control of their own AI.
         </p>
 
-        <!-- Hero foot: "Supported by Innovationsfonden" on the left and
+        <!-- Hero foot: "Backed by Innovationsfonden" on the left and
              the scroll-down indicator on the right, both inside the
              left column at the bottom of the paragraph block. Shared
              baseline via display:flex + align-items:baseline on
              .hero-foot. The scroll arrow points DOWN and gently bounces
              downward (see @keyframes hint below). -->
         <div class="hero-foot">
-          <div class="support" aria-label="Supported by Innovationsfonden" data-reveal>
+          <div class="support" aria-label="Backed by Innovationsfonden" data-reveal>
-            <span>Supported by</span>
+            <span>Backed by</span>
             <!-- Simplified Innovationsfonden wordmark (redrawn — not their official logo, a respectful representation) -->
             <svg viewBox="0 0 190 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
               <g fill="#3c6b6b">
@@ -2480,6 +2517,14 @@ html {
           </div>
         </div>
       </div>
+
+      <!-- Right column: the Fenja wordmark, anchored to the right
+           half of the viewport — same placement the welcome page
+           uses for its .welcome-logo. Decorative; the <h1> above
+           is still the semantic heading. -->
+      <div class="hero-mark" aria-hidden="true" data-reveal>
+        <img src="/fenja/fenja-wordmark-black.svg" alt="" />
+      </div>
     </div>
   </section>