<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#f5faf6" />

    
    

    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="icon" href="/logos/hj-logo.png" type="image/png" sizes="any" />
    <link rel="apple-touch-icon" href="/logos/hj-logo.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://images.unsplash.com" crossorigin />
    <link rel="dns-prefetch" href="https://images.unsplash.com" />

    
    
    
    
    
    
    

    <!-- Google Analytics 4 (gtag.js) — kanonisk Google-snippet, plassert i
         <head> så den kjører før React/PostHog/BotID. Consent Mode v2:
         default `denied` (GDPR-OK), oppdateres til `granted` når brukeren
         godtar cookie-banneret (se grantAnalyticsConsent i analytics.ts).
         `gtag('config', …)` kjører kun på prod-/dev-hostnames og når
         brukeren ikke har opt'et ut via /h-clear?optout=1. -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-L7RQPMR4Y5"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('consent', 'default', {
        ad_storage: 'denied',
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        analytics_storage: 'denied',
        wait_for_update: 500
      });
      gtag('js', new Date());
      (function () {
        var h = location.hostname;
        var allowed = h === 'haakonjensen.no' || h === 'www.haakonjensen.no' || h === 'dev.haakonjensen.no';
        var optedOut = false;
        var alreadyAccepted = false;
        try {
          optedOut = localStorage.getItem('hj-analytics-optout') === '1';
          alreadyAccepted = localStorage.getItem('hj-analytics-consent') === 'accepted';
        } catch (e) {}
        if (allowed && !optedOut) {
          gtag('config', 'G-L7RQPMR4Y5', { send_page_view: false });
          // Returnerende bruker som har akseptert tidligere — oppgrader
          // consent fra default 'denied' til 'granted' her, ellers blir
          // alle events i denne økten anonymisert (gcs=G100) frem til
          // brukeren klikker Godta igjen (som de aldri gjør).
          if (alreadyAccepted) {
            gtag('consent', 'update', {
              ad_storage: 'granted',
              ad_user_data: 'granted',
              ad_personalization: 'granted',
              analytics_storage: 'granted'
            });
          }
        }
      })();
    </script>
    <script type="module" crossorigin src="/assets/index-B8_ngQZS.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DNTmOj2o.css">
      <title data-rh="true">Haakon Jensen | Produktledelse, markedsføring og teknologi | haakonjensen.no</title>
    <meta data-rh="true" name="description" content="Operatør med 25 år bak produkter og satsninger brukt av millioner. Hjelp til produktfart, AI som faktisk virker, og økte sponsorinntekter. Ex Spleis, SpareBank 1, Ski-VM Trondheim 2025. Nå Mollo + Sponsee."/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:title" content="Haakon Jensen | Produktledelse, markedsføring og teknologi | haakonjensen.no"/><meta data-rh="true" property="og:description" content="Operatør med 25 år bak produkter og satsninger brukt av millioner. Hjelp til produktfart, AI som faktisk virker, og økte sponsorinntekter. Ex Spleis, SpareBank 1, Ski-VM Trondheim 2025. Nå Mollo + Sponsee."/><meta data-rh="true" property="og:url" content="https://haakonjensen.no/"/><meta data-rh="true" property="og:image" content="https://haakonjensen.no/og.png"/><meta data-rh="true" property="og:site_name" content="haakonjensen.no"/><meta data-rh="true" property="og:locale" content="nb_NO"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:title" content="Haakon Jensen | Produktledelse, markedsføring og teknologi | haakonjensen.no"/><meta data-rh="true" name="twitter:description" content="Operatør med 25 år bak produkter og satsninger brukt av millioner. Hjelp til produktfart, AI som faktisk virker, og økte sponsorinntekter. Ex Spleis, SpareBank 1, Ski-VM Trondheim 2025. Nå Mollo + Sponsee."/><meta data-rh="true" name="twitter:image" content="https://haakonjensen.no/og.png"/>
    <link data-rh="true" rel="canonical" href="https://haakonjensen.no/"/>
    <script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","@id":"https://haakonjensen.no/#website","name":"haakonjensen.no","url":"https://haakonjensen.no","inLanguage":"nb-NO","publisher":{"@id":"https://haakonjensen.no/#person"}}</script><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"Person","@id":"https://haakonjensen.no/#person","name":"Haakon Jensen","jobTitle":"Operatør innen produkt, marked og teknologi","url":"https://haakonjensen.no","image":"https://haakonjensen.no/haakon.jpg","email":"haakon@mollo.no","telephone":"+47 951 03 981","homeLocation":{"@type":"Place","name":"Trondheim"},"sameAs":["https://www.linkedin.com/in/haakonjensen/"],"worksFor":{"@type":"Organization","name":"Mollo","url":"https://mollo.no"}}</script>
  </head>

  <body>
    <div id="root"><div style="padding-right:0;transition:padding-right 0.35s cubic-bezier(0.2,0.8,0.2,1)"><div><nav class="gh-nav" style="right:0"><div class="gh-logo"><a class="gh-wordmark-link" aria-label="Til forsiden" href="/" data-discover="true"><span class="gh-wordmark">hj<span class="gh-wordmark__dot">.</span></span></a></div><div class="gh-right"><button class="gh-hamb gh-hamb--with-label " aria-label="Åpne meny" aria-expanded="false"><span class="gh-hamb-bar"></span><span class="gh-hamb-bar"></span></button><button type="button" class="gh-icon" aria-label="Åpne chat" title="Chat"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A2.5 2.5 0 0 1 5.5 3h9A2.5 2.5 0 0 1 17 5.5v6A2.5 2.5 0 0 1 14.5 14H9l-3.5 3v-3A2.5 2.5 0 0 1 3 11.5v-6Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path></svg></button></div></nav><style>
  .gh-nav {
    position: fixed; top: 0; left: 0; right: 0;
    /* Under chat-panelet (z-index 90). Når panelet er åpent på desktop
       krymper inline-stilen &#x27;right&#x27; nav-baren til kun innholdsbredden, så
       hamburger og chat-pill havner inne i det synlige innholdet, ikke
       oppå panelet. På mobil dekker panelet hele viewporten og ligger
       over nav-baren. Megameny (z-index 200) ligger over alt. */
    z-index: 80;
    display: flex; align-items: center; justify-content: space-between;
    /* viewport-fit=cover lar siden bre seg under iOS dynamic island/
       statuslinja. Padder topp-en med safe-area-inset-top så pillene
       sitter under island-en, og backdrop-blur-en på mobil dekker hele
       safe-area-sonen i stedet for å la sideinnhold peke ut over. */
    padding: max(18px, calc(env(safe-area-inset-top, 0px) + 6px)) 28px 18px;
    background: transparent;
    pointer-events: none;
    font-family: var(--v2-font-sans);
    transition: right 0.35s cubic-bezier(0.2,0.8,0.2,1), background 0.2s ease;
  }
  /* Mobile backdrop på header: paper-tint + blur så scrolling-innhold
     ikke synes bak Meny/Chat-pillene eller i safe-area-sonen over dem.
     Tett nok (92%) til å være ugjennomsiktig — pure blur var for svakt
     mot mørk overskrifts-tekst som scrollet under headeren. */
  @media (max-width: 768px) {
    .gh-nav {
      background: color-mix(in srgb, var(--v2-paper) 92%, transparent);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }
  }
  .gh-nav &gt; * { pointer-events: auto; }
  /* Logo + composer share the left rail. The brand-text shrinks to nothing
     once a chat exists so the composer pill takes its place without an
     awkward gap or layout jump. */
  .gh-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .gh-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--v2-ink);
    flex-shrink: 0;
    line-height: 1;
  }
  .gh-wordmark-link {
    text-decoration: none;
    color: inherit;
    line-height: 1;
  }
  /* Wordmark &quot;hj.&quot; rendret i Geist (--f-sans) — erstatter monogram-png-en
     med en typografisk identitet. Punktum-en farges i mint-grønt så den
     blir den visuelle anchor-en (samme rolle som &quot;TLD&quot;-prikken hadde
     i den gamle &quot;haakonjensen.no&quot;-versjonen). */
  .gh-wordmark {
    font-family: var(--f-sans);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.04em;
    color: var(--v2-ink);
  }
  .gh-wordmark__dot {
    color: var(--v2-dot-green);
  }
  /* Breadcrumb til høyre for wordmarken: hver segment er en egen Link mot
     sin akkumulerte path. Siste segmentet (current page) er ikke-klikkbar
     og bruker aria-current=&quot;page&quot;. Vises kun på desktop (≥620px) — på
     mobil tar pillene plassen. */
  .gh-breadcrumb {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--v2-muted);
    letter-spacing: 0;
  }
  .gh-breadcrumb__sep {
    color: rgba(13, 31, 45, 0.30);
  }
  .gh-breadcrumb__here {
    color: var(--v2-muted);
  }
  .gh-breadcrumb__link {
    text-decoration: none;
    color: var(--v2-muted);
    transition: color 0.15s ease;
  }
  .gh-breadcrumb__link:hover {
    color: var(--v2-ink);
  }

  .gh-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  /* Mini composer next to the logo. Animates in from above so the
     transition reads as the hero composer minimizing into the corner. */
  .gh-composer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 5px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(13,31,45,0.10);
    border-radius: 999px;
    box-shadow:
      0 6px 18px rgba(13,31,45,0.10),
      inset 0 1px 0 rgba(255,255,255,0.85);
    min-width: 0;
    max-width: 360px;
    flex: 1 1 auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    animation: gh-composer-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .gh-composer:focus-within {
    border-color: var(--v2-ink);
    box-shadow:
      0 0 0 3px rgba(140,232,190,0.35),
      0 8px 22px rgba(13,31,45,0.10);
  }
  @keyframes gh-composer-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .gh-composer__avatar {
    position: relative;
    appearance: none; cursor: pointer;
    width: 32px; height: 32px;
    padding: 0; border: 0; border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .gh-composer__avatar:hover { transform: scale(1.04); }
  .gh-composer__avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 1.5px solid rgba(13,31,45,0.10);
    display: block;
  }
  .gh-composer__count {
    position: absolute;
    top: -2px; right: -4px;
    background: var(--v2-dot-green);
    color: #fff;
    font-size: 10px; font-weight: 700;
    line-height: 1;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.95);
  }
  .gh-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 14px;
    color: var(--v2-ink);
    padding: 4px 2px;
  }
  .gh-composer__input::placeholder { color: var(--v2-muted); }
  .gh-composer__send {
    appearance: none; cursor: pointer;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%; border: 0;
    background: var(--v2-ink);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .gh-composer__send:hover:not(:disabled) { transform: translateX(1px); }
  .gh-composer__send:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .gh-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 14px;
    background: var(--v2-ink); color: #fff;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(13,31,45,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .gh-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13,31,45,0.25); }
  .gh-pill-count {
    background: var(--v2-dot-green); color: #fff;
    font-size: 10.5px; font-weight: 700;
    padding: 1px 7px; border-radius: 999px;
    min-width: 18px; text-align: center;
  }

  .gh-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--v2-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    opacity: 0.75;
    text-decoration: none;
  }
  .gh-icon:hover { background: rgba(13,31,45,0.06); opacity: 1; transform: translateY(-1px); }

  /* Aktivitets-pulse på chat-ikonet/pille når chip-link-navigasjon på
     mobil har trigget en nudge. Ringen pulserer 3 ganger så det er
     tydelig uten å bli irriterende. Ryddes idet panelet åpnes. */
  .gh-nudge { position: relative; }
  .gh-nudge::after {
    content: &#x27;&#x27;;
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--v2-success);
    opacity: 0;
    pointer-events: none;
    animation: gh-nudge-pulse 1.4s ease-out 3;
  }
  @keyframes gh-nudge-pulse {
    0%   { opacity: 0; transform: scale(0.95); }
    40%  { opacity: 0.9; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(1.18); }
  }

  .gh-hamb {
    appearance: none; cursor: pointer; border: 0;
    background: transparent;
    width: 36px; height: 36px;
    padding: 0; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    transition: background 0.15s ease;
  }
  .gh-hamb:hover { background: rgba(13,31,45,0.04); }
  /* MENY-variant: utvider knappen til pille med tekst-label til venstre
     for de to strekene. Bars beholder samme nth-child-koreografi som
     icon-only-varianten — vi flytter dem bare til høyre side av knappen
     med padding-right + transform-justering. */
  .gh-hamb--with-label {
    width: auto;
    height: 38px;
    /* Padding-right må romme bars (22px) + deres anchor (right:14px)
       + en visuell buffer mellom label-tekst og strekene. */
    padding: 0 44px 0 16px;
    gap: 12px;
    border-radius: 999px;
    background: rgba(13, 31, 45, 0.04);
  }
  .gh-hamb--with-label:hover { background: rgba(13, 31, 45, 0.08); }
  .gh-hamb--with-label::before {
    content: &quot;Meny&quot;;
    font-family: var(--v2-font-sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--v2-ink);
    line-height: 1;
  }
  /* Bars flyttes fra senter (left:50%, translate(-50%,0)) til høyre-
     anchor (right:14px, translate(0,0)) når label er til stede. nth-child-
     ene beholder sine top-offsets (calc(50% ± 4px)) — koreografien er
     identisk, bare anchor-en endres. */
  .gh-hamb--with-label .gh-hamb-bar {
    left: auto;
    right: 14px;
    transform: translate(0, 0);
  }
  .gh-hamb--with-label.is-open .gh-hamb-bar:nth-child(1) {
    transform: translate(0, -50%) rotate(45deg);
  }
  .gh-hamb--with-label.is-open .gh-hamb-bar:nth-child(2) {
    transform: translate(0, -50%) rotate(-45deg);
  }
  .gh-hamb-bar {
    position: absolute; left: 50%; top: 50%;
    width: 22px; height: 1.6px;
    background: var(--v2-ink);
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.55, 0.05, 0.35, 1), top 0.22s cubic-bezier(0.55, 0.05, 0.35, 1);
    transform: translate(-50%, 0);
    /* Idle &quot;puste&quot;-animasjon: bredden krymper og vokser så strekene
       føles levende uten å være masete. De to strekene puster i
       motfase (delay -2s på den nederste) som gir en subtil
       wave-effekt — som om hamburgeren venter på å bli klikket. */
    animation: gh-hamb-breathe 4s ease-in-out infinite;
  }
  .gh-hamb-bar:nth-child(1) { top: calc(50% - 4px); }
  .gh-hamb-bar:nth-child(2) { top: calc(50% + 4px); animation-delay: -2s; }
  @keyframes gh-hamb-breathe {
    0%, 100% { width: 22px; }
    50% { width: 16px; }
  }
  /* Hover: strekene strammer seg sammen og holder posisjon — som om
     hamburgeren responderer på fokuset. Pause på animasjonen + lock
     bredden til full ute-utstrekning. */
  .gh-hamb:hover .gh-hamb-bar {
    animation-play-state: paused;
    width: 22px;
  }
  /* Når menyen er åpen blir strekene til X — ingen pust her. */
  .gh-hamb.is-open .gh-hamb-bar { animation: none; width: 22px; }
  .gh-hamb.is-open .gh-hamb-bar:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
  .gh-hamb.is-open .gh-hamb-bar:nth-child(2) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .gh-hamb-bar { animation: none; width: 22px; }
  }

  /* ============================================================
     MEGA MENU
     ============================================================ */
  .gh-mega {
    position: fixed; inset: 0;
    z-index: 200;
    background: var(--v2-ink);
    overflow-y: auto;
    color: var(--v2-paper);
    /* Backdrop-fade på åpning. Innholdet får sin egen cascade per
       element under, så selve containeren bare slører bakgrunnen inn. */
    animation: gh-mega-bg-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes gh-mega-bg-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* iOS-vibe: hvert element kommer fra og går til hamburger-knappen
     i øvre høyre hjørne. Bevegelsen er diagonal (translateX + ned-til-
     opp translateY) + scale, så elementene &quot;kollapser inn i&quot; og
     &quot;vokser ut fra&quot; knappen. Hvert element har sitt eget transform-
     origin for å forsterke retningen visuelt. */
  .gh-mega-top,
  .gh-mega-bio-section,
  .gh-mega .gh-tile {
    transform-origin: top right;
  }

  /* ÅPNE — elementer vokser ut fra hamburgeren, bottom-to-top cascade.
     Hver tile har --i (0 = øverst) og arver --tile-count fra .gh-mega.
     Delay regnes fra bunnen — calc skalerer cascaden med antall tiles,
     så topp-tilen aldri står stille slik hardkodet nth-child gjorde.
     Bio (langt fra knappen på desktop) får større reise enn nær-
     elementer. Spring-easing gir liten overshoot ved landing. */
  .gh-mega .gh-mega-bio-section {
    animation: gh-mega-emerge-far 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
  }
  .gh-mega .gh-tile {
    animation: gh-mega-emerge 0.26s cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(0.14s + (var(--tile-count) - 1 - var(--i)) * 0.06s) both;
  }
  .gh-mega .gh-mega-top {
    animation: gh-mega-emerge-near 0.24s cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(0.14s + var(--tile-count) * 0.06s) both;
  }
  /* Tre tier&#x27;er av bevegelse — graden samsvarer med hvor langt fra
     hamburgeren elementet sitter visuelt. */
  @keyframes gh-mega-emerge-near {
    from { opacity: 0; transform: translate(28px, -16px) scale(0.92); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
  }
  @keyframes gh-mega-emerge {
    from { opacity: 0; transform: translate(56px, -32px) scale(0.85); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
  }
  @keyframes gh-mega-emerge-far {
    from { opacity: 0; transform: translate(96px, -56px) scale(0.72); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
  }

  /* LUKK — elementer kollapser tilbake mot hamburgeren, top-to-bottom.
     Wordmark og bio leder, tiles cascader nedover via --i. Exit-curve
     er strammere (ingen overshoot inn mot knappen). Backdrop venter til
     siste tile har kollapset før den fader — delay-en skalerer med
     --tile-count så ingen tile blir klippet. */
  .gh-mega.is-closing {
    animation: gh-mega-bg-out 0.20s ease-out
      calc(0.28s + (var(--tile-count) - 1) * 0.06s) forwards;
  }
  @keyframes gh-mega-bg-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  .gh-mega.is-closing .gh-mega-top {
    animation: gh-mega-collapse-near 0.22s cubic-bezier(0.5, 0, 0.75, 0) 0s forwards;
  }
  .gh-mega.is-closing .gh-tile {
    animation: gh-mega-collapse 0.22s cubic-bezier(0.5, 0, 0.75, 0)
      calc(0.06s + var(--i) * 0.06s) forwards;
  }
  .gh-mega.is-closing .gh-mega-bio-section {
    /* Bio leder eksiten sammen med wordmarken — den er den største
       blokka og må aldri sitte stille mens resten cascader ut. */
    animation: gh-mega-collapse-far 0.30s cubic-bezier(0.5, 0, 0.75, 0) 0.04s forwards;
  }
  @keyframes gh-mega-collapse-near {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to   { opacity: 0; transform: translate(32px, -18px) scale(0.88); }
  }
  @keyframes gh-mega-collapse {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to   { opacity: 0; transform: translate(72px, -40px) scale(0.78); }
  }
  @keyframes gh-mega-collapse-far {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to   { opacity: 0; transform: translate(120px, -72px) scale(0.62); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gh-mega,
    .gh-mega .gh-mega-bio-section,
    .gh-mega .gh-tile,
    .gh-mega .gh-mega-top,
    .gh-mega.is-closing,
    .gh-mega.is-closing .gh-mega-bio-section,
    .gh-mega.is-closing .gh-tile,
    .gh-mega.is-closing .gh-mega-top {
      animation: none;
    }
    .gh-mega.is-closing { opacity: 0; }
  }

  .gh-mega-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px clamp(24px, 5vw, 64px) 48px;
    display: grid; gap: 32px;
  }

  .gh-mega-close {
    position: fixed;
    top: 18px; right: 28px;
    appearance: none; cursor: pointer; border: 0;
    background: transparent;
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    transition: background 0.15s ease;
    z-index: 201;
  }
  .gh-mega-close:hover { background: rgba(255,255,255,0.08); }

  /* Desktop: 2-col — left column stacks bio then chat, right column holds
     the menu spanning both rows. Mobile collapses to a single column and
     reorders so the menu is the first thing a visitor sees. */
  .gh-mega-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: &quot;bio menu&quot;;
    column-gap: 48px;
    row-gap: 24px;
    align-items: start;
  }
  .gh-mega-bio-section { grid-area: bio; display: flex; gap: 20px; }
  .gh-mega-menu { grid-area: menu; align-self: stretch; }

  .gh-avatar-link {
    flex-shrink: 0;
    border-radius: 50%;
    line-height: 0;
    transition: transform 0.15s ease;
  }
  .gh-avatar-link:hover { transform: scale(1.04); }
  .gh-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
    display: block;
  }
  .gh-kicker {
    font-family: var(--v2-font-mono);
    font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 8px;
  }
  .gh-mega-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 16px;
  }
  .gh-mega-bio {
    font-size: 15.5px;
    color: rgba(255,255,255,0.70);
    line-height: 1.55;
    max-width: 56ch;
    margin: 0 0 18px;
  }
  .gh-mega-bio a {
    color: var(--v2-mint-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .gh-mega-meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  /* Hver rad er sin egen flex-container med wrap. Rad 1 holder LinkedIn +
     Avtal møte sammen (alltid på én linje med mindre den ene chipen er
     bredere enn containeren). Rad 2 holder e-post / tlf / chat. På
     bredere oppsett (desktop megameny) får begge rader plass; når den
     samlede bredden ikke holder, deler de seg pent uten at LinkedIn-paret
     mister sin kobling til kontakt-CTA-en. justify-content: flex-start
     sikrer venstrealignment selv ved wrap. */
  .gh-mega-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    width: 100%;
  }
  .gh-linkedin {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: var(--v2-linkedin); color: #fff;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s ease;
  }
  .gh-linkedin:hover { transform: translateY(-1px); }
  .gh-contact-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .gh-contact-chip svg { flex-shrink: 0; opacity: 0.85; }
  .gh-contact-chip:hover svg { opacity: 1; }
  .gh-contact-chip:hover { border-color: rgba(255,255,255,0.40); background: rgba(255,255,255,0.06); }
  .gh-contact-chip--cta {
    cursor: pointer;
    font-family: inherit;
    background: var(--v2-mint-accent);
    color: var(--v2-ink);
    border-color: transparent;
    font-weight: 600;
  }
  .gh-contact-chip--cta:hover {
    background: var(--v2-mint-accent);
    border-color: transparent;
    filter: brightness(1.05);
  }

  /* Chat-kort — løftes svakt over den mørke megameny-bg-en. På desktop
     forskyves kortet med avatar-bredden (72px) + gap (20px) så det aligner
     med bio-tekstkolonnen over, ikke med avataren. */
  .gh-chatcard {
    display: flex; flex-direction: column; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-left: 92px;
    align-self: start;
    max-width: 56ch;
  }
  .gh-chatcard-head { display: flex; align-items: center; gap: 12px; }
  .gh-chatcard-head img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
  .gh-chatcard-name { font-size: 13.5px; font-weight: 600; color: #fff; }
  .gh-chatcard-status {
    font-size: 11px; color: rgba(255,255,255,0.55);
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 1px;
  }
  .gh-dot-green {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--v2-dot-green);
    box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
  }
  .gh-chatcard-blurb {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .gh-chatcard-cta {
    appearance: none;
    cursor: pointer;
    border: 0;
    background: var(--v2-mint-accent);
    color: var(--v2-ink);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 2px;
    box-shadow: 0 6px 16px rgba(34,197,94,0.16);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  }
  .gh-chatcard-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(34,197,94,0.24);
  }
  .gh-chatcard-cta:active { transform: translateY(0); }
  .gh-chatcard-cta &gt; span[aria-hidden=&quot;true&quot;] {
    font-size: 16px;
    transition: transform 0.15s ease;
  }
  .gh-chatcard-cta:hover &gt; span[aria-hidden=&quot;true&quot;] {
    transform: translateX(2px);
  }

  /* Menu — vertical stack in the right column on desktop, first block on mobile.
     Borders som tidligere lå på wrapperen er flyttet til første/siste
     tile, så hele rekken inkl. topp- og bunnlinjene cascader ut sammen
     med tilene under close-animasjonen. */
  .gh-mega-menu {
    display: flex;
    flex-direction: column;
  }
  .gh-tile {
    display: block;
    text-decoration: none;
    color: var(--v2-paper);
    padding: 18px 24px;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s ease;
  }
  .gh-tile:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
  .gh-tile:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
  .gh-tile:hover { background: rgba(255,255,255,0.04); }
  /* Tittel + pil deler rad så lufta over og under tile-en blir lik —
     pilen er aldri alene på en tom topplinje. baseline-align gjør at
     pil-glyfen sitter på samme baseline som tittelen. */
  .gh-tile-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
  }
  .gh-tile-arrow {
    font-size: 18px;
    color: var(--v2-mint-accent);
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
  }
  .gh-tile:hover .gh-tile-arrow { transform: translateX(3px); opacity: 1; }
  .gh-tile-title {
    font-size: 22px; font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .gh-tile-icon {
    color: var(--v2-mint-accent);
    flex-shrink: 0;
  }
  .gh-tile-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.60);
    line-height: 1.5;
  }
  /* &quot;Kun for deg&quot;-pille — sitter inline rett etter brief-tittelen så det
     er åpenbart at lenken er privat for mottakeren, men uten å introdusere
     en visuell separasjon som dividerer tile-en fra resten av menyen. */
  .gh-tile-tag {
    font-family: var(--v2-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-chat-dark);
    background: var(--v2-mint-accent);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 10px;
    align-self: center;
  }

  /* Top strip i megamenyen — kompakt brand-header med wordmark og hjem-
     ikon. Fungerer både som visuell identitet og som hjem-snarvei (siden
     &quot;Hjem&quot;-tile er fjernet til fordel for et mindre, brand-integrert
     ikon). Vises på både desktop og mobil. */
  .gh-mega-top {
    display: flex;
    align-items: center;
    padding: 0 4px;
    margin-bottom: 32px;
  }
  .gh-mega-wordmark-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 8px;
    transition: background 0.15s ease;
  }
  .gh-mega-wordmark-link:hover { background: rgba(255,255,255,0.05); }
  .gh-mega-home {
    color: var(--v2-mint-accent);
    flex-shrink: 0;
  }
  .gh-mega-wordmark {
    font-family: &#x27;Geist&#x27;, ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--v2-paper);
  }
  .gh-mega-wordmark-tld { color: var(--v2-dot-green); }

  @media (max-width: 900px) {
    .gh-mega-layout {
      grid-template-columns: 1fr;
      grid-template-areas:
        &quot;menu&quot;
        &quot;bio&quot;;
      row-gap: 52px;
    }
    .gh-mega-inner {
      padding: 28px clamp(20px, 5vw, 64px) 40px;
      gap: 24px;
    }
    .gh-mega-top { padding: 0 20px; }
    /* Linjer bio-innholdet med tile-innholdet ved å gi seksjonen samme
       horisontale padding som tilene har. */
    .gh-mega-bio-section { padding: 0 20px; }
    .gh-tile { padding: 16px 20px; }
    /* Beskrivelsene under tile-titlene skjules på mobil — tittelen alene
       er nok der hver tile er en distinkt seksjon. */
    .gh-tile-desc { display: none; }
  }
  @media (max-width: 620px) {
    .gh-nav { padding: 12px 16px; }
    /* Skjul breadcrumb på mobil — wordmark &quot;hj.&quot; står alene. */
    .gh-breadcrumb { display: none; }
    .gh-composer { gap: 6px; padding: 4px 5px 4px 4px; }
    .gh-composer__avatar { width: 28px; height: 28px; }
    .gh-composer__send { width: 28px; height: 28px; }
    .gh-composer__input { font-size: 13px; }
    .gh-pill { padding: 5px 6px 5px 12px; gap: 6px; font-size: 12px; }
    .gh-mega-inner { padding: 24px 16px 32px; }
    .gh-mega-top { padding: 0 16px; }
    .gh-mega-bio-section { padding: 0 16px; flex-direction: column; gap: 12px; }
    .gh-tile { padding: 14px 16px; }
    .gh-avatar { width: 60px; height: 60px; }
  }
</style><section class="ds-hero" aria-labelledby="ds-hero-display"><div class="shell"><div class="ds-hero__signature"><div class="ds-hero__portrait"><img src="/haakon.jpg" alt="Haakon Jensen" draggable="false"/></div><div class="ds-hero__sig-text"><div class="ds-hero__sig-name">Haakon Jensen</div><div class="ds-hero__sig-role">Produkt · Vekst · AI · Gjennomføring</div></div></div><h1 id="ds-hero-display" class="display ds-hero__display">Når du trenger noen som har <em>gjort det før</em>.
</h1><p class="ds-hero__lede">I 25 år har jeg jobbet med produkter, plattformer og satsninger som har blitt brukt av millioner av mennesker.
</p><div class="ds-hero__trust" aria-label="Erfaring fra"><span class="ds-hero__trust-item">Spleis</span><span class="ds-hero__trust-item">SpareBank 1</span><span class="ds-hero__trust-item">Ski-VM Trondheim 2025</span><span class="ds-hero__trust-item">Sponsee</span></div><div class="ds-hero__help"><div class="eyebrow ds-hero__help-label">Få hjelp til</div><div class="ds-hero__help-grid"><button type="button" class="ds-hero__help-card"><span class="ds-hero__help-card-text">Få fart på produkter og nye satsninger</span><span class="ds-hero__help-card-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"></path></svg></span></button><button type="button" class="ds-hero__help-card"><span class="ds-hero__help-card-text">Ta i bruk AI på en måte som faktisk fungerer</span><span class="ds-hero__help-card-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"></path></svg></span></button><button type="button" class="ds-hero__help-card"><span class="ds-hero__help-card-text">Øke sponsorinntektene</span><span class="ds-hero__help-card-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"></path></svg></span></button></div></div></div><style>
  .ds-hero {
    position: relative;
    /* Topp-padding gir rom under den fixed/blurra header-baren; mobil
       får ekstra luft. */
    padding: clamp(104px, 9vw, 128px) 0 clamp(96px, 10vw, 144px);
    overflow: hidden;
    font-family: var(--f-sans);
  }
  .ds-hero__display {
    will-change: transform, opacity;
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1;
    max-width: 16ch;
  }
  .ds-hero__display em {
    /* mint som fokus-aksent (orange er reservert for tall-eyebrows). */
    color: var(--mint-2);
    font-style: italic;
    font-weight: 800;
  }
  .ds-hero__display em::after {
    background: var(--mint-2);
    opacity: 0.22;
  }

  /* Signatur-blokken — avatar + navn + rolle, over display-headlinen. */
  .ds-hero__signature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(44px, 6vw, 72px);
    will-change: transform, opacity;
  }
  .ds-hero__portrait {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mint-bg);
    border: 1px solid var(--ink-line);
    flex-shrink: 0;
    box-shadow: var(--shadow-pill);
  }
  .ds-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .ds-hero__sig-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ds-hero__sig-name {
    font-family: var(--f-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.1;
  }
  .ds-hero__sig-role {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
  }

  .ds-hero__lede {
    margin: clamp(40px, 5vw, 64px) 0 0;
    font-family: var(--f-sans);
    font-size: var(--t-lede);
    line-height: 1.55;
    font-weight: 400;
    color: var(--ink-soft);
    max-width: 56ch;
    white-space: pre-wrap;
  }
  .ds-hero__lede strong { font-weight: 700; color: var(--ink); }
  .ds-hero__lede em { font-style: italic; color: var(--accent); font-weight: 600; }

  /* Statisk tillit-stripe under lede — mono, uppercase, accent-prikk-
     separator. Dashed border-top/bottom gir samme &quot;data-strip&quot;-følelse
     som proof-marqueen tidligere. Skjules på mobil — ProofGrid lenger
     ned dekker selskaps-historikken med fulle logoer. */
  .ds-hero__trust {
    margin: clamp(28px, 4vw, 40px) 0 0;
    padding: 16px 0;
    border-top: 1px dashed var(--ink-line);
    border-bottom: 1px dashed var(--ink-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .ds-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .ds-hero__trust-item:not(:last-child)::after {
    content: &quot;&quot;;
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 1px;
  }
  @media (max-width: 720px) {
    .ds-hero__trust { display: none; }
  }

  /* &quot;Få hjelp til&quot; — tre kompakte CTA-kort. Samlet i en avgrenset
     bredde (ikke full shell) så de leser som ett fokusert valg, ikke
     spredt utover. Klikk serverer et scripted svar i sidepanelet og
     sender brukeren til /tjenester. */
  .ds-hero__help {
    margin-top: clamp(44px, 5.5vw, 68px);
    max-width: 980px;
    will-change: transform;
  }
  .ds-hero__help-label {
    margin: 0 0 16px;
  }
  .ds-hero__help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.2vw, 16px);
  }
  @media (max-width: 860px) {
    .ds-hero__help-grid { grid-template-columns: 1fr; }
  }

  /* Kortet leser som en knapp: solid hvit flate, hårfin kant, mild
     hvile-skygge (løftet objekt) og en mørk fylt pil-knapp. */
  .ds-hero__help-card {
    appearance: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--f-sans);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 150px;
    padding: clamp(18px, 1.8vw, 22px);
    background: var(--surface);
    border: 1px solid var(--ink-line);
    border-radius: 16px;
    color: var(--ink);
    box-shadow: 0 6px 22px -16px rgba(13, 31, 45, 0.28);
    transition:
      transform var(--t-med) var(--ease),
      border-color var(--t-med) var(--ease),
      box-shadow var(--t-med) var(--ease);
  }
  .ds-hero__help-card:hover {
    transform: translateY(-4px);
    border-color: var(--mint-2);
    box-shadow: 0 26px 46px -24px rgba(13, 31, 45, 0.36);
  }
  .ds-hero__help-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  .ds-hero__help-card:active { transform: translateY(-1px); }
  .ds-hero__help-card-text {
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }
  /* Pil-knapp — mørk fylt i ro (utvetydig &quot;trykk her&quot;), accent + rotasjon
     på hover (samme bevegelse som AskBar-ens send-knapp). */
  .ds-hero__help-card-arrow {
    margin-top: auto;
    align-self: flex-end;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    display: grid;
    place-items: center;
    transition:
      background var(--t-med) var(--ease),
      color var(--t-med) var(--ease),
      transform var(--t-med) var(--ease);
  }
  .ds-hero__help-card-arrow svg { width: 18px; height: 18px; }
  .ds-hero__help-card:hover .ds-hero__help-card-arrow {
    background: var(--accent);
    color: var(--accent-ink);
    transform: rotate(-12deg);
  }

  /* Stablet (mobil): kortet blir en kompakt rad — tekst + pil på samme
     linje, så det ikke blir høye, halvtomme kort. Plassert etter base-
     reglene så media-overstyringen faktisk vinner på kildeorden. */
  @media (max-width: 860px) {
    .ds-hero__help-card {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 0;
    }
    .ds-hero__help-card-arrow {
      margin-top: 0;
      align-self: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ds-hero__help-card,
    .ds-hero__help-card:hover,
    .ds-hero__help-card-arrow,
    .ds-hero__help-card:hover .ds-hero__help-card-arrow { transform: none; }
  }
</style></section><section id="trent-pa" class="ds-proof" aria-labelledby="ds-proof-try-title"><div class="shell"><div class="ds-proof__try" data-reveal="true"><div class="eyebrow">Haakon AI</div><h2 id="ds-proof-try-title" class="ds-proof__try-title">Prøv <em>Haakon AI</em></h2><p class="ds-proof__try-lede">Haakons digitale tvilling — preppet på 25 år med prosjekter, skriverier og rådgivning. Beskriv noe du står i, så svarer den med utgangspunkt i hva Haakon ville gjort.</p><div class="ds-proof__try-bar"><form class="ds-askbar"><span class="ds-askbar__dot" aria-hidden="true"></span><input class="ds-askbar__input" placeholder="Spør Haakon AI om noe…" aria-label="Spør Haakon" value=""/><button class="ds-askbar__send" type="submit" aria-label="Send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"></path></svg></button></form><style>
  .ds-askbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1.5px solid var(--ink-edge);
    border-radius: var(--r-pill);
    padding: 8px 8px 8px 24px;
    box-shadow: var(--shadow-card);
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
  }
  .ds-askbar:focus-within {
    border-color: var(--ink);
    box-shadow:
      0 0 0 6px var(--mint-bg),
      0 18px 50px -20px rgba(13, 31, 45, 0.22);
  }
  .ds-askbar__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-family: var(--f-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.03em;
    box-shadow: 0 2px 6px rgba(13, 31, 45, 0.18);
  }
  /* Status-dot — speiler SideChatPanel-composeren (orange #D97706 +
     soft halo). Bruker &#x27;dot&#x27; når AskBar er kontekstuell (&quot;AI klar&quot;)
     fremfor identitets-bærende. */
  .ds-askbar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D97706;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14);
    flex-shrink: 0;
    margin: 0 6px 0 2px;
  }
  .ds-askbar__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    font: 500 17px/1.4 var(--f-sans);
    color: var(--ink);
    padding: 12px 0;
    letter-spacing: -0.01em;
    min-width: 0;
  }
  .ds-askbar__input::placeholder { color: var(--ink-faint); }
  .ds-askbar__send {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: var(--ink);
    color: var(--paper);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    transition:
      transform var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      color var(--t-fast) var(--ease);
    flex-shrink: 0;
  }
  .ds-askbar__send:hover {
    background: var(--accent);
    color: var(--accent-ink);
    transform: rotate(-12deg);
  }
  .ds-askbar__send svg { width: 18px; height: 18px; }
</style></div><div class="ds-proof__try-chips"><div class="ds-askchips ds-askchips--wrap" role="list"><button type="button" class="ds-askchip" role="listitem"><span class="ds-askchip__icon" aria-hidden="true">?</span><span class="ds-askchip__text">Vi bygger mye, men lite flytter seg</span><span class="ds-askchip__arrow" aria-hidden="true">↗</span></button><button type="button" class="ds-askchip" role="listitem"><span class="ds-askchip__icon" aria-hidden="true">?</span><span class="ds-askchip__text">Vi vet at AI er viktig, men hvor starter vi?</span><span class="ds-askchip__arrow" aria-hidden="true">↗</span></button><button type="button" class="ds-askchip" role="listitem"><span class="ds-askchip__icon" aria-hidden="true">?</span><span class="ds-askchip__text">Produktet fungerer, men veksten uteblir</span><span class="ds-askchip__arrow" aria-hidden="true">↗</span></button></div><style>
  .ds-askchips {
    display: flex;
    gap: 10px;
  }
  .ds-askchips--wrap { flex-wrap: wrap; }
  /* Stack-mode: én chip per linje, hver chip strekker seg til full
     container-bredde. Brukes i hero så chip-tekster aldri krympes til
     to linjer eller pakkes inn. Selve chipen rettes opp via
     justify-content: flex-start så pil + tekst sitter venstre-justert. */
  .ds-askchips--stack {
    flex-direction: column;
    align-items: stretch;
  }
  .ds-askchips--stack .ds-askchip {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 18px 14px 14px;
  }
  .ds-askchips--stack .ds-askchip__text {
    flex: 1;
    text-align: left;
  }
  .ds-askchip {
    appearance: none;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--ink-line);
    border-radius: var(--r-pill);
    padding: 10px 16px 10px 12px;
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition:
      border-color var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      color var(--t-fast) var(--ease),
      transform var(--t-fast) var(--ease);
  }
  .ds-askchip:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-1px);
  }
  .ds-askchip__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-deep);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .ds-askchip:hover .ds-askchip__icon {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .ds-askchip__arrow {
    display: inline-block;
    margin-left: 2px;
    color: var(--ink-faint);
    transition: transform 200ms var(--ease), color var(--t-fast) var(--ease);
  }
  .ds-askchip:hover .ds-askchip__arrow {
    transform: translate(3px, -3px);
    color: currentColor;
  }
</style></div></div><div class="ds-proof__head"><h3 id="ds-proof-title" class="ds-proof__title" data-reveal="true">Svarene bygger på erfaring fra…</h3></div><div class="ds-proof__grid"><a href="/om-haakon/spleis" class="ds-proof-card" data-reveal="true" data-reveal-delay="1" data-cell-key="spleis"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/spleis-color.png" alt="Spleis" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Fra strikk og binders til folkefinansiering</h3><p class="ds-proof-card__body">Hele Norges innsamlingsplattform. Skalerte fra null til 70 % kjennskap. Over 1 milliard innsamlet.</p></a><a href="/om-haakon/skivm" class="ds-proof-card" data-reveal="true" data-reveal-delay="2" data-cell-key="skivm"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/skivm.svg" alt="SKI-VM 2025" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Tiårets største folkefest</h3><p class="ds-proof-card__body">229 000 billetter. Utsolgte sponsorpakker. 622 MNOK i ringvirkninger.</p></a><a href="/om-haakon/sparebank1" class="ds-proof-card" data-reveal="true" data-reveal-delay="3" data-cell-key="sparebank1"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/sparebank1.svg" alt="SpareBank 1" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Fra prosjekt til produkt</h3><p class="ds-proof-card__body">Ny digital distribusjonsflate for 16 banker; strategi, konsept, innhold, teknisk plattform, organisering.</p></a><a href="/om-haakon/sponsee" class="ds-proof-card" data-reveal="true" data-reveal-delay="4" data-cell-key="sponsee"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/sponsee.png" alt="Sponsee" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Plattform for sponsorarbeid</h3><p class="ds-proof-card__body">Bygget på læringen fra Ski-VM. En del av Mollo, startet hos Antler.</p></a><a href="/om-haakon/fixrate" class="ds-proof-card" data-reveal="true" data-reveal-delay="5" data-cell-key="fixrate"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/fixrate-on-light.svg" alt="Fixrate" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Produktledelse i fintech</h3><p class="ds-proof-card__body">Produktledelse, strategi og arbeidsmetoder hos en plattform som da hadde 26 milliarder NOK under forvaltning.</p></a><a href="/om-haakon/ntnu-indok" class="ds-proof-card" data-reveal="true" data-reveal-delay="1" data-cell-key="ntnu-indok"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/NTNU-logo.svg" alt="NTNU Indøk" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Industriell økonomi og teknologiledelse</h3><p class="ds-proof-card__body">Master i teknologi. Skjæringspunktet mellom teknologi, økonomi og ledelse. Uteksaminert i 2010.</p></a><a href="/om-haakon/arctic-design" class="ds-proof-card" data-reveal="true" data-reveal-delay="2" data-cell-key="arctic-design"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/arctic-design.png" alt="Arctic Design" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Startet webbyrå i 2002</h3><p class="ds-proof-card__body">Digitalbyrå i Finnmark. 40+ kunder i Øst-Finnmark, blant dem Varanger.com, Aker Barents Base og Kontoret for voldsoffererstatning.</p></a><a href="/om-haakon/dollar-brothers" class="ds-proof-card" data-reveal="true" data-reveal-delay="3" data-cell-key="dollar-brothers"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/dollar-brothers.png" alt="DOLLAR BROTHERS" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">YouTube før YouTube</h3><p class="ds-proof-card__body">Dollar Brothers ble startet med to kompiser i Vardø da jeg var 16. Flere oppdrag for TV 2.</p></a><a href="/photo-vardo" class="ds-proof-card" data-reveal="true" data-reveal-delay="4" data-cell-key="vardo"><div class="ds-proof-card__top"><div class="ds-proof-card__logo"><img src="/logos/vardo.svg" alt="Oppvekst" draggable="false"/></div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Cedant Tenebræ Soli</h3><p class="ds-proof-card__body">La mørket vike for solen var slagordet til byen jeg vokste opp i. Ei lita øy i Barentshavet.</p></a><a class="ds-proof-card ds-proof-card--utforsk" href="/om-haakon" data-reveal="true" data-reveal-delay="5"><div class="ds-proof-card__top"><div class="eyebrow">Mer om meg</div><div class="ds-proof-card__arrow" aria-hidden="true">→</div></div><h3 class="ds-proof-card__headline">Om Haakon →</h3><p class="ds-proof-card__body">Hele reisen fra Vardø til i dag — selskap, prosjekter, læringer.</p></a></div></div><style>
  .ds-proof {
    padding: var(--section-y) 0 clamp(48px, 8vw, 96px);
    font-family: var(--f-sans);
  }
  /* &quot;Prøv Haakon AI&quot; — venstrejustert single-kolonne fokus-panel.
     Matcher rytmen til heroen og resten av siden (alt venstrejustert).
     Max-width holder kolonnen lesbar. */
  .ds-proof__try {
    max-width: 720px;
    margin: 0 0 clamp(56px, 8vw, 104px);
  }
  .ds-proof__try-title {
    font-family: var(--f-sans);
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 14px 0 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .ds-proof__try-title em {
    font-style: italic;
    font-weight: 800;
    color: var(--mint-2);
  }
  .ds-proof__try-lede {
    margin: 16px 0 0;
    font-family: var(--f-sans);
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 50ch;
  }
  .ds-proof__try-bar {
    margin-top: clamp(24px, 3vw, 32px);
  }
  /* Chips: høyrejustert kolonne mot AskBar-ens høyrekant, naturlig
     bredde — teksten passer i pillen. Tokens speiler sidepanelets
     suggestion-chips. */
  .ds-proof__try-chips {
    margin-top: 18px;
  }
  .ds-proof__try-chips .ds-askchips,
  .ds-proof__try-chips .ds-askchips--wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  .ds-proof__try-chips .ds-askchip {
    background: var(--suggestion-bg);
    border-color: var(--suggestion-border);
    color: var(--suggestion-fg);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .ds-proof__try-chips .ds-askchip__text { white-space: nowrap; }
  .ds-proof__try-chips .ds-askchip:hover {
    background: var(--user-bubble-bg);
    border-color: var(--user-bubble-bg);
    color: #fff;
    transform: translateY(-1px);
  }
  .ds-proof__try-chips .ds-askchip__icon { display: none; }
  .ds-proof__try-chips .ds-askchip__arrow { color: var(--suggestion-fg); }
  .ds-proof__try-chips .ds-askchip:hover .ds-askchip__arrow { color: #fff; }
  /* Mobil: chips stables full-bredde med wrap, venstrejustert for
     komfortabel lesing på trange viewports. */
  @media (max-width: 640px) {
    .ds-proof__try-chips .ds-askchips,
    .ds-proof__try-chips .ds-askchips--wrap {
      align-items: stretch;
      gap: 10px;
    }
    .ds-proof__try-chips .ds-askchip {
      white-space: normal;
      text-align: left;
      justify-content: space-between;
      line-height: 1.35;
    }
    .ds-proof__try-chips .ds-askchip__text { white-space: normal; }
  }

  /* Demotert under-heading rett over erfarings-grid&#x27;et. */
  .ds-proof__head {
    margin-bottom: clamp(24px, 3.5vw, 40px);
  }
  .ds-proof__title {
    max-width: 30ch;
    font-family: var(--f-sans);
    font-size: clamp(19px, 2.1vw, 28px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
  }
  /* Breakpoints 5 → 4 → 3 → 2 → 1: hver kolonne passer ~220–280px,
     så vi går ned ett steg ved hver effektive breddesteg. Side-panelet
     stjeler 400px på desktop via SitePushFrame paddingRight, så grid&#x27;et
     krymper sammen med &quot;tilgjengelig&quot; plass — IKKE viewport. Vi velger
     viewport-breakpoints som matcher de mest sannsynlige effektive
     breddene (panel åpent + lukket). */
  /* Transparent celler: container har border rundt + cellene har
     border-right og border-bottom som lager 1px-linjer mellom dem.
     Body-mint-gradienten skinner gjennom alle cellene. Vi nuller siste
     kolonne / siste rad sine borders så ytre kant ikke dobles av
     container-border. Breakpoint-justeringer av &quot;siste kolonne&quot; gjøres
     med :nth-child-regler per kolonne-antall. */
  .ds-proof__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--ink-line);
  }
  @media (max-width: 1400px) { .ds-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 1100px) { .ds-proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 720px)  { .ds-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px)  { .ds-proof__grid { grid-template-columns: minmax(0, 1fr); } }

  /* Transparente celler — body-mint-gradient skinner gjennom. Hover
     gir outline + accent-tekst, ingen flate-flipp. */
  .ds-proof-card {
    background: transparent;
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    padding: clamp(20px, 1.8vw, 24px) clamp(18px, 1.6vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    transition:
      box-shadow var(--t-med) var(--ease),
      transform var(--t-med) var(--ease);
    min-height: 200px;
    text-align: left;
    isolation: isolate;
  }
  /* Siste kolonne — droppe border-right (container tar over) per
     bredde-breakpoint. */
  @media (min-width: 1401px) {
    .ds-proof-card:nth-child(5n) { border-right: 0; }
  }
  @media (min-width: 1101px) and (max-width: 1400px) {
    .ds-proof-card:nth-child(4n) { border-right: 0; }
  }
  @media (min-width: 721px) and (max-width: 1100px) {
    .ds-proof-card:nth-child(3n) { border-right: 0; }
  }
  @media (min-width: 481px) and (max-width: 720px) {
    .ds-proof-card:nth-child(2n) { border-right: 0; }
  }
  @media (max-width: 480px) {
    .ds-proof-card { border-right: 0; }
  }
  .ds-proof-card:hover {
    /* Hvit flate på hover — løfter aktivt kort opp fra mint-bakgrunnen
       og gjør klikkbarheten åpenbar. Kombineres med inset shadow så
       kortet får tydelig kant også. */
    background: var(--paper, #ffffff);
    box-shadow: inset 0 0 0 1px var(--ink-edge);
    z-index: 1;
  }
  .ds-proof-card:hover .ds-proof-card__arrow {
    transform: translateX(4px);
    opacity: 1;
    color: var(--accent);
  }
  .ds-proof-card:hover .ds-proof-card__headline { color: var(--accent); }

  .ds-proof-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  /* Logo-row har FAST høyde (32px) så title-baseline aldri shifter
     mellom celler — uansett hva slags logo vi viser. Containere med
     overflow: visible lar img&#x27;en være litt større/mindre enn 32px
     uten å påvirke layouten under. Default img-høyde er 26px; per
     cell-key justerer vi opp/ned visuelt mens grid-radene står stille. */
  .ds-proof-card__logo {
    height: 32px;
    display: flex;
    align-items: center;
    overflow: visible;
  }
  /* Eksplisitt height på img-elementet (ikke bare max-height) sikrer at
     SVGer uten intrinsic dimensjoner — kun viewBox, ingen width/height-
     attr — faktisk får render-størrelse i flex-containere. */
  .ds-proof-card__logo img {
    height: 26px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
  }
  /* Per-cell logo-overrides: noen logoer har større visuell tetthet og
     trenger litt mer/mindre høyde for å oppleves som &quot;samme størrelse&quot;
     visuelt. Container-høyden (32px) holdes uansett, så title-rad
     starter på samme plass i alle celler — img&#x27;ene stikker litt opp/ned
     via overflow: visible. */
  .ds-proof-card[data-cell-key=&quot;spleis&quot;] .ds-proof-card__logo img,
  .ds-proof-card[data-cell-key=&quot;vardo&quot;] .ds-proof-card__logo img {
    height: 36px;
  }
  .ds-proof-card[data-cell-key=&quot;ntnu-indok&quot;] .ds-proof-card__logo img {
    height: 22px;
  }
  .ds-proof-card[data-cell-key=&quot;sponsee&quot;] .ds-proof-card__logo img,
  .ds-proof-card[data-cell-key=&quot;fixrate&quot;] .ds-proof-card__logo img {
    height: 24px;
  }
  .ds-proof-card[data-cell-key=&quot;skivm&quot;] .ds-proof-card__logo img {
    height: 38px;
    max-width: 110px;
  }
  .ds-proof-card[data-cell-key=&quot;dollar-brothers&quot;] .ds-proof-card__logo img {
    height: 32px;
  }
  .ds-proof-card[data-cell-key=&quot;arctic-design&quot;] .ds-proof-card__logo img {
    height: 30px;
  }
  .ds-proof-card__wordmark {
    font-family: var(--f-sans);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .ds-proof-card__arrow {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    transition:
      transform var(--t-med) var(--ease),
      opacity var(--t-med) var(--ease),
      color var(--t-med) var(--ease);
    opacity: 0.6;
  }
  .ds-proof-card__headline {
    font-family: var(--f-sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
    color: var(--ink);
    transition: color var(--t-med) var(--ease);
  }
  .ds-proof-card__body {
    font-family: var(--f-sans);
    font-size: var(--t-body-sm);
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
  }
  .ds-proof-card__stats {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ds-proof-card__stat {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }
  .ds-proof-card__stat-num {
    font-family: var(--f-sans);
    font-size: 20px;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-transform: none;
  }

  .ds-proof-card--utforsk {
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .ds-proof-card--utforsk:hover { background: var(--ink-2); }
  .ds-proof-card--utforsk .ds-proof-card__headline {
    color: var(--paper);
    font-size: 26px;
  }
  .ds-proof-card--utforsk:hover .ds-proof-card__headline { color: var(--mint); }
  .ds-proof-card--utforsk .ds-proof-card__body { color: rgba(255, 255, 255, 0.78); }
  .ds-proof-card--utforsk .ds-proof-card__arrow { color: var(--mint); opacity: 1; }
  .ds-proof-card--utforsk .eyebrow { color: var(--mint); }
  [data-theme=&quot;dark&quot;] .ds-proof-card--utforsk { background: var(--surface); color: var(--ink); }
  [data-theme=&quot;dark&quot;] .ds-proof-card--utforsk .ds-proof-card__headline { color: var(--ink); }
  [data-theme=&quot;dark&quot;] .ds-proof-card--utforsk .ds-proof-card__body { color: var(--ink-soft); }
</style></section><section class="ds-tracks" id="tjenester-overblikk"><div class="shell"><div class="ds-tracks__head"><div class="eyebrow">Jobbe sammen?</div><h2 class="ds-tracks__title" data-reveal="true">Når dere trenger noen som har <em>gjort det før</em>.</h2><p class="ds-tracks__lede" data-reveal="true">For å få fart på produktene eller viktige satsninger kan jeg hjelpe på to måter.</p></div><div class="ds-tracks__grid"><article class="ds-track-card" data-reveal="true"><div class="ds-track-card__num"><strong>01</strong> <span>· <!-- -->Med meg direkte</span></div><h3 class="ds-track-card__title">Rådgivning</h3><p class="ds-track-card__body">Få fart på produkter eller satsninger. Jeg har ledet reiser fra 0→1 til 0→100 — alltid hands-on. Strategi uten gjennomføring er ingenting, og omvendt. Bistår i mange faser, vet når andre må ta over.</p><div class="ds-track-card__chips"><span class="ds-track-card__chip">produktleder for leie</span><span class="ds-track-card__chip">produktutvikling</span><span class="ds-track-card__chip">sparring &amp; coaching</span><span class="ds-track-card__chip">strategi &amp; konsept</span><span class="ds-track-card__chip">skalering</span><span class="ds-track-card__chip">struktur &amp; gjennomføring</span><span class="ds-track-card__chip">sponsor- &amp; partnerstrategi</span></div><div class="ds-track-card__actions"><a class="ds-track-card__cta" href="/tjenester/radgivning" data-discover="true">Les mer om rådgivning<span aria-hidden="true">→</span></a><a class="ds-track-card__secondary" href="/kontakt?from=tracks-radgivning" data-discover="true">eller book en uforpliktende prat<span aria-hidden="true">→</span></a></div></article><style>
  /* Transparent bg — kortet sitter allerede på dark island i .ds-tracks,
     så vi trenger ingen ekstra surface-flate. Kun outline-border definerer
     kortets boks; hover legger en lett surface + accent-border. */
  .ds-track-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    transition:
      transform var(--t-med) var(--ease),
      border-color var(--t-fast) var(--ease),
      background var(--t-med) var(--ease);
  }
  .ds-track-card::after {
    content: &quot;&quot;;
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 240px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease);
    pointer-events: none;
  }
  .ds-track-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.04);
  }
  .ds-track-card:hover::after { opacity: 1; }
  [data-theme=&quot;dark&quot;] .ds-track-card {
    border-color: var(--ink-line);
  }
  [data-theme=&quot;dark&quot;] .ds-track-card:hover { background: rgba(13, 31, 45, 0.04); }

  .ds-track-card__num {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    gap: 10px;
  }
  .ds-track-card__num span { color: rgba(255, 255, 255, 0.55); }
  [data-theme=&quot;dark&quot;] .ds-track-card__num span { color: var(--ink-mid); }

  /* Mindre fluid skala så lange ord (&quot;produktledelse&quot;, &quot;digitalisering&quot;)
     ikke renner over kort-bredden ved smale viewports. Lav max og
     lavere vw-mid sørger for at title alltid bryter pent på 2 linjer
     fremfor å overflowe horisontalt. */
  .ds-track-card__title {
    font-family: var(--f-sans);
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0;
    color: var(--paper);
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__title { color: var(--ink); }
  .ds-track-card__title em {
    font-style: italic;
    font-weight: 700;
    color: var(--accent);
  }

  .ds-track-card__body {
    font-family: var(--f-sans);
    font-size: var(--t-body);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.80);
    margin: 0;
    max-width: 38ch;
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__body { color: var(--ink-soft); }

  .ds-track-card__chips {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
  }
  .ds-track-card__chip {
    font-family: var(--f-sans);
    font-size: 13px;
    letter-spacing: 0;
    padding: 8px 14px;
    /* Tydeligere kontrast på dark island bg — heve border-opacity og
       text-color slik at chip-tekstene blir lett lesbare uten å bli
       skrikende hvite. */
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--r-pill);
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__chip {
    border-color: var(--ink-line);
    color: var(--ink-soft);
  }

  /* Actions-rad: primær CTA + valgfri sekundær tekst-link side om side
     (kolonne på smale viewports for å unngå wrap-overflow). */
  .ds-track-card__actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .ds-track-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: var(--r-pill);
    background: var(--mint-2, var(--accent));
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
  }
  .ds-track-card__cta span[aria-hidden] {
    transition: transform var(--t-fast) var(--ease);
  }
  .ds-track-card__cta:hover {
    filter: brightness(1.06);
  }
  .ds-track-card__cta:hover span[aria-hidden] {
    transform: translateX(3px);
  }
  /* Sekundær: dempet tekst-link i mint, pil glir på hover. */
  .ds-track-card__secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mint);
    font-family: var(--f-sans);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--t-fast) var(--ease);
  }
  .ds-track-card__secondary span[aria-hidden] {
    transition: transform var(--t-fast) var(--ease);
  }
  .ds-track-card__secondary:hover {
    opacity: 1;
  }
  .ds-track-card__secondary:hover span[aria-hidden] {
    transform: translateX(3px);
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__secondary { color: var(--accent); }
</style><article class="ds-track-card" data-reveal="true"><div class="ds-track-card__num"><strong>02</strong> <span>· <!-- -->Via Mollo</span></div><h3 class="ds-track-card__title">AI for SMB</h3><p class="ds-track-card__body">Kartlegging og kompetanseheving som tar AI fra prat til praksis hos norske SMB-er. Ferdige opplegg via Mollo — og implementering når det er en match.</p><div class="ds-track-card__chips"><span class="ds-track-card__chip">kartlegging</span><span class="ds-track-card__chip">kompetanseheving</span><span class="ds-track-card__chip">implementering</span></div><div class="ds-track-card__actions"><a class="ds-track-card__cta" href="/tjenester/ai-for-smb" data-discover="true">Les mer om AI for SMB<span aria-hidden="true">→</span></a><a class="ds-track-card__secondary" href="/kontakt?from=tracks-ai" data-discover="true">eller book en uforpliktende prat<span aria-hidden="true">→</span></a></div></article><style>
  /* Transparent bg — kortet sitter allerede på dark island i .ds-tracks,
     så vi trenger ingen ekstra surface-flate. Kun outline-border definerer
     kortets boks; hover legger en lett surface + accent-border. */
  .ds-track-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    transition:
      transform var(--t-med) var(--ease),
      border-color var(--t-fast) var(--ease),
      background var(--t-med) var(--ease);
  }
  .ds-track-card::after {
    content: &quot;&quot;;
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 240px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease);
    pointer-events: none;
  }
  .ds-track-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.04);
  }
  .ds-track-card:hover::after { opacity: 1; }
  [data-theme=&quot;dark&quot;] .ds-track-card {
    border-color: var(--ink-line);
  }
  [data-theme=&quot;dark&quot;] .ds-track-card:hover { background: rgba(13, 31, 45, 0.04); }

  .ds-track-card__num {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    gap: 10px;
  }
  .ds-track-card__num span { color: rgba(255, 255, 255, 0.55); }
  [data-theme=&quot;dark&quot;] .ds-track-card__num span { color: var(--ink-mid); }

  /* Mindre fluid skala så lange ord (&quot;produktledelse&quot;, &quot;digitalisering&quot;)
     ikke renner over kort-bredden ved smale viewports. Lav max og
     lavere vw-mid sørger for at title alltid bryter pent på 2 linjer
     fremfor å overflowe horisontalt. */
  .ds-track-card__title {
    font-family: var(--f-sans);
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0;
    color: var(--paper);
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__title { color: var(--ink); }
  .ds-track-card__title em {
    font-style: italic;
    font-weight: 700;
    color: var(--accent);
  }

  .ds-track-card__body {
    font-family: var(--f-sans);
    font-size: var(--t-body);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.80);
    margin: 0;
    max-width: 38ch;
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__body { color: var(--ink-soft); }

  .ds-track-card__chips {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
  }
  .ds-track-card__chip {
    font-family: var(--f-sans);
    font-size: 13px;
    letter-spacing: 0;
    padding: 8px 14px;
    /* Tydeligere kontrast på dark island bg — heve border-opacity og
       text-color slik at chip-tekstene blir lett lesbare uten å bli
       skrikende hvite. */
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--r-pill);
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__chip {
    border-color: var(--ink-line);
    color: var(--ink-soft);
  }

  /* Actions-rad: primær CTA + valgfri sekundær tekst-link side om side
     (kolonne på smale viewports for å unngå wrap-overflow). */
  .ds-track-card__actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .ds-track-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: var(--r-pill);
    background: var(--mint-2, var(--accent));
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
  }
  .ds-track-card__cta span[aria-hidden] {
    transition: transform var(--t-fast) var(--ease);
  }
  .ds-track-card__cta:hover {
    filter: brightness(1.06);
  }
  .ds-track-card__cta:hover span[aria-hidden] {
    transform: translateX(3px);
  }
  /* Sekundær: dempet tekst-link i mint, pil glir på hover. */
  .ds-track-card__secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mint);
    font-family: var(--f-sans);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--t-fast) var(--ease);
  }
  .ds-track-card__secondary span[aria-hidden] {
    transition: transform var(--t-fast) var(--ease);
  }
  .ds-track-card__secondary:hover {
    opacity: 1;
  }
  .ds-track-card__secondary:hover span[aria-hidden] {
    transform: translateX(3px);
  }
  [data-theme=&quot;dark&quot;] .ds-track-card__secondary { color: var(--accent); }
</style></div></div><style>
  /* Full-bleed dark island: når seksjonen først bryter opp paper-bg,
     skal den ta hele viewport-bredde (også under sidepanelet når det
     er åpent). Vi bruker box-shadow + clip-path-trick fremfor 100vw
     + negative margin — sistnevnte bryter SitePushFrame-pushen og
     dytter innhold under panelet. Box-shadow fyller bg-en visuelt
     uten å endre elementets layout-bredde, og clip-path holder
     overflow horisontal innen viewport. */
  .ds-tracks {
    padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
    background: var(--ink);
    color: var(--paper);
    position: relative;
    font-family: var(--f-sans);
    box-shadow: 0 0 0 100vmax var(--ink);
    clip-path: inset(0 -100vmax);
  }
  /* Glød-laget extends til full viewport-bredde (ikke bare wrapper)
     så accent-radialen ikke skarpt kuttes ved SitePushFrame-paddingRight
     når sidepanelet er åpent. clip-path på .ds-tracks tillater
     pseudo-elementet å rendre utenfor parent-bredden. */
  .ds-tracks::before {
    content: &quot;&quot;;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background:
      radial-gradient(900px 480px at 12% 0%, rgba(140, 232, 190, 0.07), transparent 60%),
      radial-gradient(700px 480px at 88% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
    pointer-events: none;
  }
  [data-theme=&quot;dark&quot;] .ds-tracks {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 0 0 100vmax var(--surface);
  }

  .ds-tracks__head {
    margin-bottom: clamp(48px, 6vw, 72px);
    position: relative;
  }
  .ds-tracks .eyebrow { color: var(--mint); }
  .ds-tracks__title {
    font-family: var(--f-sans);
    font-size: clamp(34px, 4.4vw, 64px);
    line-height: 0.96;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 14px 0 0;
    color: var(--paper);
    max-width: 18ch;
    text-wrap: balance;
  }
  [data-theme=&quot;dark&quot;] .ds-tracks__title { color: var(--ink); }
  .ds-tracks__title em {
    font-style: italic;
    color: var(--mint);
    font-weight: 800;
  }
  /* Lede under tracks-tittelen — kontekst på når Haakon-direkte er
     riktig handling fremfor en AI-agent. Mer dempet farge enn title
     for hierarki, men full kontrast mot dark island. */
  .ds-tracks__lede {
    font-family: var(--f-sans);
    font-size: var(--t-lede);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 18px 0 0;
    max-width: 56ch;
  }
  [data-theme=&quot;dark&quot;] .ds-tracks__lede { color: var(--ink-soft); }

  /* Top-align kortene så title-linjer som tar ulik høyde ikke shifter
     start-baseline. align-items: start; gjør at hver TrackCard starter
     på topp av sin grid-celle. Stretches via TrackCard&#x27;s egen
     flex-column. */
  .ds-tracks__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    position: relative;
    align-items: stretch;
  }
  /* Senker breakpoint til 1024 så grid&#x27;et ikke kollapser like inne i
     sidepanel-åpningens overgang (panel = 400px; effektiv viewport
     skifter dramatisk ved 1280→880 ellers). */
  @media (max-width: 1024px) {
    .ds-tracks__grid { grid-template-columns: minmax(0, 1fr); }
  }
</style></section><section class="ds-contact" id="kontakt"><div class="shell"><div class="ds-contact__sub">Eller bare spør</div><h2 class="ds-contact__title" data-reveal="true">Beskriv et initiativ dere jobber med som <em>MÅ lykkes.</em> Jeg svarer med hva jeg ville gjort først.</h2><form class="ds-contact__form"><div class="ds-contact__bar"><span class="ds-contact__prompt" aria-hidden="true">&gt;_</span><textarea class="ds-contact__input" placeholder="vi skal videre med produktet, men er usikre på neste steg…" rows="1" aria-label="Beskriv hvor dere står"></textarea><button class="ds-contact__send" type="submit" disabled="">Send<span aria-hidden="true">→</span></button></div><div class="ds-contact__expand" aria-hidden="true"><label class="ds-contact__field"><span class="ds-contact__label">Bedrift</span><input type="text" class="ds-contact__field-input" placeholder="Hvilken bedrift?" autoComplete="organization" value=""/></label><label class="ds-contact__field"><span class="ds-contact__label">E-post</span><input type="email" class="ds-contact__field-input" placeholder="navn@bedrift.no" autoComplete="email" value=""/></label></div></form><div class="ds-contact__hint"><a class="ds-contact__hint-link" href="/kontakt" data-discover="true">Send en e-post direkte</a><span class="ds-contact__hint-sep">·</span><a href="mailto:haakon@mollo.no">haakon@mollo.no</a><span class="ds-contact__hint-sep">·</span><a href="tel:+4795103981">+47 951 03 981</a><span class="ds-contact__hint-sep">·</span><a href="https://www.linkedin.com/in/haakonjensen/">LinkedIn</a></div></div><style>
  .ds-contact {
    padding: var(--section-y) 0;
    position: relative;
    font-family: var(--f-sans);
  }
  .ds-contact__sub {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mid);
  }
  .ds-contact__sub::before {
    content: &quot;&quot;;
    display: block;
    width: 28px;
    height: 1px;
    background: var(--ink);
  }
  .ds-contact__title {
    font-family: var(--f-sans);
    font-size: clamp(40px, 6vw, 96px);
    line-height: 0.96;
    letter-spacing: -0.04em;
    font-weight: 700;
    margin: 0 0 clamp(40px, 5vw, 56px);
    text-wrap: balance;
    max-width: 22ch;
    color: var(--ink);
  }
  .ds-contact__title em {
    font-style: italic;
    font-weight: 800;
    color: var(--accent);
  }

  .ds-contact__form {
    max-width: 720px;
  }
  .ds-contact__bar {
    position: relative;
    display: flex;
    /* flex-start så prompt-tegnet og første tekstlinje er topp-justert
       når textarea vokser flere linjer. Send-knappen overstyrer med
       align-self: flex-end så den blir hengende ved bunnen — naturlig
       reach når man kommer til &quot;ferdig&quot;. */
    align-items: flex-start;
    gap: 12px;
    background: var(--surface);
    border: 1.5px solid var(--ink-edge);
    border-radius: 28px;
    padding: 10px 10px 10px 24px;
    box-shadow: var(--shadow-card);
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
  }
  .ds-contact__bar:focus-within {
    border-color: var(--ink);
    box-shadow:
      0 0 0 6px var(--mint-bg),
      0 18px 50px -20px rgba(13, 31, 45, 0.22);
  }
  .ds-contact__prompt {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--accent);
    font-weight: 500;
    /* Aligned med første tekst-linje (textarea har 12px top-padding,
       prompt har samme effective offset via padding-top). */
    padding-top: 14px;
  }
  .ds-contact__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    font: 500 17px/1.4 var(--f-sans);
    color: var(--ink);
    padding: 12px 0;
    min-width: 0;
    /* Auto-resize: JS setter inline height. Skjul scrollbar inntil
       innhold når 240px-cap-en. */
    resize: none;
    overflow-y: auto;
    min-height: 24px;
    max-height: 240px;
    font-family: var(--f-sans);
    line-height: 1.4;
    scrollbar-width: thin;
  }
  .ds-contact__input::-webkit-scrollbar { width: 4px; }
  .ds-contact__input::-webkit-scrollbar-thumb {
    background: var(--ink-edge);
    border-radius: 4px;
  }
  .ds-contact__input::placeholder { color: var(--ink-faint); }
  .ds-contact__send {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 600;
    padding: 0 22px;
    height: 44px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
    flex-shrink: 0;
    /* Stay-at-bottom så textarea kan vokse oppover uten å skyve
       knappen — naturlig sluttposisjon for &quot;trykk send når ferdig&quot;. */
    align-self: flex-end;
  }
  .ds-contact__send:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-ink);
    transform: translateX(2px);
  }
  .ds-contact__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Progressive expand-blokk: hidden by default (max-height 0), fader
     ut idet bruker begynner å skrive. opacity + max-height + padding
     animerer parallelt for et organisk fold-out. */
  .ds-contact__expand {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition:
      max-height 0.32s var(--ease),
      opacity 0.28s var(--ease),
      margin-top 0.32s var(--ease);
  }
  .ds-contact__expand.is-open {
    max-height: 200px;
    opacity: 1;
    margin-top: 14px;
  }
  @media (max-width: 600px) {
    .ds-contact__expand { grid-template-columns: 1fr; }
    .ds-contact__expand.is-open { max-height: 320px; }
  }

  .ds-contact__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ds-contact__label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
    padding-left: 18px;
  }
  .ds-contact__field-input {
    background: var(--surface);
    border: 1.5px solid var(--ink-edge);
    border-radius: var(--r-pill);
    padding: 10px 18px;
    font: 500 15px/1.4 var(--f-sans);
    color: var(--ink);
    outline: 0;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
    min-width: 0;
  }
  .ds-contact__field-input::placeholder { color: var(--ink-faint); }
  .ds-contact__field-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--mint-bg);
  }

  .ds-contact__error {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(255, 107, 53, 0.08);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r-md);
    font-size: 14px;
    color: var(--accent-deep);
  }

  .ds-contact__hint {
    margin-top: 18px;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--ink-mid);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .ds-contact__hint a,
  .ds-contact__hint-link {
    color: var(--ink);
    border-bottom: 1px solid var(--ink-edge);
    padding-bottom: 1px;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .ds-contact__hint a:hover,
  .ds-contact__hint-link:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .ds-contact__hint-sep { color: var(--ink-faint); }

  /* Success-state: stor confirmation + CTA. */
  .ds-contact__success-lede {
    font-family: var(--f-sans);
    font-size: var(--t-lede);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 0 clamp(28px, 4vw, 40px);
  }
  .ds-contact__success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .ds-contact__cta-primary {
    appearance: none;
    cursor: pointer;
    border: 0;
    font-family: var(--f-sans);
    font-size: 15.5px;
    font-weight: 600;
    padding: 14px 26px;
    background: var(--mint);
    color: var(--ink);
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px -8px rgba(140, 232, 190, 0.6);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  .ds-contact__cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(140, 232, 190, 0.7);
  }
  .ds-contact__cta-primary span[aria-hidden] {
    transition: transform var(--t-fast) var(--ease);
  }
  .ds-contact__cta-primary:hover span[aria-hidden] {
    transform: translate(3px, -3px);
  }
</style></section><footer class="v2-foot"><div class="v2-foot__inner"><a class="v2-foot__brand-link" href="/" data-discover="true">haakonjensen.no</a><nav class="v2-foot__nav" aria-label="Footer"><a class="v2-foot__link" href="/om-haakon" data-discover="true">Om Haakon</a><a class="v2-foot__link" href="/tjenester" data-discover="true">Tjenester</a><a class="v2-foot__link" href="/blogg" data-discover="true">Blogg</a><a class="v2-foot__link" href="/sparring" data-discover="true">Sparring</a><a class="v2-foot__link" href="/kontakt?from=footer" data-discover="true">Kontakt</a></nav><div class="v2-foot__contact"><span class="v2-foot__location">Basert i Trondheim</span><a class="v2-foot__icon" href="https://www.linkedin.com/in/haakonjensen/" target="_blank" rel="noreferrer" aria-label="LinkedIn" title="LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.452 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.356V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.602 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></div></div><div class="v2-foot__meta"><span class="v2-foot__meta-link">© <!-- -->2026<!-- --> Haakon Jensen</span><button type="button" class="v2-foot__meta-link v2-foot__meta-btn">Cookies</button><a class="v2-foot__meta-link" href="/personvern" data-discover="true">Personvern</a></div><style>
  .v2-foot {
    background: transparent;
    color: var(--v2-muted);
    border-top: 1px solid var(--v2-line);
    padding: 32px 28px 88px;
    font-family: var(--v2-font-sans);
    font-size: 14px;
    line-height: 1.5;
  }
  .v2-foot__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
  }
  .v2-foot__brand-link {
    color: var(--v2-ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: -0.01em;
  }
  .v2-foot__nav,
  .v2-foot__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
  }
  .v2-foot__contact { margin-left: auto; }
  .v2-foot__link {
    color: var(--v2-muted);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .v2-foot__link:hover { color: var(--v2-ink); }
  .v2-foot__location {
    color: var(--v2-muted);
    font-size: inherit;
    letter-spacing: -0.005em;
  }
  .v2-foot__btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }
  .v2-foot__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--v2-muted);
    background: transparent;
    border: 1px solid var(--v2-line);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .v2-foot__icon:hover {
    color: var(--v2-ink);
    border-color: rgba(13,31,45,0.22);
    background: var(--v2-paper-2);
  }
  .v2-foot__meta {
    max-width: 1200px;
    margin: 24px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--v2-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    font-family: var(--v2-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-muted-soft);
  }
  .v2-foot__meta-link {
    color: var(--v2-muted-soft);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .v2-foot__meta-link:hover { color: var(--v2-ink); }
  .v2-foot__meta-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
  }
  @media (max-width: 760px) {
    .v2-foot { padding: 24px 20px 32px; font-size: 13px; }
    .v2-foot__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .v2-foot__brand-link { font-size: 14px; }
    .v2-foot__nav { gap: 10px 18px; }
    .v2-foot__contact { margin-left: 0; gap: 10px 18px; }
    .v2-foot__icon { width: 26px; height: 26px; }
    .v2-foot__meta {
      margin-top: 18px;
      padding-top: 14px;
      gap: 8px 14px;
      font-size: 10px;
      justify-content: flex-start;
    }
  }
</style></footer></div></div><script>window.__staticRouterHydrationData = JSON.parse("{\"loaderData\":{},\"actionData\":null,\"errors\":null}");</script></div>
  </body>
</html>
