/* Hallmark · genre: editorial · design-system: DESIGN.md v1.4
 * nav: N6 Newspaper masthead (knobs: issue-line=below-wordmark, wordmark=2xl, rule=double)
 * footer: Ft1 Mast-headed (knobs: wordmark=xl, tagline=roman-body, links=inline)
 * macrostructures: index=Marquee Hero · om=Split Studio · produkter=Workbench · kontakt=Letter
 * enrichment: none (real screenshots + portraits, no illustration, no re-drawn chrome)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * contrast: pass (40-41) · slop: pass (42-45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50-57)
 *
 * Fontene er selvhostet i /fonts. Ingen forespørsler til Google, fordi
 * consent.js er bygget for at ingenting hentes fra Googles servere før
 * samtykke. Google Fonts ville brutt nøyaktig det prinsippet.
 */

/* ============================================================
   TOKENS — kilde: DESIGN.md v1.4 / tokens.css
   Kontrastforhold beregnet mot --paper, ikke mot hvit.
   ============================================================ */
:root {
  /* Papir og blekk. Ingen ren hvit. */
  --paper: #f8f6f0;
  --paper-raised: #fdfcf9;
  --panel: #f1eee6;
  --panel-strong: #e7e3d8;
  --rule: #dad5c8;
  --rule-strong: #b4ae9e;
  --ink: #191914;          /* 16,3:1 */
  --ink-2: #4c4a41;        /*  8,2:1 */
  --muted: #6e6b60;        /*  4,9:1  AA */

  /* Oransje */
  --orange: #e36819;       /* merkevare. flate, keyline, stor display. 3,1:1 */
  --orange-text: #b8490d;  /* tekst og lenker. 4,9:1  AA */
  --orange-press: #a03f08;
  --orange-aaa: #8f330d;   /* småskrift. 7,3:1  AAA */
  --orange-wash: #fdefe4;
  --on-orange: #14140f;    /* tekst PÅ oransje fyll. 5,5:1. hvit gir 3,3:1 og består ikke */
  --focus: rgba(227, 104, 25, 0.22);

  /* Alvorsgrad. Eid av semantikk, aldri av merkevare.
     Samme skille som oransje: fyllfarge og tekstfarge er ikke samme verdi.
     #c28a00 er 2,8:1 mot papiret og består ikke AA som tekst. */
  --sev-normal: #2a6f4e;        /* 5,7:1  tekst og fyll */
  --sev-elevated: #c28a00;      /* 2,8:1  KUN fyll, prikk, stolpe */
  --sev-elevated-text: #8a6000; /* 5,2:1  AA  tekst og kantlinje */
  --sev-critical: #c8281c;      /* 5,4:1  tekst og fyll */

  /* Serie-keylines. 3 px, toppkant. */
  --s-rapid: #c0392b;
  --s-control: #191914;
  --s-insight: #1e5aa8;
  --keyline: 3px;

  /* Rom. 4 px base. */
  --sp-2xs: 2px;  --sp-xs: 4px;   --sp-sm: 8px;   --sp-md: 12px;
  --sp-lg: 16px;  --sp-xl: 24px;  --sp-2xl: 32px; --sp-3xl: 48px;
  --sp-4xl: 64px; --sp-5xl: 96px; --sp-6xl: 128px;

  /* Typografi */
  --font-display: 'Archivo', 'Barlow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Form */
  --r-ctrl: 2px;
  --r-panel: 4px;
  --tap: 44px;
  --measure: 68ch;
  --shell: 1080px;

  /* Bevegelse */
  --dur: 150ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
}

/* Mørk modus: kun eksplisitt valg via data-theme="dark".
   Flater redesignes, de inverteres ikke. */
:root[data-theme="dark"] {
  --paper: #14140f;
  --paper-raised: #1c1b16;
  --panel: #201f19;
  --panel-strong: #2b2a22;
  --rule: #37352c;
  --rule-strong: #575043;
  --ink: #f4f1ea;
  --ink-2: #b7b3a8;
  --muted: #98938a;
  --orange: #ff8a3a;
  --orange-text: #ff8a3a;
  --orange-press: #e36819;
  --orange-aaa: #ffa366;
  --orange-wash: #2a1b0e;
  --sev-normal: #4ca87a;
  --sev-elevated: #e0ae2a;
  --sev-elevated-text: #e0ae2a;
  --sev-critical: #f0564a;
  --s-control: #f4f1ea;
}

/* ============================================================
   BASIS
   ============================================================ */
* { box-sizing: border-box; }

html, body { overflow-x: clip; }   /* clip, ikke hidden — bevarer sticky */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01";   /* l/I/1-disambiguering */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;              /* romane overskrifter. alltid. */
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

a { color: var(--orange-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--orange-press); }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-ctrl); }

img { max-width: 100%; height: auto; display: block; }

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1rem, 4vw, var(--sp-3xl)); }
.narrow { max-width: 760px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--paper-raised); color: var(--ink);
  padding: var(--sp-md) var(--sp-lg); border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctrl); z-index: 100;
}
.skip:focus { left: var(--sp-lg); top: var(--sp-lg); }

/* ============================================================
   N6 · NEWSPAPER MASTHEAD
   ============================================================ */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead .shell { padding-top: var(--sp-xl); padding-bottom: 0; }

.masthead-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-lg); flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 700;
  font-stretch: 120%;          /* treffer originallogoens bredde. Se DESIGN.md § 4.1 */
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
  display: inline-flex; align-items: baseline;
  color: var(--ink);
  text-decoration: none;
  transition: font-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.wordmark .chevron {
  color: var(--orange);
  display: inline-block;
  transform: scaleX(1.15) scaleY(0.92);
  margin-left: 0.08em;
}
/* Logoformen i topp og bunn: inline SVG fra logo.svg. Svart del er
   currentColor, så den arver --ink og følger tema og splash. Høyden i em
   gjør at den krymper med font-size ved rulling, som teksten gjorde. */
.wordmark .logo { height: 1.05em; width: auto; display: block; }
a.wordmark { min-height: var(--tap); align-items: center; }
a.wordmark:hover { color: var(--ink); }
a.wordmark:hover .chevron { color: var(--orange-press); }
a.wordmark:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.masthead-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
  transition: opacity var(--dur) var(--ease-out), max-height var(--dur) var(--ease-out);
  overflow: hidden;
}

.tagline {
  margin: var(--sp-md) 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  transition: opacity var(--dur) var(--ease-out),
              max-height var(--dur) var(--ease-out),
              margin var(--dur) var(--ease-out);
  max-height: 2.5rem;
  overflow: hidden;
}
.tagline .sep { color: var(--orange); padding: 0 0.5em; }

.masthead-nav {
  display: flex; flex-wrap: wrap; gap: 0 var(--sp-xl);
  margin-top: var(--sp-xl);
  border-top: 1px solid var(--rule);
  border-bottom: var(--keyline) solid var(--ink);   /* dobbel regel: tynn + tykk */
  padding: 0;                                       /* treffflaten i lenken bærer høyden */
}
/* Selvstendige navigasjonsmål: 44 px treffflate.
   WCAG 2.2 AA krever 24 px, 44 px er AAA-nivået DESIGN.md § 8.5 setter.
   Teksten forblir liten, det er treffboksen som vokser. */
.masthead-nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;                              /* klikkbar tekst brekker aldri */
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.masthead-nav a:hover { color: var(--ink); border-bottom-color: var(--orange); }
.masthead-nav a:active { color: var(--orange-press); }
.masthead-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); font-weight: 600; }

/* ---------- Logg inn (intern utleggsløsning) ---------- */
/* Skyver seg helt til høyre og tar plassen foran språkveksleren. */
.masthead-nav .nav-login { margin-left: auto; color: var(--muted); }
.masthead-nav .nav-login::before { content: "→ "; color: var(--orange); }
.masthead-nav .nav-login:hover { color: var(--ink); }

/* ---------- Språkveksler ---------- */
.langswitch {
  margin-left: 0;
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em;
}
.langswitch a, .langswitch span {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.langswitch a { color: var(--muted); }
.langswitch a:hover { color: var(--ink); border-bottom-color: var(--orange); }
.langswitch a:active { color: var(--orange-press); }
.langswitch [aria-current="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--orange); }
.langswitch .div { color: var(--rule-strong); border-bottom: 0; min-height: 0; }

@media (max-width: 40rem) {
  .langswitch { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   FASTLÅST MASTHEAD, FORTETTET VED RULLING
   ============================================================
   N6-mastheaden er rundt 190 px høy med wordmark, tagline, orgnr og
   nav. Å låse den som den er ville spist en femtedel av en laptopskjerm
   permanent. Den fortettes derfor: i ro står hele avistittelen, ved
   rulling blir den en kompakt stripe med wordmark og nav.

   Tagline og orgnr forsvinner ved rulling. Det er ikke informasjonstap
   — de står i foten på hver side, og de er identitet, ikke navigasjon.

   `position: sticky` og ikke `fixed`: sticky holder seg i dokumentflyten,
   så den skyver ikke innhold opp under seg og trenger ingen
   kompenserende padding på <main>. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.masthead .shell {
  transition: padding var(--dur) var(--ease-out);
}

/* Fortettet tilstand */
.is-scrolled .masthead {
  box-shadow: 0 1px 0 var(--rule), 0 6px 20px rgba(25, 25, 20, 0.07);
}
.is-scrolled .masthead .shell { padding-top: var(--sp-sm); }
.is-scrolled .masthead .tagline {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}
.is-scrolled .masthead .masthead-meta {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}
.is-scrolled .wordmark { font-size: clamp(1.375rem, 3vw, 1.625rem); }
.is-scrolled .masthead-nav { margin-top: var(--sp-xs); }

/* Splashen: mastheaden ligger gjennomsiktig over videoen i ro, og blir
   papir når man har rullet. Uten dette står lys tekst på lyst papir
   idet den fortettes, altså en usynlig meny.

   MERK SELEKTORENE: `splash` står på <body>, mens `is-scrolled`,
   `js` og `nav-open` settes på <html> av nav.js. `.splash.is-scrolled`
   ville krevd at begge sto på samme element og truffet ingenting.
   Derfor `.is-scrolled .splash .masthead`. */
.is-scrolled .splash .masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  /* Token-overstyringen for splash gjelder BARE mens mastheaden ligger
     over videoen. Ved rulling er flaten papir, og da må tokens tilbake
     til lysmodus-verdiene. `revert-layer` har ikke bred nok støtte
     ennå, så verdiene settes eksplisitt. */
  --paper: #f8f6f0;
  --panel: #f1eee6;
  --panel-strong: #e7e3d8;
  --rule: #dad5c8;
  --rule-strong: #b4ae9e;
  --ink: #191914;
  --ink-2: #4c4a41;
  --muted: #6e6b60;
  --orange-text: #b8490d;
  color: var(--ink);
}
:root[data-theme="dark"].is-scrolled .splash .masthead {
  --paper: #14140f;
  --panel: #201f19;
  --panel-strong: #2b2a22;
  --rule: #37352c;
  --rule-strong: #575043;
  --ink: #f4f1ea; --ink-2: #b7b3a8; --muted: #98938a;
  --orange-text: #ff8a3a;
}
.is-scrolled .splash .masthead-nav { border-top-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .masthead, .masthead .shell, .wordmark, .tagline, .masthead-meta { transition: none; }
}

/* Ankerlenker må ikke lande BAK den fastlåste stripa.
   Rullehintet peker på #folka, og uten dette havner overskriften under
   mastheaden og brukeren ser midt i et avsnitt. 7rem er den fortettede
   mastheaden pluss litt luft. */
:target,
section[id],
[id^="hoved"],
h2[id], h3[id] { scroll-margin-top: 7rem; }

/* ============================================================
   HAMBURGER
   ============================================================
   Menyen er ÅPEN i markupen og skjules først når nav.js har satt
   `js` på <html>. Uten JS får brukeren hele lenkelista i stedet for en
   knapp som ikke gjør noe. Knappen er skjult til motsatt: den vises
   bare når JS finnes og skjermen er smal. */
.navtoggle { display: none; }

@media (max-width: 47.999rem) {
  .masthead .shell {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-top: var(--sp-md);
    padding-bottom: var(--sp-sm);
  }
  .is-scrolled .masthead .shell {
    padding-top: var(--sp-xs);
    padding-bottom: var(--sp-xs);
  }
  .masthead-top {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }
  .masthead-top .masthead-meta {
    display: none;
  }
  .js .navtoggle {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-top: 0;
    min-height: var(--tap);
    padding: 0 var(--sp-md) 0 var(--sp-sm);
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-ctrl);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    align-self: center;
    transition: color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
  }
  .js .navtoggle:hover { border-color: var(--orange); color: var(--orange-text); }
  .js .navtoggle:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
  }
  .navtoggle .bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 18px;
  }
  .navtoggle .bars i {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out);
  }
  /* Åpen: strekene blir et kryss. Samme knapp lukker, så ikonet må
     si hva neste trykk gjør. */
  .nav-open .navtoggle .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-open .navtoggle .bars i:nth-child(2) { opacity: 0; }
  .nav-open .navtoggle .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .tagline {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--sp-xs);
  }

  /* Menyen kollapser til en loddrett liste. `display: none` og ikke
     max-height-triks: en skjult meny skal ikke være i tabbrekkefølgen,
     og en høyde-animasjon på ukjent innhold gir alltid et hopp. */
  .js .masthead-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: var(--sp-md);
    border-top: 1px solid var(--rule);
    border-bottom: var(--keyline) solid var(--ink);
  }
  /* Begge klassene står på <html>, derfor sammensatt og ikke etterkommer. */
  .js.nav-open .masthead-nav { display: flex; }
  .js .masthead-nav a {
    width: 100%;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    padding: 0 var(--sp-md);
  }
  .js .masthead-nav a:last-of-type { border-bottom: 0; }
  .js .masthead-nav a:hover,
  .js .masthead-nav a[aria-current="page"] {
    border-bottom-color: var(--rule);
    border-left-color: var(--orange);
    background: var(--panel);
    color: var(--ink);
  }
  .js .masthead-nav .langswitch {
    margin: 0;
    padding: var(--sp-sm) var(--sp-md);
    border-top: 1px solid var(--rule);
    flex-basis: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navtoggle .bars i { transition: none; }
}

/* ============================================================
   MARQUEE HERO (forside)
   ============================================================ */
.marquee { padding: var(--sp-5xl) 0 var(--sp-6xl); border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------
   SCENELAG BAK HELTEN — bare forsiden, derfor .marquee.scene
   ------------------------------------------------------------
   Førstemøtet i et møterom, som video bak overskriften. Klippet er
   duotonet i samme rampe som portrettene, DESIGN.md § 12.2, slik at det
   hører sammen med resten av siden i stedet for å sitte der som et
   fremmedelement i farger. Se bygg-heltvideo.py.

   TRE LAG, OG HVORFOR DET MÅ VÆRE TRE
     -3  videoen, helbredds
     -2  papirveil i jevn opasitet over alt
     -1  dekkende papirkile til venstre, der teksten står

   Veilen kunne ikke vært én gradient med gjennomsiktig papir i stoppene,
   fordi `var(--paper)` ikke kan gis alfa uten color-mix, og color-mix
   feiler helt i eldre nettlesere. Da ville videoen stått udempet bak
   overskriften i stedet for å bli litt for svak. Feiler noe, skal det
   feile mot det trygge.

   VEILEN ER 80 %, OG DET ER REGNET UT
   Duotonen komprimerer klippet til [0,10 – 0,94] av rampen ink..paper,
   så den mørkeste pikselen er kjent: rgb(47, 47, 42). Kontrast mot den
   er derfor regnbart, ikke en smakssak. Ved 70 % veil faller `.sub`
   (`--ink-2`) under AA. 80 % gir 5,65:1 i lys modus og 5,30:1 i mørk.
   Vil du se mer av videoen, er det dette tallet som skrus — men ikke
   under 0,72.

   HVORFOR TEKST ALDRI LIGGER OVER VIDEOEN
   `--orange-text` er 4,9:1 mot rent papir, altså så vidt over AA.
   Regnet ut for veil fra 40 til 90 %: det finnes INGEN verdi der
   kickeren, som er 12 px `--orange-text`, består AA over videoen. Selv
   ved 90 % veil er den 4,06:1. Tettere veil var derfor ikke løsningen —
   den dekkende kilen er det.

   Kilen slutter ved `calc(50% + 60px)`, låst til senterlinja og ikke til
   vindusbredden. Skallet er maks 1080 px og sentrert, så tekstspalten
   slutter ved `calc(50% + 80px)`; å låse til senter gjør at klaringen
   holder ved enhver bredde, ikke bare den jeg tilfeldigvis testet i.

   Det som SKAL kunne ligge over videoen, gjør det trygt: `h1` er
   `--ink` og har 11,2:1, og `h1 .accent` er oransje men over 24 px og
   fet, altså stor tekst med 3:1 som grense, og har 3,34:1.

   Klassen står bare på forsidens marquee. Uten den ville produktsiden
   fått samme video bak sin egen helt, uten at noen hadde bedt om det. */
/* ------------------------------------------------------------
   SPLASH — videoen fyller HELE skjermen, masthead oppå
   ------------------------------------------------------------
   Første forsøk trakk mastheadens høyde fra viewporten, og da dekket
   videoen bare feltet under den. Det er ikke en splash, det er et bånd.
   Nå er helten 100svh og mastheaden løftet ut av flyten og lagt over,
   så videoen starter i toppen av skjermen.

   Bare forsiden, derfor `body.splash`. Samme mønster som `body.doc`
   på personvernsidene. */
/* Mastheaden ligger rett på videoen, uten papirveil. Den lyse
   tekstfargen kommer fra token-overstyringen på .splash under, ikke
   herfra — da gjelder den for hvert element i mastheaden på én gang. */
.splash .masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  border-bottom: 0;
  background: transparent;
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.splash .masthead-nav { border-top-color: rgba(244, 241, 234, 0.26); }
/* Skiplenken må ligge over mastheaden. .skip står på z-index 100. */

/* Åpen meny på splash: mastheaden må få dekkende mørk papirbakgrunn så
   menyelementene ikke kolliderer med videoen og helteteksten bak. */
.js.nav-open .splash .masthead {
  background: var(--paper);
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

/* Token-overstyring for splashen. Flaten er ALLTID mørk her — mørk
   gradert video pluss mørk scrim — så teksten må være lys i BEGGE
   temamoduser. Å arve fra temaet ville gitt mørk tekst på mørkt bilde
   for alle med lys modus, altså for de fleste. Verdiene er de samme som
   mørk modus bruker ellers i systemet, ikke nye farger. */
.splash .masthead,
.marquee.scene {
  --paper: #14140f;
  --panel: #201f19;
  --panel-strong: #2b2a22;
  --rule: #37352c;
  --rule-strong: rgba(244, 241, 234, 0.42);
  --ink: #f4f1ea;
  --ink-2: #b7b3a8;
  --muted: #b7b3a8;
  --orange-text: #ff8a3a;
  /* `color` må settes om her, ikke bare tokenet.
     `body { color: var(--ink) }` beregnes PÅ body med lys-modus-verdien
     og arves nedover som en ferdig farge. Å overstyre `--ink` dypere
     treffer bare deklarasjoner som leser tokenet på dette nivået eller
     under. Uten denne linja sto overskriften mørk på mørkt bilde, og
     bare det oransje ordet var synlig. */
  color: var(--ink);
}

.marquee.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;                       /* klipper videoen */
  padding: 0;
  display: flex;
  align-items: center;                    /* D: sentrert loddrett */
  text-align: center;                     /* D: midtstilt */
  border-bottom: 0;
  min-height: 34rem;                      /* fallback for eldre nettlesere */
  min-height: 100vh;
  /* svh, ikke vh. `vh` regner på mobil som om nettleserkromet var borte,
     og gir en splash som stikker under skjermkanten — nettopp det man
     ser når man later som adresselinja ikke finnes. */
  min-height: 100svh;
}
/* Midtstilling av blokker som har egen maks-bredde. Uten dette står de
   til venstre inne i en midtstilt kolonne, som leses som en feil. */
.marquee.scene h1,
.marquee.scene .sub { margin-left: auto; margin-right: auto; max-width: 62ch; text-wrap: balance; }
.marquee.scene .btnrow { justify-content: center; }
.marquee.scene .cue-row { justify-content: center; }

.scene-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Til høyre i klippet står møtelederen og skjermen med førstemøtet.
     Det er den delen som skal være synlig, ikke tomme stolrader. */
  object-position: 50% 42%;
  pointer-events: none;
}

/* Radial scrim. Lysere i midten der ansiktene er, mørkere mot kantene der
   teksten møter bildet.
   ------------------------------------------------------------
   Videoen er gradert MØRK for dette, ikke lys. Det var rotårsaken til at
   tidligere forsøk endte med en papirflate: en video duotonet inn i den
   lyse papirrampen er for lys for hvit tekst og for lys for svart tekst,
   og da finnes ingen utveg. Se MORK_LO/MORK_HI i bygg-heltvideo.py, der
   toppverdien er regnet baklengs fra kontrastkravet.

   Målt på ferdig side med teksten skjult: verste bakgrunn rgb(44), som
   gir 12,4:1 på blekk, 6,7:1 på undertittel og 6,0:1 på oransje. Alt med
   god margin, i motsetning til papirvarianten der oransje kicker ikke
   besto ved noen veiltetthet. */
.marquee.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%,
    rgba(10, 10, 8, 0.52) 0%,
    rgba(10, 10, 8, 0.80) 100%);
}

/* ------------------------------------------------------------
   TEKSTVEILEN — ankret til tekstboksen, ikke til høyden
   ------------------------------------------------------------
   Første forsøk la gradienten på båndet med stopp i prosent, og da
   avhang kontrasten av om teksten tilfeldigvis fikk plass i nederste
   40 % av høyden. Ved 700 px høyde holdt det, ved 520 px ikke, og det
   er ikke en garanti — det er flaks som ser ut som en garanti.

   Nå følger gradienten sin egen boks: dekkende papir fra bunnen opp til
   `calc(100% - 11rem)`, og uttoning gjennom de siste 11 rem. Padding-top
   er de samme 11 rem. Uttoningen skjer altså PRESIS i luften over
   teksten, og all tekst står på rent papir uansett hvor høy skjermen er,
   hvor lang overskriften blir, eller hvilken skriftstørrelse brukeren
   har satt.

   Rent papir under teksten betyr også at hvert token holder sitt
   dokumenterte kontrastforhold. Kickeren beholder oransjen sin på 4,9:1
   uten triks, som var det som ikke lot seg løse med en veil alene. */
/* Tekstblokka. Ingen papirflate og ingen uttoning: scrimen over hele
   flaten gjør jobben, og teksten ligger rett på bildet. Padding-top
   holder den klar av mastheaden som ligger over. */
.hero-copy {
  position: relative;
  width: 100%;
  padding-top: 12rem;
  padding-bottom: var(--sp-4xl);
}

/* Rullehint. En helskjerm-splash skjuler at det finnes noe under, og da
   er hintet funksjon og ikke dekor. Det er en ekte lenke til neste
   seksjon, så den virker med tastatur og skjermleser også.

   Ingen animasjon. En hoppende pil ville krevd et unntak i
   prefers-reduced-motion, og et hint som må stå stille for noen kan like
   godt stå stille for alle. */
.btnrow { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-top: var(--sp-2xl); }
.cue-row { display: flex; }

/* btn-ghost over videoen: kantlinja er `--rule-strong`, som splashen
   overstyrer til halvgjennomsiktig lyst. Uten det ville den vært en
   nesten usynlig varmgrå strek på et mørkt bilde. */
.marquee.scene .btn-ghost { border-color: var(--rule-strong); }
.marquee.scene .btn-ghost:hover { border-color: var(--orange); color: var(--orange-text); }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-2xl);
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.scroll-cue .arrow {
  color: var(--orange);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform var(--dur) var(--ease-out);
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue:hover .arrow { transform: translateY(2px); }
.scroll-cue:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: var(--r-ctrl);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue .arrow, .scroll-cue:hover .arrow { transition: none; transform: none; }
}

@media (max-width: 900px) {
  .scene-media { object-position: 52% 44%; }
  .hero-copy { padding-top: 10rem; padding-bottom: var(--sp-2xl); }
}

/* Lave skjermer. En 1440×800-laptop er en av de vanligste oppløsningene
   som finnes, og der er masthead pluss tekst nesten hele de 800 pikslene.
   Uten dette brytepunktet er splashen en papirflate med en videostripe.
   Overskriften og luften krymper, videoen beholder en synlig flate. */
@media (min-width: 901px) and (max-height: 860px) {
  .marquee.scene h1 { font-size: clamp(1.75rem, 4.2vw, 3rem); }
  .marquee.scene .sub { margin-top: var(--sp-lg); font-size: 1rem; }
  .marquee.scene .kicker { margin-bottom: var(--sp-md); }
  .scroll-cue { margin-top: var(--sp-lg); }
  .hero-copy { padding-top: 9rem; padding-bottom: var(--sp-xl); }
}

.marquee h1 {
  font-size: clamp(2rem, 6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 22ch;
  font-stretch: 104%;
}
.marquee h1 .accent { color: var(--orange-text); }
.marquee .sub {
  margin: var(--sp-xl) 0 0;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--ink-2);
  max-width: 52ch;
  line-height: 1.55;
}
.marquee .kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--orange-text);
  margin: 0 0 var(--sp-xl);
  letter-spacing: 0.02em;
}

/* ============================================================
   FAGPERSONATTRIBUSJON · DESIGN.md § 12
   Navn, rolle, meritt. Ingen arbeidsgiver.
   ============================================================ */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-2xl);
  border-top: var(--keyline) solid var(--orange);
  padding-top: var(--sp-xl);
}
.person { min-width: 0; }
.person .portrait {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-ctrl);
  border: 1px solid var(--rule);
  background: var(--panel);
  margin-bottom: var(--sp-lg);
  filter: grayscale(1) contrast(1.04);   /* symmetri på tvers av ulike opptak */
}
.person .name {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 0;
}
.person .role { font-size: 0.875rem; color: var(--ink-2); margin: var(--sp-2xs) 0 0; }
.person .merit {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--muted);
  margin: var(--sp-sm) 0 0; line-height: 1.7;
}
.person .open {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sev-elevated-text); margin: var(--sp-sm) 0 0;
}

/* ============================================================
   SEKSJONER
   ============================================================ */
section.band { padding: var(--sp-5xl) 0; border-bottom: 1px solid var(--rule); }
section.band.tight { padding: var(--sp-4xl) 0; }
section.band.airy { padding: var(--sp-6xl) 0 var(--sp-5xl); }
section.band:last-of-type { border-bottom: 0; }

h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700; line-height: 1.15; max-width: 30ch;
}
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

.lede {
  margin: var(--sp-lg) 0 var(--sp-2xl);
  color: var(--ink-2); max-width: var(--measure); font-size: 1rem;
}
.lede.lede-wide { max-width: none; }
p { margin: 0 0 var(--sp-lg); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* ============================================================
   SPLIT STUDIO (om) — diptych, vekslende retning
   ============================================================ */
.diptych {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-3xl);
  align-items: start;
  padding: var(--sp-3xl) 0;
  border-top: 1px solid var(--rule);
}
.diptych:first-of-type { border-top: 0; padding-top: 0; }
.diptych.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.diptych.flip .side { order: 2; }
.diptych.flip .body { order: 1; }
.diptych .side { min-width: 0; }
.diptych .body { min-width: 0; }
.diptych .body p { max-width: 60ch; }

.factlist { margin: 0; padding: 0; list-style: none; }
.factlist li {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: var(--sp-lg);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.factlist li:last-child { border-bottom: 0; }
.factlist .k {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px;
}
.factlist .v { color: var(--ink-2); }

/* Bred tabell skal rulle i sin egen ramme, aldri dra sida med seg.
   Én klasse for dette i hele systemet. Det sto en `.table-wrap` nede
   i dokumentblokken og en `.tablewrap` her, to navn med bindestrek
   som eneste forskjell, og det er nøyaktig slik to komponenter for
   samme jobb blir stående side om side. */
.table-wrap { overflow-x: auto; }

/* ============================================================
   F3 SPESIFIKASJONSTABELL — ordbok på tvers av doktriner
   To likestilte kolonner, fordi innholdet er to likestilte
   doktriner. Ingen sebrastriper: radskillet er én hårlinje,
   som overalt ellers i systemet. Toppkanten er keylinen.
   ============================================================ */
.crosswalk {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: var(--sp-xl) 0 0;
}
.crosswalk caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--sp-md);
}
.crosswalk th,
.crosswalk td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-md) var(--sp-lg) var(--sp-md) 0;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
  min-width: 0;
}
.crosswalk thead th {
  border-bottom: var(--keyline) solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
  padding-bottom: var(--sp-sm);
  width: 50%;
}
.crosswalk tbody th {
  font-family: var(--font-mono);
  font-size: 0.8125rem; font-weight: 400;
  color: var(--ink-2);
}
.crosswalk tbody td { color: var(--ink); }
.crosswalk .note {
  display: block;
  font-size: 0.8125rem; color: var(--muted);
  margin-top: var(--sp-2xs);
}
.crosswalk .grp th {
  padding-top: var(--sp-2xl);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.crosswalk tbody tr:last-child th,
.crosswalk tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   WORKBENCH (produkter) — ekte skjermbilder, ingen tegnet krom
   ============================================================ */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--sp-xl);
}
figure { margin: 0; min-width: 0; }
figure img { border: 1px solid var(--rule); border-radius: var(--r-panel); }
figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem; color: var(--muted);
  margin-top: var(--sp-md); line-height: 1.7;
}
figcaption b { color: var(--ink-2); font-weight: 500; }

.status-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-md);
  align-items: center; margin-bottom: var(--sp-xl);
}
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid; border-radius: var(--r-ctrl);
}
.badge .dot { width: 6px; height: 6px; border-radius: 9999px; }
.badge.live { color: var(--sev-normal); border-color: var(--sev-normal); }
.badge.live .dot { background: var(--sev-normal); }
.badge.dev { color: var(--sev-elevated-text); border-color: var(--sev-elevated-text); }
.badge.dev .dot { background: var(--sev-elevated); }   /* fyll tåler den lysere verdien */

/* Serier under utvikling — spesifikasjon, ikke tegnet vindu */
.series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-xl);
}
.serie { min-width: 0; border-top: var(--keyline) solid var(--rule); padding-top: var(--sp-lg); }
.serie.r { border-top-color: var(--s-rapid); }
.serie.c { border-top-color: var(--s-control); }
.serie.i { border-top-color: var(--s-insight); }
.serie .label {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--sp-sm);
}
.serie h3 { margin-bottom: var(--sp-sm); }
.serie p { font-size: 0.9375rem; color: var(--ink-2); margin-bottom: var(--sp-md); }
.serie .names {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted);
  line-height: 1.9; margin: 0;
}

/* Produktlås */
.lock {
  font-family: var(--font-display);
  font-size: 1.375rem; letter-spacing: -0.035em; line-height: 1.4;
  white-space: nowrap;
}
.lock .s { font-weight: 700; }
.lock .f { font-weight: 500; color: var(--ink-2); }

/* ============================================================
   LETTER (kontakt)
   ============================================================ */
.letter { max-width: 62ch; }
.letter .salut {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
  margin: 0 0 var(--sp-xl);
}
.letter p { font-size: 1.0625rem; max-width: 62ch; }
.letter .signoff {
  margin-top: var(--sp-2xl); padding-top: var(--sp-lg);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted);
  line-height: 1.9;
}
.mailto {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 2vw, 1.25rem);
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: var(--sp-sm);
  min-height: var(--tap);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.mailto:hover { color: var(--orange-text); border-bottom-color: var(--orange-press); }
.mailto:active { color: var(--orange-press); }
.mailto:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ---------- Kontaktkort, tre navngitte ---------- */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-xl);
  margin: 0 0 var(--sp-2xl);
  border-top: var(--keyline) solid var(--orange);
  padding-top: var(--sp-lg);
}
.contacts .card { min-width: 0; }
.contacts .nm {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; letter-spacing: -0.01em; margin: 0;
}
.contacts .rl { font-size: 0.8125rem; color: var(--ink-2); margin: var(--sp-2xs) 0 0; }
.contacts .cn {
  font-family: var(--font-mono); font-size: 0.75rem;
  line-height: 2; margin: var(--sp-sm) 0 0;
}
.contacts .cn a { color: var(--orange-text); text-decoration: none; border-bottom: 1px solid transparent; }
.contacts .cn a:hover { border-bottom-color: var(--orange); }
.contacts .cn a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ============================================================
   KNAPPER OG LENKEHANDLINGER — åtte tilstander
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; line-height: 1;
  min-height: var(--tap); padding: var(--sp-md) var(--sp-lg);
  border: 1px solid transparent; border-radius: var(--r-ctrl);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.btn-primary { background: var(--orange); color: var(--on-orange); border-color: var(--orange-press); }
.btn-primary:hover { background: var(--orange-press); color: var(--paper-raised); }
.btn-primary:active { background: var(--orange-aaa); color: var(--paper-raised); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange-text); }
.btn-ghost:active { background: var(--panel); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); border-color: var(--orange); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
  background: var(--panel); color: var(--muted); border-color: var(--rule);
}

.mc-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.mc-link:hover { color: var(--ink); }
.mc-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ============================================================
   Ft1 · MAST-HEADED FOOTER
   ============================================================ */
.sitefoot { border-top: var(--keyline) solid var(--ink); margin-top: var(--sp-3xl); }
.sitefoot .shell { padding-top: var(--sp-2xl); padding-bottom: var(--sp-4xl); }
.footmast {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-xl) var(--sp-3xl); align-items: start;
}
.footmast .wordmark { font-size: 1.5rem; }
.footmast .ft-tag { font-size: 0.875rem; color: var(--ink-2); margin: var(--sp-sm) 0 0; max-width: 34ch; }
.footlinks { display: flex; flex-wrap: wrap; gap: 0 var(--sp-lg); }
.footlinks a, .footlinks .mc-link {
  font-size: 0.8125rem; color: var(--ink-2); text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center;
  min-height: var(--tap);                  /* selvstendige mål, ikke inline i setning */
}
.footlinks a:hover, .footlinks .mc-link:hover { color: var(--ink); }
.org {
  margin: var(--sp-2xl) 0 0; padding-top: var(--sp-lg);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted);
  line-height: 1.9;
}
.org a { color: var(--muted); }
.org a:hover { color: var(--ink); }

/* ============================================================
   ÅPENT-MERKE — ukjent står som ÅPENT, aldri som gjetning
   ============================================================ */
.pending {
  border-left: var(--keyline) solid var(--sev-elevated);
  background: var(--panel);
  padding: var(--sp-lg) var(--sp-xl);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  font-size: 0.9375rem; color: var(--ink-2);
  margin: var(--sp-xl) 0 0;
}
.pending strong { color: var(--ink); }

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width: 60rem) {
  .diptych, .diptych.flip { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .diptych.flip .side, .diptych.flip .body { order: initial; }
  .footmast { grid-template-columns: minmax(0, 1fr); }
  .masthead-meta { text-align: left; }
}
@media (max-width: 40rem) {
  .factlist li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xs); }
  .masthead-nav { gap: 0 var(--sp-lg); }
  section.band, section.band.tight, section.band.airy { padding: var(--sp-4xl) 0; }
  .marquee { padding: var(--sp-3xl) 0 var(--sp-4xl); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .masthead-nav, .sitefoot .footlinks { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   DOKUMENTSIDER (personvern) — BEVART FRA v0, IKKE ENDRE
   personvern.html er avhengig av hver regel under.
   ============================================================ */

body.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
body.centered main { max-width: 34rem; width: 100%; margin: 0 auto; }

body.doc { line-height: 1.65; padding: 2rem; }
body.doc main { max-width: 42rem; margin: 0 auto; }

.back {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 2.5rem;
}
.back:hover { color: var(--ink); }
.back .chevron { color: var(--orange); }

body.doc h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.updated { margin: 0 0 3rem; font-size: 0.8125rem; color: var(--muted); }

body.doc h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: none;
}

body.doc h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}

body.doc p { margin: 0 0 1rem; font-size: 0.9375rem; max-width: none; }
body.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.9375rem; }
body.doc li { margin-bottom: 0.4rem; }

body.doc a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }

body.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
}
body.doc th,
body.doc td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}
body.doc th {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.doc footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--muted);
}

/* Produktlogo (Rapid Response) */
.product-logo { display: block; height: 2.75rem; width: auto; max-width: 100%; }

/* LinkedIn-lenke under hver eier på Om oss */
.person-link { margin-top: var(--sp-lg); font-weight: 600; }