/*
 * DSOP theme — main stylesheet
 *
 * Tokens følger DESIGN.md v1.1.0 (Living Atlas). Implementasjonsdetaljer
 * for komponenter er på vei — denne fila etablerer designsystem-grunnlaget.
 *
 * Live Atlas-prototype: https://tilbud.nettsmed.no/dsop/mockup-atlas.html
 */

/* ============ WEBFONTER (selvhostet) ============ */
/* Begge familiene er OFL-lisensiert. De ble hentet fra Google Fonts 11.9.2026 og
   serveres na herfra: et kall til fonts.googleapis.com sender IP-en til hver
   eneste besokende videre til Google, og dette var nettstedets siste
   tredjepartskall.

   Filene er VARIABLE fonter. Google serverer én fil per subset som dekker hele
   vektaksen - 400, 500, 600, 700 og 800 peker alle pa samme woff2. Derfor er
   dette fire filer og ikke sju, og derfor star font-weight som et intervall.

   unicode-range er kopiert ordrett fra Googles egen CSS. Det betyr at
   latin-ext-filene bare lastes ned hvis en side faktisk bruker tegn derfra;
   norsk gjor det ikke (ae, o og a ligger alle i latin). De er med likevel fordi
   nettstedet lister europeiske organisasjonsnavn.

   Ingen kursiv: Google-URLen ba aldri om ital-aksen, sa <em> har alltid vart
   syntetisk skravstilt her. Det er bevart - a legge til ekte kursiv na ville
   endret utseendet. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ TOKENS (DESIGN.md v1.1.0) ============ */
:root {
  /* Hoeyden paa den sticky headeren. Brukes av heroen for aa regne ut
     hvor mye viewport som faktisk er tilgjengelig. */
  --dsop-header-h: 83px;
  /* Tickeren ligger absolutt i bunnen av heroen. Hoeyden brukes til aa gi
     like mye luft over og under innholdet. */
  --dsop-ticker-h: 49px;
  /* Colors — primary */
  --dsop-primary: #005587;
  --dsop-primary-deep: #003D6B;
  /* ADVARSEL: cyan er 2,14:1 mot hvit. Den er en DEKORFARGE — på mørk bunn
     (footer, 7,27:1) og som aksent i flater, aldri som tekst eller
     fokusmarkering på lyse flater. Til det finnes --dsop-teal-accessible
     (5,09:1). Sju fokusmarkeringer, seks gradient-overskrifter og fem kickers
     brukte cyan feil fram til 11.9.2026; se WCAG-gjennomgangen samme dag. */
  --dsop-cyan: #5BC0C9;
  --dsop-teal-accessible: #0E7A82;
  --dsop-teal-mid: #53A0AB;
  /* Grønn for «samfunn» på gevinstsiden (Georg 3.10.2026), i par med
     --dsop-primary for «økonomisk». Designsystemet hadde ingen grønn utenom
     statusfargen; denne er dypere og litt blåstukket så den står i familie med
     primary og teal, og er tydelig grønn ved siden av teal. Målt 6,08:1 mot
     heroens lyseste tone, 5,63:1 mot mist-pale og 5,05:1 der heroens rutenett
     legger seg oppå mist-pale — verste tilfelle, og fortsatt over 4,5. */
  --dsop-green-accessible: #1D6E40;
  --dsop-ink: #0A2540;
  --dsop-muted: #4B6079;
  --dsop-surface: #FFFFFF;

  /* Colors — extended */
  --dsop-mist-pale: #E8F5FC;
  --dsop-mist: #CEEAF7;
  --dsop-mist-deep: #BCE1E5;
  --dsop-border: #D6E4F0;

  /* Status */
  --dsop-status-live-text: #15803D;
  --dsop-status-live-bg: #F0FDF4;
  --dsop-status-pilot-text: #92400E;
  --dsop-status-pilot-bg: #FEF3C7;
  --dsop-status-planlagt-text: #1E40AF;
  --dsop-status-planlagt-bg: #DBEAFE;

  /* Typography */
  --dsop-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dsop-font-mono-family: 'JetBrains Mono', 'Fira Code', monospace;
  --dsop-font-display: clamp(3rem, 6.5vw, 5.5rem);
  --dsop-font-h1: clamp(2.25rem, 4.5vw, 3rem);
  --dsop-font-h2: clamp(1.875rem, 3.5vw, 2.25rem);
  --dsop-font-h3: 1.5rem;
  --dsop-font-h4: 1.1875rem;
  --dsop-font-subheading: 1.25rem;
  --dsop-font-body-lg: 1.125rem;
  --dsop-font-body: 1.0625rem;
  --dsop-font-body-sm: 0.875rem;
  --dsop-font-label: 0.75rem;
  --dsop-font-mono: 0.875rem;

  /* Spacing */
  --dsop-space-xs: 0.5rem;
  --dsop-space-sm: 1rem;
  --dsop-space-md: 1.5rem;
  --dsop-space-lg: 2rem;
  --dsop-space-xl: 3rem;
  --dsop-space-2xl: 4.5rem;
  --dsop-space-3xl: 7.5rem;
  --dsop-space-4xl: 10rem;

  /* Shapes */
  --dsop-rounded-sm: 8px;
  --dsop-rounded-md: 16px;
  --dsop-rounded-lg: 28px;
  --dsop-rounded-pill: 999px;
  --dsop-rounded-tile: 24px;
  --dsop-rounded-frame: 28px;

  /* Elevation */
  --dsop-shadow-card: 0 2px 12px rgba(0, 85, 135, 0.08);
  --dsop-shadow-card-hover: 0 12px 32px rgba(0, 85, 135, 0.16);
  --dsop-shadow-elevated: 0 8px 36px rgba(0, 85, 135, 0.20);
  --dsop-shadow-pill: 0 12px 28px -8px rgba(0, 85, 135, 0.25);
  --dsop-shadow-illu: 0 30px 60px -20px rgba(0, 85, 135, 0.25),
                     0 18px 36px -18px rgba(10, 37, 64, 0.30);
  --dsop-shadow-tile-hover: 0 20px 40px -16px rgba(0, 85, 135, 0.20);

  /* Gradients */
  --dsop-gradient-heading: linear-gradient(135deg, var(--dsop-primary) 0%, var(--dsop-teal-accessible) 100%);
  --dsop-gradient-tile-illu: linear-gradient(135deg, var(--dsop-mist-pale) 0%, var(--dsop-mist) 100%);
}

/* Seksjonsavstandene er satt for desktop. På en telefon er 7,5rem 120px — 15 %
   av skjermhøyden, og to tilstøtende seksjoner ga 240px tomt felt. Der begge er
   hvite leses det som at siden er slutt. De to største trinnene skaleres derfor
   ned; resten av skalaen står, fordi den brukes til luft inne i komponenter der
   1:1 fortsatt er riktig.

   MERK: disse må stå ETTER at :root er lukket. Legges de inn midt i blokken,
   havner resten av tokenene — radius, skygger og gradienter — inne i
   mediaspørringen og forsvinner på desktop. Klammene balanserer likevel, så en
   opptelling fanger det ikke. */
@media (max-width: 900px) {
  :root {
    --dsop-space-2xl: 3.25rem;
    --dsop-space-3xl: 4.5rem;
  }
}
@media (max-width: 560px) {
  :root {
    --dsop-space-2xl: 2.5rem;
    --dsop-space-3xl: 3.5rem;
  }
}

/* ============ RESET + BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--dsop-font-family);
  font-size: var(--dsop-font-body);
  line-height: 1.65;
  color: var(--dsop-ink);
  background: var(--dsop-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img, svg, picture { max-width: 100%; display: block; }

a {
  color: var(--dsop-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--dsop-cyan);
  text-decoration-thickness: 1.5px;
  transition: color 240ms ease-in-out, text-decoration-color 240ms ease-in-out;
}
a:hover { color: var(--dsop-teal-accessible); text-decoration-color: var(--dsop-primary); }
a:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: inherit; color: var(--dsop-ink); margin: 0 0 var(--dsop-space-md); font-weight: 800; }
h1 { font-size: var(--dsop-font-h1); line-height: 1.1; letter-spacing: -1.2px; }
h2 { font-size: var(--dsop-font-h2); line-height: 1.15; letter-spacing: -0.8px; }
h3 { font-size: var(--dsop-font-h3); line-height: 1.3; letter-spacing: -0.4px; font-weight: 700; }
h4 { font-size: var(--dsop-font-h4); line-height: 1.35; letter-spacing: -0.2px; font-weight: 700; }
p  { margin: 0 0 var(--dsop-space-md); }

/* ============ LAYOUT ============ */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--dsop-space-xl); }
@media (max-width: 768px) { .wrap { padding-inline: var(--dsop-space-lg); } }
@media (max-width: 480px) { .wrap { padding-inline: var(--dsop-space-md); } }
@media (max-width: 768px) { .wrap { padding: 0 var(--dsop-space-md); } }

.section { padding: var(--dsop-space-3xl) 0; }

/* To seksjoner etter hverandre gir dobbel avstand — 240px blekk-til-blekk på
   desktop. Der begge har samme bakgrunn, som mellom gevinstlista og
   bærekraftsmålene, finnes det ingen kant som forklarer feltet, og det leses som
   at siden er slutt. Den andre seksjonen bærer derfor bare halv topp-padding;
   summen blir én tydelig seksjonsavstand framfor to stablede. */
.section + .section { padding-top: var(--dsop-space-2xl); }

/* Disse har seksjonsavstand skrevet i rem framfor token. De må skaleres samme
   vei, ellers blir mobilrytmen ujevn: noen seksjoner strammes inn og andre ikke.
   Padding-verdien settes ikke på nytt her — bare skalaen. */
@media (max-width: 900px) {
  :is(.story, .tj-hero, .tj-section, .tj-counter-strip--gevinster,
      .om-hero, .om-erfaringer, .om-future, .om-gov, .om-quote, .kontakt-routing, .kontakt-personer, .kontakt-bits,
      .fp-aktor, .fp-sdg, .aktor-archive__hero, .fk-archive__hero, .site-footer) {
    padding-top: var(--dsop-space-2xl);
    padding-bottom: var(--dsop-space-2xl);
  }
}

/* ============ A11Y ============ */
/* <main> har tabindex="-1" for skip-linken. Uten dette ville den fått
   fokusramme ved museklikk inne i innholdet, som er støy — :focus-visible gir
   den bare ved tastatur. */
main:focus { outline: none; }
main:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: -3px; }

.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  background: var(--dsop-primary);
  color: #fff;
  padding: var(--dsop-space-sm) var(--dsop-space-md);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--dsop-rounded-sm);
  z-index: 100;
}
.skip-link:focus {
  left: var(--dsop-space-sm);
  top: var(--dsop-space-sm);
}

:focus-visible {
  outline: 3px solid var(--dsop-teal-accessible);
  outline-offset: 2px;
}

/* Teal holder bare på lyse flater. Mot footerens mørke bunn gir den
   2,5:1 (under 1.4.11); cyan gir ca. 6:1. */
.site-footer :focus-visible {
  outline-color: var(--dsop-cyan);
}

/* ============ HEADER ============ */
/* ============ HEADER (H1: Minimal blueprint-bar) ============ */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dsop-border);
  z-index: 50;
  isolation: isolate;
}
/* WP admin-bar offset — pushdown for sticky-header når innlogget */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
.admin-bar .mobile-nav { top: 46px; }
@media (min-width: 783px) {
  .admin-bar .mobile-nav { top: 32px; }
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-block: 1.125rem;
}
@media (max-width: 600px) {
  .site-header__inner { gap: 1rem; }
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--dsop-ink);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
}

/* Ekte DSOP-logo (erstatter det gamle CSS-merket + «DSOP»-teksten). */
.site-header__logo { height: 46px; width: auto; display: block; }
.mobile-nav__brand .site-header__logo { height: 44px; }
/* Header: tagline-tekst i to linjer til høyre for merket. */
.site-header__brand-tag {
  font-family: var(--dsop-font-family); font-weight: 700;
  font-size: 0.6875rem; line-height: 1.15; letter-spacing: 0.2px;
  text-transform: uppercase; color: var(--dsop-muted);
}
/* Footer: full hvit logo med tagline — stor og sentrert øverst, over gevinst-sitatet. */
.site-footer__brand { text-align: center; margin-bottom: var(--dsop-space-xl); }
.site-footer__brand-link { display: inline-block; transition: opacity 200ms ease; }
.site-footer__brand-link:hover { opacity: 0.85; }
.site-footer__brand .site-footer__logo { height: 132px; width: auto; display: inline-block; }

.site-nav { margin-left: auto; }
.site-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.75rem;
}
.site-nav__list a {
  color: var(--dsop-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item a,
.site-nav__list .current_page_item a {
  color: var(--dsop-primary);
  border-bottom-color: var(--dsop-cyan);
}

/* .site-header__cta er fjernet 7.9.2026 sammen med «Teknisk dok»-knappen i
   headeren (Georg). Lenken lever nå i bunnteksten. */

/* Hamburger-toggle + close — felles button-stil */
.site-header__toggle,
.mobile-nav__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  border-radius: 8px;
  transition: background 200ms;
}
.site-header__toggle-bars,
.mobile-nav__close-bars {
  position: relative;
  width: 24px;
  height: 18px;
}
.site-header__toggle-bars span,
.mobile-nav__close-bars span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
}
.site-header__toggle-bars span { background: var(--dsop-ink); }
.site-header__toggle-bars span:nth-child(1) { top: 0; }
.site-header__toggle-bars span:nth-child(2) { top: 8px; }
.site-header__toggle-bars span:nth-child(3) { top: 16px; }
.site-header__toggle:hover { background: rgba(10, 37, 64, 0.06); }

.mobile-nav__close { display: inline-flex; }
.mobile-nav__close-bars span {
  top: 8px;
  background: #fff;
}
.mobile-nav__close-bars span:nth-child(1) { transform: rotate(45deg); }
.mobile-nav__close-bars span:nth-child(2) { transform: rotate(-45deg); }
.mobile-nav__close:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__toggle { display: inline-flex; }
}

/* ============ MOBIL-MENY (M1: Full-screen blueprint overlay) ============ */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--dsop-ink);
  z-index: 100;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(91, 192, 201, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 192, 201, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}
.mobile-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  text-decoration: none;
}
.mobile-nav__nav { flex: 1; }
.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.mobile-nav__list a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.625rem;
  letter-spacing: -0.8px;
  line-height: 1.1;
  border-left: 2px solid transparent;
  padding-left: 0.875rem;
  transition: color 200ms, border-color 200ms;
}
.mobile-nav__list a:hover,
.mobile-nav__list .current-menu-item a,
.mobile-nav__list .current_page_item a {
  color: var(--dsop-cyan);
  border-left-color: var(--dsop-cyan);
}
.mobile-nav__foot {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav__foot-pills {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.mobile-nav__foot-pill {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  background: rgba(91, 192, 201, 0.12);
  color: var(--dsop-cyan);
  border-radius: 999px;
  letter-spacing: 0.5px;
}
/* .mobile-nav__foot-cta fjernet 7.9.2026 — samme grunn som
   .site-header__cta. Pillene i .mobile-nav__foot står igjen. */

body.has-mobile-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
}

/* ============ FOOTER (F2: Pulse-footer) ============ */
.site-footer {
  background: var(--dsop-ink);
  color: #fff;
  padding: 5rem 0 2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(91, 192, 201, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0, 85, 135, 0.32) 0%, transparent 60%);
  background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
  pointer-events: none;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
}
.site-footer__col h3 {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-cyan);
  margin: 0 0 1rem;
}
.site-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Var 0.5rem. Lenkene er naa 24px hoeye (2.5.8), og flyttet fra 17,5px med
     8px mellomrom til 24px med 8px mellomrom ville gitt 14,5px blekk-til-blekk
     der det foer var 8. Luften maales mellom teksten, ikke mellom boksene:
     0.125rem + 2 x 3,25px innvendig padding gir 8,5px — praktisk talt som foer. */
  gap: 0.125rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}
/* ---- Klikkflater i footeren (WCAG 2.2, 2.5.8 Target Size Minimum, AA) ----
   Malt foer: 17,5px hoeye. Kriteriet krever 24x24 CSS-piksler, og DESIGN.md
   lover 44x44 paa mobil. Loeftet med padding og min-height framfor stoerre
   skrift — det visuelle uttrykket skal staa uendret.

   inline-flex, ikke block: treffflaten skal foelge teksten i bredden. Et
   block-element ville strukket seg over hele kolonnen og gjort halve footeren
   klikkbar uten at noe tydet paa det. */
.site-footer__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 200ms;
}
.site-footer__menu a:hover { color: var(--dsop-cyan); }
@media (max-width: 768px) {
  /* Kolonnene stables her, saa hoeyden koster ingen sidelengs plass. gap til 0:
     44px-boksene baerer luften selv (26,5px blekk-til-blekk), og 8px paa toppen
     ville blitt et hopp i rytmen. */
  .site-footer__menu { gap: 0; }
  .site-footer__menu a { min-height: 44px; }
}

.site-footer__status {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}
.site-footer__status-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.site-footer__status-row strong {
  color: var(--dsop-cyan);
  font-weight: 700;
}

.site-footer__meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.75);
  align-items: center;
}
/* Samme loeft som i menykolonnene: malt 18,1px (14,5px paa .site-footer__owner,
   som er en lenke inne i en span og derfor arvet en mindre linjeboks). 2.5.8
   krever 24. Raden er allerede align-items:center, saa hoeyere lenkebokser
   sentreres mot de smaa tekstspennene uten at noe forskyves. */
.site-footer__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 200ms;
}
.site-footer__meta a:hover,
.site-footer__owner:hover { color: var(--dsop-cyan); }
.site-footer__credit { margin-left: auto; }
@media (max-width: 600px) {
  .site-footer__credit { margin-left: 0; }
  /* Raden brekker til flere linjer her. gap gjelder begge retninger, saa 44px
     hoeye lenker med 1,25rem radgap ville gitt 64px mellom linjene. Radgapen
     nulles; de 44px baerer luften selv. Kolonnegapen staar igjen paa 1,25rem,
     som ogsaa dekker avstandskravet mellom naboliggende maal. */
  .site-footer__meta { gap: 0 1.25rem; }
  .site-footer__meta a { min-height: 44px; }
}

/* ============ ATLAS-SECTION (tjeneste-grid-wrapper på front-page) ============ */
/* Seksjon som holder de 15 tjeneste-tiles (atlas-tile) på forsiden.
   Header bruker kicker-pill (JetBrains Mono) + h2 med gradient-em + lede.
   Brukt av: front-page.php (#tjenester) */
.atlas { background: var(--dsop-surface); }

.atlas__head {
  max-width: 48rem;
  margin: 0 auto var(--dsop-space-2xl);
  text-align: center;
}

.atlas__head h2 {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: var(--dsop-font-h2);
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin: 0 0 var(--dsop-space-md);
}
.atlas__head h2 em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.atlas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--dsop-space-lg);
}

/* ============ ATLAS-TILE (tjeneste-kort i grid) ============ */
/* Spec: DESIGN.md v1.1.0 › components › atlas-tile
   Referanse: mockup-atlas.html (linje 281-322)
   Brukt av: template-parts/atlas-tile.php */
.atlas-tile {
  position: relative;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
  padding: var(--dsop-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--dsop-space-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.atlas-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--dsop-mist-pale) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
}
.atlas-tile:hover {
  transform: translateY(-6px);
  border-color: var(--dsop-primary);
  box-shadow: var(--dsop-shadow-tile-hover);
  text-decoration: none;
  color: inherit;
}
.atlas-tile:hover::before { opacity: 1; }
.atlas-tile:focus-visible {
  outline: 3px solid var(--dsop-teal-accessible);
  outline-offset: 3px;
}

.atlas-tile__illu {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--dsop-gradient-tile-illu);
  border-radius: var(--dsop-rounded-md);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.atlas-tile__illu object {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.atlas-tile__illu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.atlas-tile__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--dsop-font-family);
  font-size: 0.625rem;
  font-weight: 800;
  padding: 0.3rem 0.625rem;
  border-radius: var(--dsop-rounded-pill);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}
.atlas-tile__badge-icon { font-size: 0.75rem; line-height: 1; }
.atlas-tile__badge--live {
  background: var(--dsop-status-live-bg);
  color: var(--dsop-status-live-text);
}
.atlas-tile__badge--pilot {
  background: var(--dsop-status-pilot-bg);
  color: var(--dsop-status-pilot-text);
}
.atlas-tile__badge--planlagt {
  background: var(--dsop-status-planlagt-bg);
  color: var(--dsop-status-planlagt-text);
}

.atlas-tile__body {
  position: relative;
  z-index: 1;
}
.atlas-tile__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-xs);
}
.atlas-tile__lede {
  font-size: var(--dsop-font-body-sm);
  line-height: 1.55;
  color: var(--dsop-muted);
  margin: 0;
}

/* ============ BUTTONS (delte CTA-stiler) ============ */
/* Konsolidert 11.9.2026: .btn var definert to ganger, 800 linjer fra hverandre.
   Den nederste kopien vant, og verdiene her er dens - ikke den opprinnelige
   blokkens. Forskjellene var padding (0.875rem mot 1rem vertikalt), font-family
   (var(--dsop-font-family) mot inherit) og transition (all mot fire navngitte
   props). gap var 0.5rem begge steder; --dsop-space-xs ER 0.5rem. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dsop-space-xs);
  padding: 0.875rem 1.625rem;
  font-family: var(--dsop-font-family);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--dsop-rounded-pill);
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 200ms;
}
.btn:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: 3px; }
.btn--primary { background: var(--dsop-ink); color: #fff; }
/* Pilen foelger hva knappen faktisk gjoer, framfor aa vaere hardkodet i
   malen. Nedpil naar den scroller i siden, hoeyrepil naar den navigerer.
   Hero-CTA-en peker paa /tjenester — en nedpil der var misvisende. */
a.btn--primary[href^="#"]::after { content: '\2193'; margin-left: 0.25rem; }
/* Eksterne knapper utelates: de har allerede ↗ i teksten, som betyr noe annet
   enn den interne høyrepilen — «åpnes utenfor nettstedet», ikke «videre her».
   Uten unntaket fikk «Teknisk dokumentasjon ↗» to piler da den ble
   primærknapp 7.9.2026. */
a.btn--primary:not([href^="#"]):not([target="_blank"])::after { content: '\2192'; margin-left: 0.25rem; }
.btn--primary:hover { background: var(--dsop-primary); color: #fff; }
.btn--ghost {
  background: var(--dsop-surface);
  color: var(--dsop-ink);
  border-color: var(--dsop-border);
}
.btn--ghost:hover {
  background: var(--dsop-ink);
  color: #fff;
  border-color: var(--dsop-ink);
}
@keyframes dsop-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(91, 192, 201, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(91, 192, 201, 0); }
}
@keyframes dsop-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Floating data-pills */
.data-pill {
  position: absolute;
  background: var(--dsop-surface);
  border-radius: 14px;
  padding: 0.875rem 1.125rem;
  box-shadow: var(--dsop-shadow-pill);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--dsop-font-family);
  font-size: 0.8125rem;
  animation: dsop-float-pill 6s ease-in-out infinite;
}
@keyframes dsop-float-pill {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.data-pill__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--dsop-mist-pale);
  display: grid;
  place-items: center;
  color: var(--dsop-primary);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.data-pill__icon--cyan { background: var(--dsop-cyan); color: var(--dsop-ink); }
.data-pill strong {
  display: block;
  font-weight: 800;
  color: var(--dsop-ink);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.4px;
}
.data-pill em {
  font-style: normal;
  color: var(--dsop-muted);
  font-size: 0.6875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Konsolidert 11.9.2026: .data-pill-familien var definert to ganger. Den nederste
   kopien vant, og verdiene under er dens - ikke den opprinnelige blokkens.
   Forskjellene var .data-pill__icon font-size (1rem mot 1.125rem), left paa begge
   posisjonsvariantene, og 900px-bruddet. 600px-bruddet fantes bare i kopi to. */
.data-pill--top    { top: -1.25rem;   left: -2.25rem; animation-delay: 0s; }
.data-pill--bottom { bottom: -1.5rem; left: 22%;      animation-delay: 4s; }

@media (max-width: 900px) {
  .data-pill--top    { left: -0.5rem; }
  .data-pill--bottom { left: 18%; }
}

@media (max-width: 600px) {
  .data-pill--top    { left: 0; top: -0.75rem; }
  .data-pill--bottom { left: 12%; }
  .data-pill { font-size: 0.75rem; padding: 0.625rem 0.875rem; }
  .data-pill__icon { width: 30px; height: 30px; }
}

/* Respekter prefers-reduced-motion — slå av subtle float-animasjoner */
@media (prefers-reduced-motion: reduce) {
  .data-pill {
    animation: none !important;
  }
}

/* ============ PEOPLE-BAND (Om DSOP-narrativ-divider) ============ */
/* Spec: DESIGN.md v1.1.0 › components › people-band-section
   Referanse: mockup-atlas.html (linje 159-205, 471-484)
   Side 2-illustrasjonen (folkemengden som danner DSOP-bokstavene) til
   høyre, tekst-blokk venstre. Brukes som narrativ-divider mellom
   counter-strip og atlas-grid, og som åpner på Om DSOP-siden. */
.people-band {
  background: var(--dsop-surface);
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-xl);
  position: relative;
}
.people-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--dsop-space-2xl);
  align-items: center;
}
.people-band__text-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--dsop-space-xs);
  font-family: var(--dsop-font-mono-family);
  font-size: var(--dsop-font-label);
  color: var(--dsop-teal-accessible);
  padding: 0.375rem 0.875rem;
  background: var(--dsop-mist-pale);
  border-radius: var(--dsop-rounded-pill);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.people-band__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-sm);
}
.people-band__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.people-band__lede {
  font-size: var(--dsop-font-body);
  line-height: 1.65;
  color: var(--dsop-muted);
  max-width: 32rem;
  margin: 0;
}
.people-band__illu {
  background: linear-gradient(135deg, var(--dsop-mist-pale) 0%, var(--dsop-mist) 100%);
  border-radius: var(--dsop-rounded-tile);
  padding: var(--dsop-space-lg);
  box-shadow: 0 20px 50px -20px rgba(0, 85, 135, 0.18);
  overflow: hidden;
}
.people-band__illu object {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

@media (max-width: 900px) {
  .people-band {
    padding: var(--dsop-space-xl) 0 var(--dsop-space-lg);
  }
  .people-band__grid {
    grid-template-columns: 1fr;
    gap: var(--dsop-space-lg);
  }
  /* Bildet først når kolonnene stables. På desktop står det ved siden av
     overskriften og leses samtidig; stablet havnet det under hele ingressen og
     mistet koblingen til teksten det illustrerer. */
  .people-band__illu { order: -1; }
  .people-band__text { order: 0; }
}

/* ============ SECTION HEADER (delt mellom template-parts) ============ */
/* Felles header-block for seksjoner med kicker + h2 + lede. Pakker
   inn lede-paragrafen så vi slipper å duplisere CSS per template-part. */
.section-header {
  max-width: 48rem;
  margin: 0 auto var(--dsop-space-xl);
  text-align: center;
}
.section-header h2 { margin-bottom: var(--dsop-space-md); }

/* Kicker — label-caps over h2/h1 (DESIGN.md v1.1.0 §Typography). */
.kicker {
  display: inline-block;
  font-size: var(--dsop-font-label);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dsop-muted);
  margin: 0 0 var(--dsop-space-sm);
  padding-left: 0.75rem;
  border-left: 2px solid var(--dsop-primary);
  line-height: 1.4;
}

/* ============ ATLAS GRID (delt mellom front-page og archive-tjeneste) ============ */
/* Spec: DESIGN.md v1.1.0 › components › atlas-tile
   Referanse: mockup-atlas.html (linje 277-280)
   3-kolonners grid på desktop, 2 på tablet, 1 på mobil. */
.atlas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dsop-space-lg);
}
@media (max-width: 1024px) {
  .atlas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .atlas__grid { grid-template-columns: 1fr; }
}

/* ============ ARCHIVE: TJENESTE-LISTING ============ */
/* Brukt av: archive-tjeneste.php
   Lettere hero enn front-page (mindre seremoni). */
/* Samkjørt med .om-hero-familien 7.9.2026 (Om DSOP, Kontakt, Arkiv): samme
   myke topp-til-bunn-gradient og samme blueprint-styrke, og uten den harde
   kantlinjen som skilte denne siden ut. Teksten står fortsatt venstrestilt —
   .om-hero midtstiller på desktop, men det skal ikke spres videre: ingresser
   og brødtekst venstrestilles. */
.archive-hero {
  background: linear-gradient(180deg, #FAFCFE, var(--dsop-mist-pale));
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.archive-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
  pointer-events: none;
}
.archive-hero > .wrap { position: relative; z-index: 1; }
.archive-hero__quote-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: var(--dsop-space-xs);
}
.archive-hero__quote-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--dsop-teal-accessible);
}

/* Gevinsttallet som sidens hovedelement (Georg 8.9.2026). Tallet er h1-ens
   dominerende del; setningen under bærer betydningen og holder overskriften
   lesbar som språk, ikke bare som et tall. */
.archive-hero__tall {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-sm);
  max-width: 20ch;
}
.archive-hero__tall em {
  font-style: normal;
  display: block;
  /* Tallet er fortsatt sidens hovedelement (Georg 8.9), men skalaen er dempet
     fra 5rem så spranget ned til de øvrige sidetoppenes 2,75rem ikke blir så
     brått. Tjenester skal skille seg ut, ikke tilhøre et annet nettsted. */
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.07em; margin-right: -0.07em;
}
.archive-hero__tall-tekst {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  /* Ink, ikke muted: setningen er del av h1-en og skal lese som tittel, slik
     de øvrige sidetoppene gjør. Grå her fikk Tjenester til å se ut som en
     annen mal enn resten. --dsop-muted er reservert for ingressen under. */
  color: var(--dsop-ink);
  letter-spacing: -1.2px;
  max-width: 26ch;
}

.archive-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -1.6px;
  max-width: 22ch;
  overflow-wrap: break-word;
  hyphens: auto;
  margin: 0 0 var(--dsop-space-md);
}
.archive-hero .lede {
  font-size: var(--dsop-font-h4);
  line-height: 1.55;
  color: var(--dsop-muted);
  max-width: 38rem;
  margin: 0;
}

.archive-empty {
  text-align: center;
  color: var(--dsop-muted);
  font-size: var(--dsop-font-body-lg);
  padding: var(--dsop-space-2xl) 0;
}

@media (max-width: 768px) {
  .archive-hero { padding: var(--dsop-space-xl) 0 var(--dsop-space-lg); }
}

/* ============================================================
   Tjeneste-detalj (single-tjeneste.php) — Living Atlas-stil
   ============================================================ */

.tj-single { background: var(--dsop-surface); }

/* ----- A11Y utility ----- */
/* .screen-reader-text er WordPress' eget navn på samme mønster — brukes av
   kjernens markup, blant annet overskriften i the_posts_pagination(). */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----- HERO ----- */
.tj-hero {
  position: relative;
  /* Lik luft over og under. Var 8rem/5rem — 128px mot 80px — som ga
     tydelig skjev vekt i heroen. */
  padding: 6rem 0;
  background: var(--dsop-mist-pale);
  overflow: hidden;
  isolation: isolate;
}
/* Mobil: kutt unødvendig toppluft i tjeneste-hero (8rem er for mye på smal skjerm). */
@media (max-width: 768px) { .tj-hero { padding: 3rem 0 3rem; } }
.tj-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
  pointer-events: none;
}
.tj-hero__breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  color: var(--dsop-muted);
  margin-bottom: 2rem;
}
.tj-hero__breadcrumb a { color: var(--dsop-muted); text-decoration: none; }
.tj-hero__breadcrumb a:hover { color: var(--dsop-primary); text-decoration: underline; }
.tj-hero__breadcrumb span[aria-current="page"] { color: var(--dsop-ink); font-weight: 600; }
.tj-hero__breadcrumb span[aria-hidden] { color: var(--dsop-border); }

/* Tap-target ≥24px (WCAG 2.2 / mobil) for alle breadcrumb-lenker — gir hit-area
   uten å endre visuell rytme nevneverdig (tekst ~18px → 24px). */
.tj-hero__breadcrumb a,
.aktor-single__crumb a,
.fk-single__crumb a,
.brk-single__crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.tj-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) {
  /* 3rem var riktig da teksten kom først; med illustrasjonen øverst leses den
     som en egen blokk hvis gapet er så stort. */
  .tj-hero__layout { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Samme grep som på forsidens Om DSOP-seksjon: illustrasjonen først når
     kolonnene stables, ellers ligger den etter brødsmuler, kicker, tittel,
     ingress, fakta og knapper — så langt nede at den ikke leses som en del av
     toppen i det hele tatt. */
  .tj-hero__illu { order: -1; }
  .tj-hero__text { order: 0; }
}

.tj-hero__kicker {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-primary-deep);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.tj-hero__kicker-live { color: var(--dsop-teal-accessible); font-weight: 700; }

/* Tittelen skal aldri kutte et ord. --tj-ord er antall tegn i det lengste
   ordet (satt i single-tjeneste.php). 0.6em per tegn er målt bredde i
   Plus Jakarta Sans 800 (høyest 0.56) pluss margin for Safari, som tegner
   litt bredere. Skriften krymper bare når ordet ellers ikke får plass i
   kolonnen, og boksen vokser forbi 18ch når ett ord alene er bredere.
   hyphens: manual fordi automatisk orddeling ikke har norsk ordbok i Safari,
   og da kuttes ordet uten bindestrek; overflow-wrap er siste utvei. */
.tj-hero__text { container-type: inline-size; }
.tj-hero__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: min(clamp(2.25rem, 4.5vw, 3.75rem), calc(100cqi / (var(--tj-ord, 10) * 0.6)));
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--dsop-ink);
  margin: 0 0 1.25rem;
  max-width: min(100%, max(18ch, calc(var(--tj-ord, 10) * 0.6em)));
  hyphens: manual;
  overflow-wrap: break-word;
}
.tj-hero__lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--dsop-muted);
  max-width: 36rem;
  margin: 0 0 2rem;
}
.tj-hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.tj-hero__illu { position: relative; }
.tj-hero__illu-frame {
  position: relative;
  aspect-ratio: 16 / 12;
  background: var(--dsop-surface);
  border-radius: var(--dsop-rounded-frame);
  box-shadow: var(--dsop-shadow-illu);
  overflow: hidden;
  animation: dsop-float 8s ease-in-out infinite;
}
@keyframes dsop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.tj-hero__illu-frame img,
.tj-hero__illu-frame object { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ----- COUNTER-STRIP ----- */
.tj-counter-strip {
  background: var(--dsop-ink);
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.tj-counter-strip::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(91, 192, 201, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0, 85, 135, 0.45) 0%, transparent 55%);
  background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
  mask-image: radial-gradient(ellipse at center, black 0%, black 60%, transparent 95%);
}
.tj-counter-strip::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--dsop-cyan) 50%, transparent 100%);
  opacity: 0.35;
}

/* Gevinstseksjonen: tall og lister i samme mørke flate (Georg 4.9.2026).
   Innholdet må ligge over ::before-mønsteret, som .tj-counter-strip__grid
   tidligere sørget for — her løftes .wrap i stedet, siden gridet er borte. */
.tj-counter-strip--gevinster > .wrap { position: relative; z-index: 1; }
.tj-counter-strip--gevinster { padding: 6rem 0; }
.tj-counter-strip--gevinster .tj-counter { margin-bottom: 3rem; }
.tj-counter-strip--gevinster .tj-counter__label { max-width: 36rem; color: rgba(255, 255, 255, 0.72); }
.tj-counter__num {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -2.5px;
  white-space: nowrap;
}
.tj-counter__num-unit {
  font-size: 0.32em;
  color: rgba(255,255,255,0.7);
  margin-left: 0.5rem;
  letter-spacing: -0.5px;
  font-weight: 700;
}
.tj-counter--hero .tj-counter__num { font-size: clamp(4.5rem, 10vw, 8rem); color: var(--dsop-cyan); letter-spacing: -4.5px; }
.tj-counter__label {
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  max-width: 32rem;
  margin-top: 1.25rem;
}

/* ----- SECTION-WRAPPER ----- */
.tj-section { padding: 6rem 0; background: var(--dsop-surface); }
.tj-section--mist { background: linear-gradient(180deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%); }
.tj-section__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--dsop-ink);
  margin: 0 0 3rem;
  max-width: 30ch;
}
.tj-section__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Samme tittel på mørk flate — brukes av den sammenslåtte gevinstseksjonen.
   Marginen er mindre her fordi gevinsttallet følger rett under og skal lese
   som del av samme blokk, ikke som en ny. */
.tj-section__title--pa-morkt {
  color: #fff;
  margin-bottom: 1.5rem;
}

/* ----- PROBLEM + LØSNING ----- */
.tj-pl-stack { display: grid; gap: 1.75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .tj-pl-stack { grid-template-columns: 1fr; } }
.tj-pl-card {
  padding: 2.5rem 2.25rem;
  border-radius: var(--dsop-rounded-tile);
  background: linear-gradient(135deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%);
  border: 1px solid var(--dsop-border);
  box-shadow: var(--dsop-shadow-card);
}
/* Ved 320 px stakk kortene 2 px ut (1.4.10): 2,25rem sidepolstring pluss et
   langt ord ga mer enn kolonnen hadde. min-width:0 lar grid-cella krympe. */
.tj-pl-card { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 400px) {
  .tj-pl-card { padding: 2rem 1.5rem; }
}
.tj-pl-card--losning {
  background: linear-gradient(135deg, var(--dsop-mist) 0%, var(--dsop-mist-pale) 100%);
}
.tj-pl-card h3 {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-primary);
  margin: 0 0 1rem;
}
.tj-pl-card__body p { line-height: 1.65; color: var(--dsop-ink); }

/* ----- STATUS-CALLOUT / MILEPÆLER ----- */
.tj-callout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3rem;
  padding: 2.5rem;
  background: var(--dsop-ink);
  color: #fff;
  border-radius: var(--dsop-rounded-tile);
  position: relative;
  overflow: hidden;
  align-items: center;
}
@media (max-width: 900px) { .tj-callout { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; } }
.tj-callout::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(91, 192, 201, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.tj-callout > * { position: relative; z-index: 1; }
@keyframes dsop-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(91, 192, 201, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(91, 192, 201, 0); }
}
.tj-callout h3 {
  font-family: var(--dsop-font-family);
  font-size: 1.5rem; font-weight: 800;
  color: #fff; margin: 0 0 1rem;
  letter-spacing: -0.6px;
}
.tj-callout__body { color: rgba(255,255,255,0.8); font-size: 0.9375rem; line-height: 1.65; }
.tj-callout__body p { margin: 0 0 0.875rem; }
.tj-callout__nums {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 1.5rem;
}
.tj-callout__num-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 1.25rem;
  align-items: end;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tj-callout__num-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.tj-callout__num-big {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 0.95;
  letter-spacing: -2px;
  color: var(--dsop-cyan);
  white-space: nowrap;
}
.tj-callout__num-label {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
  letter-spacing: 0.3px;
}
.tj-callout__num-label strong {
  color: #fff;
  font-weight: 700;
  display: block;
}

/* ----- FELLESKOMP TILE GRID ----- */
.tj-fk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.tj-fk-tile {
  padding: 2rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
  display: flex; flex-direction: column; gap: 1rem;
  transition: all 240ms ease;
}
.tj-fk-tile:hover { border-color: var(--dsop-cyan); box-shadow: var(--dsop-shadow-tile-hover); transform: translateY(-3px); }
.tj-fk-tile__num {
  font-family: var(--dsop-font-mono-family);
  font-weight: 800; font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--dsop-teal-accessible);
}
.tj-fk-tile__navn {
  font-family: var(--dsop-font-family);
  font-weight: 800; font-size: 1.25rem;
  color: var(--dsop-ink);
  margin: 0;
}
.tj-fk-tile__beskr { font-size: 0.875rem; color: var(--dsop-muted); margin: 0; line-height: 1.55; flex-grow: 1; }
.tj-fk-tile__link {
  font-family: var(--dsop-font-family);
  font-weight: 700; font-size: 0.875rem;
  color: var(--dsop-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--dsop-cyan);
  padding-bottom: 2px;
  align-self: flex-start;
}
.tj-fk-tile__link:hover { color: var(--dsop-teal-accessible); }

/* ----- GEVINSTER ----- */
.tj-gev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) { .tj-gev-grid { grid-template-columns: 1fr; } }
.tj-gev-col {
  padding: 2.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
}
.tj-gev-col h3 {
  font-family: var(--dsop-font-family);
  font-weight: 800; font-size: 1.375rem;
  color: var(--dsop-ink);
  margin: 0 0 1.25rem;
}
.tj-gev-col h3 small {
  display: block;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 0.375rem;
}
.tj-gev-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.tj-gev-col li {
  padding-left: 1.5rem; position: relative;
  font-size: 0.9375rem; line-height: 1.6; color: var(--dsop-ink);
}
.tj-gev-col li::before {
  content: ''; position: absolute; left: 0; top: 0.5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dsop-cyan); border: 2px solid var(--dsop-mist-pale);
}

/* ----- AKTØRER (floating cards) ----- */
.tj-akt-grid {
  display: grid;
  /* 220px, ikke 180px: ved 180 pakket 5 aktoerer seg til 213px kort, og
     navnekolonnen ble 91px — for smal til at "Digitaliserings-" (113px) fikk
     plass, saa orddelingen falt paa tre linjer med vilkaarlige brudd. 220px gir
     149px navnekolonne og to linjer. Paavirker kun sider med 5+ aktoerer;
     sider med 4 eller faerre rendret allerede 4 i bredden. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.tj-akt-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-md);
  text-decoration: none;
  transition: all 240ms ease;
}
.tj-akt-card:hover { border-color: var(--dsop-cyan); box-shadow: var(--dsop-shadow-card-hover); transform: translateY(-2px); }
.tj-akt-card__mono {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--dsop-primary) 0%, var(--dsop-teal-accessible) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--dsop-font-family);
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.tj-akt-card__navn {
  font-family: var(--dsop-font-family);
  font-weight: 700; font-size: 0.9375rem;
  color: var(--dsop-ink);
  /* Flex-barn har min-width:auto og kan derfor ikke krympe under ordets egen
     bredde. Et langt navn uten bindestrek ("Digitaliseringsdirektoratet")
     vokste dermed ut av kortet og malte over nabokortet (Georg 4.9.2026).
     min-width:0 lar feltet krympe, overflow-wrap garanterer at det aldri
     flyter over, og hyphens:auto gir den norske orddelingen Georg ba om
     — den virker fordi <html lang="nb-NO">. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Partner-aktør viser ekte logo (ikke initialer). Logo på hvit boks; mono som fallback. */
.tj-akt-card__logo { width: 64px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tj-akt-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; background: #fff; border: 1px solid var(--dsop-border); border-radius: 8px; padding: 3px 6px; box-sizing: border-box; }

/* ----- Global focus-visible (WCAG 2.4.7) for tjeneste-detalj (og rest av siden) ----- */
.tj-single a:focus-visible,
.tj-single button:focus-visible,
.tj-single [tabindex]:focus-visible {
  outline: 3px solid var(--dsop-teal-accessible);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  .tj-hero__illu-frame,
  .data-pill {
    animation: none !important;
  }
}

/* ============ FRONT-PAGE D-FINAL: CINEMATIC HERO + STORY-RAIL ============ */
/* Erstatter tidligere hero-blueprint + counter-strip styling fra front-page.
   People-band, SDG og partner-stripe forblir uendret. */

.hero-c {
  position: relative;
  /* svh, ikke vh: unngaar at mobilens adressefelt gjoer heroen for hoey.
     Headeren er sticky og ligger i flyten over — uten fratrekket blir
     heroen noeyaktig headerhoeyden for hoey, og tickeren faller under
     folden. Laa tidligere kun i en max-height-query, saa feilen besto
     paa skjermer hoeyere enn 900px. */
  min-height: calc(100svh - var(--dsop-header-h, 83px));
  background: linear-gradient(180deg, #FAFCFE 0%, var(--dsop-mist-pale) 100%);
  color: var(--dsop-ink);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 3rem 0 calc(3rem + var(--dsop-ticker-h));
}
.hero-c__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-c__bg svg { width: 100%; height: 100%; display: block; }
.hero-c__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(91,192,201,0.24) 0%, transparent 50%),
    radial-gradient(circle at 82% 78%, rgba(0,85,135,0.14) 0%, transparent 50%);
}
.hero-c__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(0,85,135,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,85,135,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0;
  animation: dsop-grid-draw 1.6s ease-out 0.2s forwards;
}
@keyframes dsop-grid-draw { to { opacity: 1; } }

.hero-c__bg .conn {
  stroke: rgba(0,85,135,0.20);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dsop-draw-line 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-c__bg .conn:nth-child(2) { animation-delay: 0.5s; }
.hero-c__bg .conn:nth-child(3) { animation-delay: 0.8s; }
.hero-c__bg .conn:nth-child(4) { animation-delay: 1.1s; }
.hero-c__bg .conn:nth-child(5) { animation-delay: 1.4s; }
.hero-c__bg .conn:nth-child(6) { animation-delay: 1.7s; }
@keyframes dsop-draw-line { to { stroke-dashoffset: 0; } }

.hero-c__bg .ping {
  /* Var moerk primaerblaa paa full opasitet — prikkene ble like moerke som
     H1 og kunne forveksles med tegn i overskriften. Cyan paa dempet
     opasitet leser som bakgrunn. */
  fill: var(--dsop-cyan);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(91,192,201,0.45));
  animation: dsop-ping-pulse 4s ease-in-out infinite;
}
@keyframes dsop-ping-pulse {
  0%, 100% { opacity: 0; r: 4; }
  50% { opacity: 0.55; r: 7; }
}
.hero-c__bg .ping:nth-child(7) { animation-delay: 1.6s; }
.hero-c__bg .ping:nth-child(8) { animation-delay: 2.2s; }
.hero-c__bg .ping:nth-child(9) { animation-delay: 2.8s; }
.hero-c__bg .ping:nth-child(10) { animation-delay: 3.4s; }

.hero-c__content {
  position: relative; z-index: 2;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 2rem;
}
.hero-c__live {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  padding: 0.5rem 1rem; border-radius: 999px;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 12px -4px rgba(10,37,64,0.08);
  opacity: 0; transform: translateY(8px);
  animation: dsop-fade-up 800ms ease 0.8s forwards;
}
.hero-c__live-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dsop-cyan);
  box-shadow: 0 0 0 0 rgba(91,192,201,0.6);
  animation: dsop-live-pulse 2s infinite;
}
@keyframes dsop-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(91,192,201,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(91,192,201,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,192,201,0); }
}
.hero-c__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0 0 1.75rem;
  color: var(--dsop-ink);
  opacity: 0; transform: translateY(20px);
  animation: dsop-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}
/* Bruker --dsop-gradient-heading som alle andre overskrifter, ikke en egen
   hardkodet gradient. Den gamle endte i --dsop-cyan, som målt gir 1,92:1 mot
   hero-bakgrunnen — under AAs 3:1 for stor tekst. Tokenet ender i
   --dsop-teal-accessible og gir 4,58:1. Blåtonen i starten er uendret; det er
   bare halen av gradienten som blir mørkere. */
.hero-c__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-c__sub {
  font-size: 1.25rem;
  color: var(--dsop-muted);
  line-height: 1.55;
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  opacity: 0; transform: translateY(20px);
  animation: dsop-fade-up 1s ease 1.3s forwards;
}
.hero-c__ctas {
  display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center;
  opacity: 0; transform: translateY(20px);
  animation: dsop-fade-up 1s ease 1.6s forwards;
}
@keyframes dsop-fade-up { to { opacity: 1; transform: translateY(0); } }

/* Mobil: venstrestill hero-innhold på forside/Om/Kontakt + kutt unødvendig toppluft. */
@media (max-width: 768px) {
  .hero-c { min-height: auto; align-items: flex-start; padding: 2.5rem 0 5.5rem; }
  .hero-c__content { text-align: left; padding-top: 0; }
  .hero-c__live { margin-bottom: 1.5rem; }
  .hero-c__sub { margin-left: 0; margin-right: 0; }
  .hero-c__ctas { justify-content: flex-start; }
}

/* btn re-defs (uten å konflikte med eksisterende — bruker --primary/--ghost varianter konsistent) */
.hero-c .btn,
.story .btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1.625rem;
  font-family: var(--dsop-font-family);
  font-weight: 700; font-size: 0.9375rem;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 200ms;
  text-decoration: none;
}
.hero-c .btn--primary { background: var(--dsop-ink); color: #fff; border-color: var(--dsop-ink); }
.hero-c .btn--primary:hover { background: var(--dsop-primary); border-color: var(--dsop-primary); }
.hero-c .btn--ghost { background: transparent; color: var(--dsop-ink); border-color: var(--dsop-ink); }
.hero-c .btn--ghost:hover { background: var(--dsop-ink); color: #fff; }

.hero-c__ticker {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-top: 1px solid var(--dsop-border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.875rem 0;
  overflow: hidden;
  z-index: 3;
}
.hero-c__ticker-track {
  display: flex; gap: 3rem;
  /* Varigheten settes av malen ut fra antall elementer, saa hastigheten
     holder seg konstant naar tjenester legges til. Maal: ~60 px/s.
     Laa tidligere fast paa 50s — da innholdet vokste fra 6 til 15
     elementer ble farten 206 px/s, godt over grensen for lesbarhet. */
  animation: dsop-ticker var(--dsop-ticker-duration, 170s) linear infinite;
  white-space: nowrap;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  color: var(--dsop-muted);
  letter-spacing: 0.5px;
  width: max-content;
}
.hero-c__ticker-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-c__ticker-item::before { content: '●'; color: var(--dsop-cyan); font-size: 0.5rem; }
@keyframes dsop-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Musepausen ligger paa sporet, ikke paa wrapperen. Laa den paa wrapperen ville
   et klikk paa «Spill av» ikke gitt synlig effekt saa lenge pekeren ble staaende
   paa knappen — hover hadde overstyrt valget brukeren nettopp tok.
   :focus-within sto her ogsaa, og var doed kode: wrapperen hadde null
   fokuserbare barn. Den er erstattet av knappen under. */
.hero-c__ticker-track:hover { animation-play-state: paused; }
.hero-c__ticker.is-pauset .hero-c__ticker-track { animation-play-state: paused; }

/* ---- Pause/spill-knapp (WCAG 2.2.2) ----
   Tickeren beveger seg automatisk i over fem sekunder og starter av seg selv,
   og trenger derfor en mekanisme brukeren selv kan betjene. prefers-reduced-
   motion teller ikke som mekanisme — det er en OS-preferanse, ikke noe siden
   tilbyr. Samme husregel som for overlegg: en synlig, trykkbar utgang, ikke
   en tastaturhint.

   Knappen vises bare naar .js-ready er satt. Uten JS finnes ingen mekanisme
   aa vise, og en knapp som ikke gjoer noe er verre enn ingen knapp. */
.hero-c__ticker-knapp { display: none; }
.js-ready .hero-c__ticker-knapp {
  position: absolute;
  right: var(--dsop-space-sm);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  /* 44x44 — DESIGN.md sin mobilregel, og godt over 2.5.8 sine 24x24.
     Baren er 49px hoey, saa knappen faar plass uten aa endre hoeyden. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  /* Samme tone som baren selv (0.7 hvit over mist-pale), saa pilla leses som
     en del av stripen og ikke som et paaklistret felt. Ugjennomsiktig fordi
     teksten glir under den. */
  background: #F8FCFE;
  color: var(--dsop-ink);
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.js-ready .hero-c__ticker-knapp:hover { background: #fff; border-color: var(--dsop-teal-accessible); }
/* Eksplisitt, ikke overlatt til :focus-visible-regelen lenger opp: dette er en
   kontroll paa en lys flate, og cyan (2,14:1) skal ikke tilbake hit. */
.hero-c__ticker-knapp:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: 2px; }

/* Teksten forsvinner under pilla. Uten overgang kuttes den braatt i kanten;
   toningen gjoer avslutningen rolig. Ligger paa wrapperen fordi knappens eget
   ::before ville blitt klippet av overflow:hidden. */
.js-ready .hero-c__ticker::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0;
  /* Maalt: pilla er 80,5px bred og staar 16px fra kanten. Feltet maa naa forbi
     den for at toningen skal synes i det hele tatt — foerste forsoek paa 6rem
     laa i sin helhet BAK pilla og gjorde ingenting. Andre forsoek paa 9rem var
     foerst 82 % dekkende ved pillekanten, saa teksten ble kuttet midt i et ord
     paa full opasitet og saa ut som en tegnefeil. 11rem med full dekning fra
     40 % gir 70px toning som er ferdig 9px foer pilla, paa baade 375 og 1440. */
  width: 11rem;
  background: linear-gradient(90deg, rgba(248,252,254,0) 0%, #F8FCFE 40%);
  pointer-events: none;
  z-index: 1;
}

.hero-c__ticker-ikon { flex: none; }
.hero-c__ticker-ikon-spill { display: none; }
.hero-c__ticker.is-pauset .hero-c__ticker-ikon-spill { display: inline; }
.hero-c__ticker.is-pauset .hero-c__ticker-ikon-pause { display: none; }

/* STORY-RAIL */
.story {
  background: linear-gradient(180deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%);
  color: var(--dsop-ink);
  padding: 7rem 0;
  position: relative; overflow: hidden;
  isolation: isolate;
}
.story::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(0,85,135,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,85,135,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
}
.story__head { max-width: 56rem; margin: 0 auto 4rem; text-align: center; }
.story__eyebrow {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
}
.story__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--dsop-cyan); }
.story__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  letter-spacing: -1.5px;
  color: var(--dsop-ink);
  line-height: 1.1;
}
.story__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Story versjon A — før/nå-split med proof-bånd */
.story-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: stretch; }
.story-panel { border-radius: 20px; padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; min-height: 320px; position: relative; overflow: hidden; }
.story-panel__icon { width: 44px; height: 44px; margin-bottom: 1.25rem; display: block; }
.story-panel__icon svg { width: 100%; height: 100%; }
.story-panel__lab { font-family: var(--dsop-font-mono-family); font-size: 0.6875rem; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 1.25rem; }
.story-panel__big { font-family: var(--dsop-font-family); font-weight: 800; font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 0.92; letter-spacing: -2.5px; margin: 0; }
.story-panel__big small { font-size: 0.4em; font-weight: 700; letter-spacing: -0.5px; }
.story-panel__unit { font-family: var(--dsop-font-mono-family); font-size: 0.8125rem; color: var(--dsop-muted); margin: 0.5rem 0 0; }
.story-panel__desc { font-size: 0.9375rem; line-height: 1.6; margin: auto 0 0; padding-top: 1.5rem; }

.story-panel--for { background: var(--dsop-mist-pale); border: 1px solid var(--dsop-border); }
.story-panel--for .story-panel__lab { color: var(--dsop-muted); }
.story-panel--for .story-panel__icon { color: var(--dsop-teal-mid); opacity: 0.85; }
.story-panel--for .story-panel__big { color: var(--dsop-muted); }
.story-panel--for .story-panel__desc { color: var(--dsop-muted); }

.story-panel--na { background: var(--dsop-surface); border: 1px solid var(--dsop-border); box-shadow: 0 18px 40px -22px rgba(0,85,135,0.30); }
.story-panel--na::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, var(--dsop-primary), var(--dsop-cyan)); }
.story-panel--na .story-panel__lab { color: var(--dsop-teal-accessible); }
.story-panel--na .story-panel__icon { color: var(--dsop-primary); }
.story-panel--na .story-panel__big { color: var(--dsop-ink); }
.story-panel--na .story-panel__desc { color: var(--dsop-ink); }

.story-split__arrow { align-self: center; width: 52px; height: 52px; border-radius: 50%; background: var(--dsop-surface); border: 1px solid var(--dsop-border); display: grid; place-items: center; color: var(--dsop-primary); flex-shrink: 0; box-shadow: 0 6px 16px -8px rgba(0,85,135,0.25); }
.story-split__arrow svg { width: 24px; height: 24px; }

.story-proof { margin-top: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--dsop-border); padding-top: 1.75rem; display: flex; gap: clamp(1rem, 4vw, 3rem); align-items: baseline; flex-wrap: wrap; justify-content: center; }
.story-proof__lead { font-family: var(--dsop-font-mono-family); font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dsop-muted); }
.story-proof__item { font-size: 0.9375rem; color: var(--dsop-ink); }
.story-proof__item strong { font-weight: 800; }
.story-proof__item span { color: var(--dsop-muted); }

@media (max-width: 760px) {
  .story-split { grid-template-columns: 1fr; }
  .story-split__arrow { transform: rotate(90deg); margin: -0.4rem auto; width: 44px; height: 44px; }
  .story-split__arrow svg { width: 20px; height: 20px; }
  .story-panel { min-height: 0; }
  .story-proof { flex-direction: column; gap: 0.6rem; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-c__bg .conn { stroke-dashoffset: 0 !important; animation: none !important; }
  .hero-c__bg .ping,
  .hero-c__live-pulse,
  .hero-c__grid { animation: none !important; opacity: 1 !important; }
  /* Tickeren staar stille som foer — men bare fram til JS har tatt over.
     `animation: none` river animasjonen ut av elementet, og da kan ikke
     pause/spill-knappen starte den igjen for den som likevel vil se den.
     Med JS setter site.js «is-pauset» som starttilstand i stedet, og
     animasjonen fryses med play-state. Bytte skjer i samme synkrone kall
     som legger paa .js-ready, saa det males aldri et mellomsteg. */
  html:not(.js-ready) .hero-c__ticker-track { animation: none !important; opacity: 1 !important; }
  .hero-c__live,
  .hero-c__title,
  .hero-c__sub,
  .hero-c__ctas { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============ OM DSOP-side (page-om-dsop.php) ============ */
.om-hero {
  padding: 7rem 0 5rem;
  background: linear-gradient(180deg, #FAFCFE, var(--dsop-mist-pale));
  position: relative; overflow: hidden; isolation: isolate;
  text-align: center;
}
/* Mobil: kutt toppluft + venstrestill. Plassert ETTER base-regelen så det faktisk overstyrer. */
@media (max-width: 768px) { .om-hero { padding: 1.5rem 0 2.5rem; text-align: left; } }
.om-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(0,85,135,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,85,135,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
}

.om-hero__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  margin-bottom: 2rem;
}
.om-hero__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dsop-cyan);
  animation: dsop-live-pulse 2s infinite;
}
.om-hero__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02; letter-spacing: -2.5px;
  margin: 0 auto 1.75rem;
  max-width: 26ch;
  color: var(--dsop-ink);
}
.om-hero__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.om-hero__lede {
  font-size: 1.1875rem;
  color: var(--dsop-muted);
  max-width: 48rem;
  margin: 0 auto 1rem;
  line-height: 1.7;
}
.om-hero__lede:last-child { margin-bottom: 0; }
.om-hero__lede strong { color: var(--dsop-ink); font-weight: 700; }
/* Kilde-fotnote nederst i «Veien videre»-seksjonen (mørk bg — ikke egen hvit stripe). */
.om-future__kilde {
  margin: 3.5rem auto 0;
  max-width: 56rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.72);
}
.om-future__kilde a { color: var(--dsop-cyan); text-decoration: underline; text-underline-offset: 2px; }
.om-future__kilde a:hover { color: #fff; }

/* TRE LAG AV SAMHANDLING */
.om-gov {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%);
}
.om-gov__head { max-width: 56rem; margin: 0 auto 4rem; text-align: center; }
.om-gov__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
}
.om-gov__kicker::before { content: ''; width: 32px; height: 1px; background: var(--dsop-cyan); }
.om-gov__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  margin: 0 0 1rem;
  letter-spacing: -1.5px; line-height: 1.1;
}
.om-gov__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.om-gov__lede { color: var(--dsop-muted); font-size: 1.0625rem; max-width: 44rem; margin: 0 auto; line-height: 1.6; }

/* Side 68-1 (rundt bord) ved siden av organiseringsteksten — kun rundt selve
   introen (kicker/tittel/ingress), ikke rundt punkter-griden under, så den
   ikke presser 3-kolonnegriden sammen. Om-gov__head er sentrert som standard
   (brukes alene andre steder på samme mønster); i denne toradersblokken skal
   den venstrestilles i stedet. */
.om-gov__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
  gap: var(--dsop-space-xl);
  align-items: center;
  margin-bottom: 4rem;
}
.om-gov__intro .om-gov__head {
  text-align: left;
  max-width: none;
  margin: 0;
}
/* min-width: 0 hindrer «grid blowout» — uten den presser bildets egen
   intrinsic bredde (1920px) illu-kolonnen bredere enn minmax-taket over,
   som gir horisontal overflyt på siden. */
.om-gov__illu { min-width: 0; }
.om-gov__illu img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .om-gov__intro { grid-template-columns: 1fr; gap: var(--dsop-space-lg); margin-bottom: 3rem; }
  .om-gov__illu { max-width: 420px; margin: 0 auto; }
}

/* SITAT-BAND */
.om-quote {
  padding: 6rem 0;
  background: var(--dsop-ink);
  color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
}
.om-quote::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(91,192,201,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,192,201,0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(91,192,201,0.15) 0%, transparent 50%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
}
.om-quote__inner { max-width: 56rem; margin: 0 auto; text-align: center; }
.om-quote__text {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.3; letter-spacing: -1px;
  margin: 0 0 1.5rem;
  color: #fff;
}
.om-quote__text em { font-style: normal; color: var(--dsop-cyan); }
.om-quote__author {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* VEIEN VIDERE */
.om-future {
  padding: 6rem 0;
  background: var(--dsop-ink);
  color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
}
.om-future::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(91,192,201,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,192,201,0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(91,192,201,0.12) 0%, transparent 60%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
}
.om-future__head { max-width: 56rem; margin: 0 auto 3.5rem; text-align: center; }
.om-future__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-cyan);
  margin-bottom: 1rem;
}
.om-future__kicker::before { content: ''; width: 32px; height: 1px; background: var(--dsop-cyan); }
.om-future__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  margin: 0 0 1rem; letter-spacing: -1.5px; line-height: 1.1;
  color: #fff;
}
.om-future__title em { font-style: normal; color: var(--dsop-cyan); }
.om-future__lede { color: rgba(255,255,255,0.75); font-size: 1.0625rem; max-width: 44rem; margin: 0 auto; }
.om-future__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .om-future__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .om-future__grid { grid-template-columns: 1fr; } }
.om-future-card {
  padding: 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: all 240ms;
}
.om-future-card:hover {
  background: rgba(91,192,201,0.06);
  border-color: rgba(91,192,201,0.3);
  transform: translateY(-3px);
}
.om-future-card__num {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 1.5px;
  color: var(--dsop-cyan);
  margin-bottom: 0.625rem;
}
.om-future-card__title { font-weight: 800; font-size: 1.0625rem; margin: 0 0 0.5rem; color: #fff; letter-spacing: -0.3px; }
.om-future-card__body { font-size: 0.875rem; color: rgba(255,255,255,0.7); line-height: 1.55; margin: 0; }

/* OM ERFARINGER — flat 3-kolonne grid (erstatter om-narr "02") */
.om-erfaringer {
  padding: 6rem 0;
  background: var(--dsop-mist-pale);
}
.om-erfaringer__head { max-width: 56rem; margin: 0 auto 3.5rem; text-align: center; }
.om-erfaringer__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
}
.om-erfaringer__kicker::before { content: ''; width: 32px; height: 1px; background: var(--dsop-cyan); }
.om-erfaringer__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  margin: 0 0 1rem;
  letter-spacing: -1.5px; line-height: 1.1;
}
.om-erfaringer__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.om-erfaringer__lede { color: var(--dsop-muted); font-size: 1.0625rem; max-width: 44rem; margin: 0 auto; line-height: 1.6; }

.om-erfaringer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .om-erfaringer__grid { grid-template-columns: 1fr; max-width: 36rem; margin-left: auto; margin-right: auto; }
}
.om-erfaring-card {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  transition: all 240ms;
}
.om-erfaring-card:hover {
  border-color: var(--dsop-cyan);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(0,85,135,0.18);
}
.om-erfaring-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dsop-primary), var(--dsop-cyan));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
.om-erfaring-card__title {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.3px;
  margin: 0 0 0.75rem;
}
.om-erfaring-card__body {
  font-size: 0.9375rem;
  color: var(--dsop-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============ KONTAKT-side (page-kontakt.php) ============ */

/* Routing — 4 quick-cards */
.kontakt-routing {
  padding: 5rem 0;
  background: var(--dsop-surface);
}
.kontakt-routing__head { max-width: 56rem; margin: 0 auto 3rem; text-align: center; }
.kontakt-routing__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
}
.kontakt-routing__kicker::before { content: ''; width: 32px; height: 1px; background: var(--dsop-cyan); }
.kontakt-routing__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  margin: 0; letter-spacing: -1.5px; line-height: 1.1;
}
.kontakt-routing__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* auto-fit, ikke repeat(4): antallet ruter er en ACF-repeater og kan variere.
   Med fast firekolonners rutenett og tre ruter sto den siste kolonnen tom, og
   boksene ble smalere enn de trengte. Nå fyller de bredden uansett antall. */
.kontakt-routing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 600px) { .kontakt-routing__grid { grid-template-columns: 1fr; } }

.kontakt-route {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  transition: all 240ms;
  display: flex;
  flex-direction: column;
}
.kontakt-route:hover {
  border-color: var(--dsop-cyan);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(0,85,135,0.18);
}
.kontakt-route__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--dsop-mist-pale);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--dsop-primary);
}
/* Lucide framfor emoji. Ikonene tegnes med stroke="currentColor", så de arver
   fargen på boksen; 24px er Lucides egen ramme og for spinkel i en 48px-flate. */
.kontakt-route__icon--lucide svg {
  width: 26px; height: 26px; display: block;
  stroke-width: 1.75;
}
.kontakt-route__title {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.3px;
  margin: 0 0 0.625rem;
}
.kontakt-route__body {
  font-size: 0.875rem;
  color: var(--dsop-muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
}
.kontakt-route__cta {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: var(--dsop-font-family);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--dsop-primary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--dsop-cyan);
  align-self: flex-start;
  transition: color 200ms;
  word-break: break-word;
}
.kontakt-route__cta:hover { color: var(--dsop-primary-deep); }

/* Bits-info-card */
.kontakt-bits {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%);
}
.kontakt-bits__card {
  max-width: 64rem;
  margin: 0 auto;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  box-shadow: 0 18px 40px -20px rgba(0,85,135,0.18);
}
@media (max-width: 800px) { .kontakt-bits__card { grid-template-columns: 1fr; } }
.kontakt-bits__head { padding: 2.5rem; }
.kontakt-bits__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
}
.kontakt-bits__kicker::before { content: ''; width: 24px; height: 1px; background: var(--dsop-cyan); }
.kontakt-bits__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.kontakt-bits__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kontakt-bits__body {
  font-size: 0.9375rem;
  color: var(--dsop-muted);
  line-height: 1.65;
  margin: 0;
}
.kontakt-bits__meta {
  padding: 2.5rem;
  background: var(--dsop-ink);
  color: #fff;
  display: flex; flex-direction: column;
  gap: 0.875rem;
  position: relative;
  isolation: isolate;
}
.kontakt-bits__meta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(91,192,201,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,192,201,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.kontakt-bits__meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.kontakt-bits__meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.kontakt-bits__meta-label {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--dsop-cyan);
  flex-shrink: 0;
}
.kontakt-bits__meta-value {
  font-family: var(--dsop-font-family);
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
  text-align: right;
}
.kontakt-bits__meta-value a { color: var(--dsop-cyan); text-decoration: none; transition: color 200ms; }
.kontakt-bits__meta-value a:hover { color: #fff; text-decoration: underline; }

/* KONTAKT-PERSONER — ren tekst-stil uten monogram (per Eirik 22.06.2026) */
.kontakt-personer {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%);
}
.kontakt-personer__head { max-width: 56rem; margin: 0 auto 3.5rem; text-align: center; }
/* Venstrestilt på mobil. Midtstilt brødtekst gir ujevn venstrekant og blir
   tungt å lese når linjene er korte. */
@media (max-width: 768px) {
  .kontakt-personer__head { text-align: left; margin-left: 0; margin-right: 0; }
}
.kontakt-personer__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
}
.kontakt-personer__kicker::before { content: ''; width: 32px; height: 1px; background: var(--dsop-cyan); }
.kontakt-personer__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  margin: 0 0 1rem;
  letter-spacing: -1.5px; line-height: 1.1;
}
.kontakt-personer__lede { color: var(--dsop-muted); font-size: 1.0625rem; max-width: 44rem; margin: 0 auto; }

.kontakt-personer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .kontakt-personer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kontakt-personer__grid { grid-template-columns: 1fr; } }

.kontakt-person {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: all 240ms;
  position: relative;
}
.kontakt-person::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dsop-primary), var(--dsop-cyan));
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity 200ms;
}
.kontakt-person:hover {
  border-color: var(--dsop-cyan);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(0,85,135,0.18);
}
.kontakt-person:hover::before { opacity: 1; }
.kontakt-person__role {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 0.5rem;
}
.kontakt-person__name {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--dsop-ink);
  margin: 0 0 1rem;
}
.kontakt-person__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--dsop-border);
}
.kontakt-person__label {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dsop-muted);
  margin: 0;
  align-self: baseline;
  padding-top: 0.125rem;
}
.kontakt-person__value {
  color: var(--dsop-ink);
  margin: 0;
  word-break: break-word;
}
.kontakt-person__value a {
  color: var(--dsop-primary);
  text-decoration: none;
  transition: color 200ms;
}
.kontakt-person__value a:hover { color: var(--dsop-primary-deep); text-decoration: underline; }

/* ILLUSTRASJONSBÅND — side-69, avslutning på Kontakt-siden (revisjon aug 2026).
   Motivet ER en stripe (bred/lav), skal derfor ikke beskjæres — bare senteres
   med luft og en makshøyde så den ikke dominerer avslutningen av siden. */
/* Båndet hører til kontaktoversikten over, ikke som egen seksjon: lite luft
   over så det leses som del av segmentet, vanlig seksjonsluft under. */
/* Trukket opp under kontaktkortene. SVG-en hadde 57 % tom luft bakt inn i
   viewBoxen — den er strammet i fila; her fjernes halvparten av seksjonsgapet
   over, så båndet leses som en avslutning på kontaktoversikten og ikke som en
   frittstående seksjon. Gapet ned til BITS beholdes: der GÅR det et skille. */
.kontakt-illu-band {
  /* Kontaktpersonene har 6rem padding i bunnen. Det meste av den trekkes bort
     her, så båndet leses som en avslutning på kontaktoversikten framfor en egen
     seksjon — de to flatene er uansett samme hvitt der de møtes, siden
     gradienten på .kontakt-personer ender i --dsop-surface.
     Litt luft under: null gjorde at motivet nesten tok i BITS-seksjonen. */
  margin-top: -4.5rem;
  padding: 0 0 var(--dsop-space-lg);
  background: var(--dsop-surface);
}
.kontakt-illu-band__img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 768px) { .kontakt-illu-band { margin-top: -3.5rem; padding-bottom: var(--dsop-space-md); } }

/* ============== AKTØR — ARCHIVE ============== */
.aktor-archive { background: var(--dsop-surface); }

/* Snudd til lys hero 8.9.2026 (Georg + Pål: «lys editorial» var allerede vedtatt
   10.6.2026, denne kom inn mørk uten å holdes opp mot det). Samme oppskrift som
   .om-hero/.archive-hero: gradient-bg, blueprint-mønster i --dsop-primary,
   --dsop-teal-accessible for kicker/streker (aldri --dsop-cyan som tekst — 1,9:1). */
.aktor-archive__hero {
  background: linear-gradient(180deg, #FAFCFE, var(--dsop-mist-pale));
  padding: 5rem 0 4rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aktor-archive__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

.aktor-archive__kicker {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.aktor-archive__kicker-line { width: 24px; height: 1px; background: var(--dsop-teal-accessible); }
.aktor-archive__title {
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  max-width: 24ch;
  color: var(--dsop-ink);
}
.aktor-archive__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aktor-archive__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--dsop-muted);
  max-width: 60ch;
  margin: 0;
}

.aktor-archive__group {
  padding: 3rem 0 1rem;
}
.aktor-archive__group + .aktor-archive__group { padding-top: 1rem; }
.aktor-archive__group:last-child { padding-bottom: 4rem; }

.aktor-archive__group-label {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.aktor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 980px) { .aktor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .aktor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .aktor-grid { grid-template-columns: 1fr; } }

.aktor-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aktor-card:hover, .aktor-card:focus-visible {
  border-color: var(--dsop-cyan);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(0,85,135,0.18);
  text-decoration: none;
}
.aktor-card__logo {
  width: 100%;
  max-width: 160px;
  height: 64px;
  border-radius: 12px;
  background: var(--dsop-mist-pale);
  border: 1px solid var(--dsop-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  overflow: hidden;
}
.aktor-card__logo--dark { background: var(--dsop-ink); border-color: var(--dsop-ink); }
.aktor-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.aktor-card__mono {
  font-weight: 800;
  font-size: 1.625rem;
  color: var(--dsop-primary);
  letter-spacing: -1px;
}
.aktor-card__cat {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.aktor-card__navn {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--dsop-ink);
  margin: 0;
}
.aktor-card__rolle {
  font-size: 0.8125rem;
  color: var(--dsop-muted);
  line-height: 1.5;
  margin: 0;
}
.aktor-card__count {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  color: var(--dsop-muted);
  padding-top: 0.625rem;
  margin-top: auto;
  border-top: 1px solid var(--dsop-border);
  width: 100%;
}
.aktor-card__count strong { color: var(--dsop-primary); font-weight: 700; }


/* ============== AKTØR — SINGLE ============== */
/* Snudd til lys hero 8.9.2026 — se kommentar over .aktor-archive__hero. */
.aktor-single__hero {
  background: linear-gradient(180deg, #FAFCFE, var(--dsop-mist-pale));
  padding: 4rem 0 3.5rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aktor-single__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.aktor-single__crumb {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  color: var(--dsop-muted);
  margin-bottom: 1.75rem;
  display: flex;
  /* Uten denne strekkes skilletegn og siste ledd til lenkenes
     min-height: 24px (WCAG 2.5.8) og teksten legger seg 2,92 px
     hoyere enn lenkene. .tj-hero__breadcrumb har den allerede. */
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.aktor-single__crumb a { color: var(--dsop-teal-accessible); text-decoration: none; }
.aktor-single__crumb a:hover { text-decoration: underline; }
.aktor-single__hero-top {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 760px) {
  .aktor-single__hero-top { grid-template-columns: 1fr; gap: 1.5rem; }
}
.aktor-single__hero-logo {
  width: 220px;
  height: 110px;
  border-radius: 16px;
  background: #fff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
  box-sizing: border-box;
  overflow: hidden;
}
.aktor-single__hero-logo--light { background: #fff; }
.aktor-single__hero-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.aktor-single__mono { font-weight: 800; font-size: 2.5rem; color: var(--dsop-primary); }
.aktor-single__hero-cat {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 0.625rem;
}
/* Tittelen skal aldri kutte et ord, som .tj-hero__title. --aktor-ord er antall
   tegn i det lengste ordet (satt i single-aktor.php), og 0.6em per tegn er målt
   bredde i Plus Jakarta Sans 800 pluss margin for Safari. Skriften krymper bare
   når ordet ellers ikke får plass. hyphens: manual fordi Safari ikke har norsk
   ordbok og da kutter uten bindestrek; overflow-wrap er siste utvei. */
.aktor-single__hero-text { container-type: inline-size; min-width: 0; }
.aktor-single__hero-title {
  overflow-wrap: break-word;
  hyphens: manual;
  font-weight: 800;
  font-size: min(clamp(2rem, 4.5vw, 3rem), calc(100cqi / (var(--aktor-ord, 10) * 0.6)));
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin: 0 0 0.875rem;
  color: var(--dsop-ink);
}
.aktor-single__hero-rolle {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--dsop-muted);
  margin: 0;
  max-width: 52ch;
}
.aktor-single__hero-actions { margin: 1.5rem 0 0; }
/* Snudd til lys hero 8.9.2026: overrideet under fantes fordi .btn--ghost sitt
   standard-hover (ink-bg/hvit tekst) ville smeltet inn i den mørke gradienten.
   Mot lys bg gir standard-hoveret akkurat samme oppskrift .hero-c allerede
   bruker på forsiden — ingen override nødvendig lenger, fjernet. */

.aktor-single__body {
  background: var(--dsop-mist-pale);
  padding: 3.5rem 0 4rem;
}
.aktor-single__split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
}
@media (max-width: 860px) {
  .aktor-single__split { grid-template-columns: 1fr; gap: 2rem; }
}
/* Grid-celler har min-width:auto, så et langt ord («Digitaliseringsdirektoratets»)
   presset kolonnen ut og ga horisontal scroll ved 320 px (1.4.10). */
.aktor-single__split > * { min-width: 0; }
.aktor-single__prose h2,
.aktor-single__tjenester h2 { overflow-wrap: break-word; hyphens: auto; }

.aktor-single__prose {
  max-width: 64ch;
}
.aktor-single__prose h2 {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.aktor-single__prose p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dsop-ink);
  margin: 0 0 1rem;
}
.aktor-single__prose strong { color: var(--dsop-primary-deep); }

.aktor-single__tjenester { margin-top: 2.75rem; max-width: 64ch; }
.aktor-single__tjenester h2 {
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.4px;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.aktor-tj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.aktor-tj-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: all 200ms;
}
.aktor-tj-card:hover, .aktor-tj-card:focus-visible {
  border-color: var(--dsop-cyan);
  transform: translateX(2px);
  text-decoration: none;
}
.aktor-tj-card__main { min-width: 0; flex: 1; }
.aktor-tj-card__t {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.2px;
  margin: 0 0 0.125rem;
  color: var(--dsop-ink);
}
.aktor-tj-card__d {
  font-size: 0.8125rem;
  color: var(--dsop-muted);
  margin: 0;
  line-height: 1.4;
}
.aktor-tj-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.aktor-tj-card__status {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #15803D;
}

.aktor-single__fk-eier { margin-top: 2.75rem; max-width: 64ch; }
.aktor-single__fk-eier h2 {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.4px;
  margin: 0 0 1rem;
}
.aktor-fk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.aktor-fk-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: all 200ms;
}
.aktor-fk-list a:hover, .aktor-fk-list a:focus-visible {
  border-color: var(--dsop-cyan);
  text-decoration: none;
}
.aktor-fk-list__ikon { font-size: 1.5rem; flex-shrink: 0; }
.aktor-fk-list strong { display: block; font-weight: 800; font-size: 0.9375rem; color: var(--dsop-ink); }
.aktor-fk-list small { display: block; font-size: 0.8125rem; color: var(--dsop-muted); margin-top: 0.125rem; }

.aktor-single__sidebar { display: flex; flex-direction: column; gap: 1rem; }
.aktor-fakta-card {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 14px;
  padding: 1.25rem;
}
.aktor-fakta-card__label {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 0.5rem;
}
.aktor-fakta-reps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.aktor-fakta-reps li { display: grid; gap: 0.125rem; }
.aktor-fakta-reps strong { font-weight: 800; font-size: 0.9375rem; color: var(--dsop-ink); }
.aktor-fakta-reps small { font-family: var(--dsop-font-mono-family); font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase; color: var(--dsop-teal-accessible); }
.aktor-fakta-reps a { font-size: 0.8125rem; color: var(--dsop-primary); text-decoration: none; }
.aktor-fakta-reps a:hover { text-decoration: underline; }


/* ============== FELLESKOMPONENT — ARCHIVE ============== */
.fk-archive { background: var(--dsop-surface); }
/* Snudd til lys hero 8.9.2026 — se kommentar over .aktor-archive__hero. */
.fk-archive__hero {
  background: linear-gradient(180deg, #FAFCFE, var(--dsop-mist-pale));
  padding: 5rem 0 4rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fk-archive__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.fk-archive__kicker {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.fk-archive__kicker-line { width: 24px; height: 1px; background: var(--dsop-teal-accessible); }
.fk-archive__title {
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  max-width: 22ch;
  color: var(--dsop-ink);
}
.fk-archive__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fk-archive__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--dsop-muted);
  max-width: 60ch;
  margin: 0 0 1rem;
}
.fk-archive__lede:last-child { margin-bottom: 0; }
.fk-archive__lede strong { color: var(--dsop-ink); font-weight: 700; }

.fk-archive__list { padding: 3.5rem 0 4rem; background: var(--dsop-mist-pale); }
.fk-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 780px) { .fk-list-grid { grid-template-columns: 1fr; } }

.fk-list-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Mobil: stabel ikon over tekst i FK-kortet (ikke ved siden av) så teksten ikke blir smal.
   Plassert ETTER base-regelen så den faktisk overstyrer grid-template-columns. */
@media (max-width: 640px) { .fk-list-card { grid-template-columns: 1fr; gap: 0.875rem; } }
.fk-list-card:hover, .fk-list-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--dsop-cyan);
  box-shadow: 0 16px 32px -16px rgba(0,85,135,0.18);
  text-decoration: none;
}
/* Lys ikonflate, samme gradient som tjenesteillustrasjonene står på — så
   komponentene og tjenestene leser som samme familie.
   Fargen gjelder bare de enfargede tegnene (⚙, ✓). Fargeemoji (📚 🏦 🔍 💳)
   tegner seg selv og ignorerer color, men de er laget for lys bakgrunn og
   kommer bedre til sin rett her enn på den mørke. */
.fk-list-card__ikon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--dsop-gradient-tile-illu);
  color: var(--dsop-primary);
  display: grid;
  place-items: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.fk-list-card__navn {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.3px;
  margin: 0 0 0.5rem;
  color: var(--dsop-ink);
}
.fk-list-card__beskr {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--dsop-muted);
  margin: 0 0 1rem;
  max-width: 48ch;
}
.fk-list-card__meta {
  display: flex;
  gap: 1rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  color: var(--dsop-primary-deep);
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.fk-list-card__meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.fk-list-card__meta span::before { content: '●'; color: var(--dsop-cyan); font-size: 0.5rem; }
.fk-list-card__cta {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--dsop-primary);
  font-weight: 700;
}


/* ============== FELLESKOMPONENT — SINGLE ============== */
/* Snudd til lys hero 8.9.2026 — se kommentar over .aktor-archive__hero. */
.fk-single__hero {
  background: linear-gradient(180deg, #FAFCFE, var(--dsop-mist-pale));
  padding: 4rem 0 3.5rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fk-single__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.fk-single__crumb {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  color: var(--dsop-muted);
  margin-bottom: 1.75rem;
  display: flex;
  /* Uten denne strekkes skilletegn og siste ledd til lenkenes
     min-height: 24px (WCAG 2.5.8) og teksten legger seg 2,92 px
     hoyere enn lenkene. .tj-hero__breadcrumb har den allerede. */
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fk-single__crumb a { color: var(--dsop-teal-accessible); text-decoration: none; }
.fk-single__crumb a:hover { text-decoration: underline; }

.fk-single__hero-top {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 720px) {
  .fk-single__hero-top { grid-template-columns: 1fr; gap: 1.25rem; }
}
.fk-single__hero-ikon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--dsop-cyan), #9EE2E8);
  color: var(--dsop-ink);
  display: grid;
  place-items: center;
  font-size: 2.75rem;
}
.fk-single__hero-title {
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin: 0 0 0.75rem;
  color: var(--dsop-ink);
}
.fk-single__hero-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--dsop-muted);
  margin: 0 0 1.25rem;
  max-width: 52ch;
}
.fk-single__hero-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Statistikk-pillene ("N tjenester", "Forvaltes av X") beholder teal-merkingen,
   overført fra --dsop-cyan (1,9:1, ulovlig som tekst) til --dsop-teal-accessible.
   Målt i nettleser 8.9.2026: en gjennomsiktig teal-bakgrunn (som på mørk bunn)
   mørkner grunnen nok til at teksten falt til 3,99:1. Ugjennomsiktig hvit bunn
   (samme oppskrift som .om-hero__kicker) holder 5,09:1 uansett scroll-posisjon. */
.fk-single__hero-pill {
  padding: 0.375rem 0.75rem;
  background: var(--dsop-surface);
  border: 1px solid rgba(14, 122, 130, 0.35);
  color: var(--dsop-teal-accessible);
  border-radius: 999px;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  font-weight: 500;
}
/* --tag var nøytral (halvgjennomsiktig hvit) på mørk bg — nøytral hvit/border-chip
   er samme mønster som .om-hero__kicker allerede bruker mot denne bakgrunnen. */
.fk-single__hero-pill--tag { background: var(--dsop-surface); border-color: var(--dsop-border); color: var(--dsop-ink); }

.fk-single__body {
  background: var(--dsop-mist-pale);
  padding: 3.5rem 0 4rem;
}
.fk-single__split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
}
@media (max-width: 860px) {
  .fk-single__split { grid-template-columns: 1fr; gap: 2rem; }
}
.fk-single__prose { max-width: 60ch; }
.fk-single__prose h2 {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.fk-single__prose p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.fk-single__prose strong { color: var(--dsop-primary-deep); }

.fk-single__tjenester { margin-top: 2.75rem; max-width: 60ch; }
.fk-single__tjenester h2 {
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.4px;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.fk-tj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.fk-tj {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: all 200ms;
}
.fk-tj:hover, .fk-tj:focus-visible {
  border-color: var(--dsop-cyan);
  transform: translateX(2px);
  text-decoration: none;
}
.fk-tj__num {
  font-family: var(--dsop-font-mono-family);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--dsop-primary);
}
.fk-tj__title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--dsop-ink);
  letter-spacing: -0.2px;
}
.fk-tj__status {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #15803D;
}

.fk-single__sidebar { display: flex; flex-direction: column; gap: 1rem; }
.fk-side-card {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.fk-side-card__label {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.fk-side-card__logo {
  width: 100%;
  max-width: 160px;
  height: 56px;
  margin: 0.25rem 0 0.25rem;
  background: var(--dsop-mist-pale);
  border: 1px solid var(--dsop-border);
  border-radius: 10px;
  padding: 8px 14px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.fk-side-card__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fk-side-card__name {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0;
  color: var(--dsop-ink);
  word-break: break-word;
}
.fk-side-card__name a { color: inherit; text-decoration: none; }
.fk-side-card__name a:hover { color: var(--dsop-primary); }
.fk-side-card__sub {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--dsop-muted);
  margin: 0;
}
.fk-side-card__cta {
  margin-top: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--dsop-ink);
  color: #fff;
  border-radius: 8px;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background 200ms;
}
.fk-side-card__cta:hover { background: var(--dsop-primary-deep); color: #fff; text-decoration: none; }
.fk-side-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.fk-side-card__list a { color: var(--dsop-primary); font-size: 0.875rem; text-decoration: none; padding: 0.25rem 0; display: block; }
.fk-side-card__list a:hover { color: var(--dsop-primary-deep); text-decoration: underline; }


/* ============== SINGLE (per-SDG) ============== */
.brk-single__hero {
  background: linear-gradient(135deg, var(--dsop-ink) 0%, var(--dsop-primary-deep) 100%);
  color: #fff;
  padding: 4rem 0 3.5rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.brk-single__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(91,192,201,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,192,201,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.brk-single__crumb {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.75rem;
  display: flex;
  /* Uten denne strekkes skilletegn og siste ledd til lenkenes
     min-height: 24px (WCAG 2.5.8) og teksten legger seg 2,92 px
     hoyere enn lenkene. .tj-hero__breadcrumb har den allerede. */
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.brk-single__crumb a { color: var(--dsop-cyan); text-decoration: none; }
.brk-single__crumb a:hover { text-decoration: underline; }
/* Teal-fokus gir 2,98:1 mot mørk hero (1.4.11); cyan gir 7,27:1. */
.brk-single__crumb a:focus-visible { outline-color: var(--dsop-cyan); }

.brk-single__hero-top {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 760px) {
  .brk-single__hero-top { grid-template-columns: 1fr; gap: 1.5rem; }
}
.brk-single__hero-ikon {
  width: 160px;
  height: 160px;
  border-radius: 18px;
  background: #fff;
  padding: 8px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
}
.brk-single__hero-ikon img { width: 100%; height: 100%; object-fit: contain; }
.brk-single__hero-num {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-cyan);
  margin-bottom: 0.625rem;
}
.brk-single__hero-title {
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin: 0 0 0.875rem;
  color: #fff;
}
.brk-single__hero-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.25rem;
  max-width: 56ch;
}
.brk-single__hero-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.brk-single__hero-pill {
  padding: 0.375rem 0.75rem;
  background: rgba(91,192,201,0.12);
  border: 1px solid rgba(91,192,201,0.3);
  color: var(--dsop-cyan);
  border-radius: 999px;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  font-weight: 500;
}

.brk-single__body {
  background: var(--dsop-mist-pale);
  padding: 3.5rem 0 4rem;
}
.brk-single__split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
}
@media (max-width: 860px) {
  .brk-single__split { grid-template-columns: 1fr; gap: 2rem; }
}
.brk-single__prose { max-width: 60ch; }
.brk-single__prose h2 {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.brk-single__prose p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}

.brk-single__tjenester { margin-top: 2.5rem; max-width: 60ch; }
.brk-single__tjenester h2 {
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.4px;
  margin: 0 0 1rem;
  color: var(--dsop-ink);
}
.brk-tj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.brk-tj {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: all 200ms;
}
.brk-tj:hover, .brk-tj:focus-visible {
  border-color: var(--dsop-cyan);
  transform: translateX(2px);
  text-decoration: none;
}
.brk-tj__num {
  font-family: var(--dsop-font-mono-family);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--dsop-primary);
}
.brk-tj__main { min-width: 0; }
.brk-tj__title {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.2px;
  margin: 0 0 0.125rem;
  color: var(--dsop-ink);
}
.brk-tj__sub { font-size: 0.8125rem; color: var(--dsop-muted); margin: 0; line-height: 1.4; }
.brk-tj__gevinst {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dsop-muted);
  flex-shrink: 0;
}
.brk-tj__gevinst strong {
  font-family: var(--dsop-font-family);
  font-size: 1.125rem;
  color: var(--dsop-primary-deep);
  font-weight: 800;
  letter-spacing: -0.3px;
}

.brk-single__sidebar { display: flex; flex-direction: column; gap: 1rem; }
.brk-side-card {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.brk-side-card--featured { border-color: var(--dsop-cyan); background: linear-gradient(180deg, #fff, var(--dsop-mist-pale)); }
.brk-side-card__label {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.brk-side-card__name {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin: 0;
  color: var(--dsop-ink);
}
.brk-side-card__name a { color: inherit; text-decoration: none; }
.brk-side-card__name a:hover { color: var(--dsop-primary); }
.brk-side-card__sub {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--dsop-muted);
  margin: 0;
}
.brk-side-card__cta {
  margin-top: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--dsop-ink);
  color: #fff;
  border-radius: 8px;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.brk-side-card__cta:hover { background: var(--dsop-primary-deep); color: #fff; text-decoration: none; }
.brk-side-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; width: 100%; }
.brk-side-card__list a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0;
  color: var(--dsop-primary);
  font-size: 0.875rem;
  text-decoration: none;
}
.brk-side-card__list a:hover { color: var(--dsop-primary-deep); text-decoration: underline; }
.brk-side-card__num {
  display: inline-block;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  color: var(--dsop-muted);
  width: 22px;
}


/* ============== SDG-PILLS PÅ SINGLE-TJENESTE ============== */
.tj-sdg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .tj-sdg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tj-sdg-grid { grid-template-columns: 1fr; } }
.tj-sdg-tile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tj-sdg-tile:hover, .tj-sdg-tile:focus-visible {
  border-color: var(--dsop-cyan);
  transform: translateY(-2px);
  text-decoration: none;
}
.tj-sdg-tile__icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: contain;
}
.tj-sdg-tile__body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.tj-sdg-tile__num {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dsop-muted);
}
.tj-sdg-tile__navn {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--dsop-ink);
  margin: 0;
}
.tj-sdg-tile__bidrag {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--dsop-muted);
  margin: 0;
}


/* =========================================================================
   FORSIDE — fp-aktor + fp-sdg (CPT/taksonomi-drevet, venstrestilt)
   ========================================================================= */

.fp-aktor { background: var(--dsop-surface); padding: 4.5rem 0 4rem; }
.fp-aktor__head { max-width: 64ch; margin: 0 0 2.5rem; }
.fp-aktor__kicker {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 0.875rem;
}
.fp-aktor__kicker-line { width: 24px; height: 1px; background: var(--dsop-cyan); }
.fp-aktor__heading {
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 0 0 0.875rem;
  color: var(--dsop-ink);
}
.fp-aktor__lede { color: var(--dsop-muted); margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; }

/* minmax(0, 1fr), ikke 1fr: 1fr betyr minmax(auto, 1fr), og auto-minimumet
   settes av innholdet. Logoboksen hadde fast bredde 160px, så to spor ble
   452px i en 327px-boks på mobil og dyttet hele siden i horisontal scroll. */
.fp-aktor__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1000px) { .fp-aktor__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fp-aktor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* «Digitaliseringsdirektoratet» er 26 tegn og passer ikke i et halvt
     mobilspor. Orddeling framfor mindre skrift; nb-NO står på <html>, så
     hyphens: auto har et ordbokspråk å dele etter. */
  .fp-aktor__navn { overflow-wrap: break-word; hyphens: auto; }
}

.fp-aktor__tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
  padding: 1.25rem 1rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fp-aktor__tile:hover, .fp-aktor__tile:focus-visible {
  border-color: var(--dsop-cyan);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(0,85,135,0.18);
  text-decoration: none;
}
.fp-aktor__logo {
  width: 100%;
  max-width: 160px;
  height: 64px;
  background: transparent;
  border-radius: 10px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
.fp-aktor__logo--dark { background: var(--dsop-ink); }
.fp-aktor__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* Logo-boks bruker flex + max-box (ikke grid + height:100%): i en grid-container
   med auto-rad resolver ikke prosent-høyde på <img>, så bildet tok høyden fra
   width:100% × aspect og ble klippet av overflow:hidden (typisk NAV-merket).
   Flex + max-width/max-height respekterer boksens definite høyde og viser hele
   logoen uansett aspect. Hook for per-logo finjustering: .aktor-logo--<slug>
   ligger på alle tre wrappere (front/arkiv/single). */
.fp-aktor__mono {
  font-weight: 800; font-size: 1.25rem; color: var(--dsop-primary); letter-spacing: -0.5px;
}
.fp-aktor__navn {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
  color: var(--dsop-muted);
  text-align: center;
}
.fp-aktor__cta { margin: 2rem 0 0; font-family: var(--dsop-font-mono-family); font-size: 0.875rem; }
.fp-aktor__cta a { color: var(--dsop-primary); font-weight: 700; text-decoration: none; }
.fp-aktor__cta a:hover { color: var(--dsop-primary-deep); text-decoration: underline; }


/* ============== FORSIDE — fp-sdg ============== */
.fp-sdg { background: var(--dsop-mist-pale); padding: 4.5rem 0 4rem; }
.fp-sdg__head { max-width: 56ch; margin: 0 0 2rem; }
.fp-sdg__kicker {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: 0.875rem;
}
.fp-sdg__kicker-line { width: 24px; height: 1px; background: var(--dsop-cyan); }
.fp-sdg__heading {
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 0;
  color: var(--dsop-ink);
}
.fp-sdg__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}
@media (max-width: 980px) { .fp-sdg__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .fp-sdg__grid { grid-template-columns: repeat(3, 1fr); } }
.fp-sdg__tile {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms;
  aspect-ratio: 1 / 1;
}
.fp-sdg__tile:hover, .fp-sdg__tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(0,85,135,0.25);
}
.fp-sdg__tile img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fp-sdg__cta { margin: 2rem 0 0; font-family: var(--dsop-font-mono-family); font-size: 0.875rem; }
.fp-sdg__cta a { color: var(--dsop-primary); font-weight: 700; text-decoration: none; }
.fp-sdg__cta a:hover { color: var(--dsop-primary-deep); text-decoration: underline; }


/* ============================================================
   REVISJON AUGUST 2026 — programkontorets tilbakemeldinger
   Lagt sist i fila med vilje: media queries oeker ikke
   spesifisitet, saa de MAA staa etter reglene de overstyrer.
   ============================================================ */

/* ---- Kompakt tjenesteoversikt paa forsiden ----
   Georg ba om kortere forside. Vi beholder alle 15 lenkene
   (viktigste inngang til tjenestesidene i soek) og komprimerer
   heller: fire kolonner, lavere illustrasjon, tettere rytme. */
.atlas--kompakt .atlas__head {
  margin-bottom: var(--dsop-space-md);
}
.atlas--kompakt .atlas__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dsop-space-md);
}
.atlas--kompakt .atlas-tile {
  padding: var(--dsop-space-sm);
  gap: 0.5rem;
}
.atlas--kompakt .atlas-tile__illu {
  aspect-ratio: 16 / 9;
}
.atlas--kompakt .atlas-tile__title {
  font-size: 1rem;
  line-height: 1.3;
}
.atlas--kompakt .atlas-tile__lede {
  font-size: 0.8125rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1200px) {
  .atlas--kompakt .atlas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .atlas--kompakt .atlas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .atlas--kompakt .atlas__grid { grid-template-columns: 1fr; }
}

/* ---- Organisering: seks likestilte moetepunkter ----
   Erstatter det tidligere hierarkiet (tre noder + tre armer) etter
   oenske fra programkontoret 21.7.2026. */
.om-gov__punkter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dsop-space-md);
}
.om-gov-punkt {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
  padding: var(--dsop-space-md);
}
.om-gov-punkt__navn {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--dsop-primary);
}
.om-gov-punkt__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--dsop-muted);
}
@media (max-width: 900px) {
  .om-gov__punkter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .om-gov__punkter { grid-template-columns: 1fr; }
}


/* ---- Felleskomponent-kort uten ikon ----
   Kortet er tospaltet (72px ikon + tekst). Naar ikonet mangler havnet
   teksten i ikonkolonnen og brakk til ett ord per linje — Georg meldte
   det 11.8.2026 om de to nye komponentene. Uten ikon skal teksten
   bruke hele bredden. */
.fk-list-card:not(:has(.fk-list-card__ikon)) {
  grid-template-columns: minmax(0, 1fr);
}
.tj-fk-tile__navn,
.fk-list-card__navn {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---- Hero: sikre at hele foersteinntrykket faar plass ----
   Georg meldte at tickeren saavidt havnet under skjermkanten. Hans nye
   overskriftstekst er like lang som den forrige, saa typografien maa baere
   jobben. Hoeyde-baserte media queries — ikke bredde — fordi problemet er
   lave viewporter (1366x768-laptoper har ~640px synlig hoeyde). */
@media (max-height: 900px) and (min-width: 900px) {
  /* Headeren er sticky og ligger i flyten over heroen, saa 100svh gjoer
     heroen nettopp headerhoeyden for hoey — tickeren havnet 83px under
     folden paa 1366x640. Trekk den fra. */
  .hero-c { min-height: calc(100svh - var(--dsop-header-h, 83px)); padding: 2.5rem 0 calc(2.5rem + var(--dsop-ticker-h)); }
  .hero-c__title { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 1.25rem; }
  .hero-c__sub { font-size: 1.0625rem; margin-bottom: 1.5rem; }
  .hero-c__live { margin-bottom: 1rem; }
}
@media (max-height: 740px) and (min-width: 900px) {
  .hero-c { min-height: calc(100svh - var(--dsop-header-h, 83px)); padding: 1.5rem 0 calc(1.5rem + var(--dsop-ticker-h)); }
  .hero-c__title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: 1rem; }
  .hero-c__sub { font-size: 1rem; margin-bottom: 1.25rem; }
}
/* Mobil og nettbrett: svh unngaar at nettleserens adressefelt spiser hoeyde. */
@media (max-width: 899px) {
  .hero-c { min-height: auto; }
  .hero-c__title { font-size: clamp(1.875rem, 6.5vw, 2.75rem); }
  .hero-c__sub { font-size: 1.0625rem; }
}

/* ---- Tickeren paa telefon: mindre skrift, roligere fart ----
   px/s er en desktop-maalestokk. Farten oppleves i skjermbredder per sekund,
   og der er 375px-skjermen 3,8 ganger raskere enn 1440px paa samme 60 px/s:
   en skjermbredde tekst passerer paa 6,2s mot 23,9s. Full paritet ville krevd
   16 px/s — saa sakte at stripen ser ut til aa ha stoppet. Multiplikatoren
   1,75 legger farten omtrent midt mellom (geometrisk snitt 30,8 px/s), og
   traversen blir ~11,5s.

   Skriften ned fra 12px til 11px: 12px monospace er stort nok til aa
   konkurrere med ingressen rett over, og 0,6875rem er den samme mikro-monoen
   som brukes i footer-metaen og navnepillene — ikke en ny stoerrelse. */
@media (max-width: 640px) {
  .hero-c__ticker-track {
    font-size: 0.6875rem;
    animation-duration: calc(var(--dsop-ticker-duration, 170s) * 1.75);
  }
}


/* ---- Innlogget: WP-adminbaren spiser toppen av viewporten ----
   WordPress setter html{margin-top:32px} for innloggede. Uten fratrekk
   havner tickeren under folden naar redaktoeren ser paa siden — som er
   noeyaktig naar den skal vurderes. */
.admin-bar .hero-c { min-height: calc(100svh - var(--dsop-header-h, 83px) - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .hero-c { min-height: calc(100svh - var(--dsop-header-h, 83px) - 46px); }
}

/* Forklarende linje under seksjonsoverskriften paa tjenestesidene. */
.tj-section__lede {
  max-width: 46rem;
  margin: -0.5rem 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--dsop-muted);
}


/* ---- Mobil: CTA-knappene i heroen tar full bredde ----
   Lettere traeffflate og en roligere venstrekant naar de stables. */
@media (max-width: 599px) {
  .hero-c__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-c__ctas .btn { width: 100%; justify-content: center; }
}

/* ============ ARKIVSIDE ============
   Liste framfor kortgrid: innholdet er heterogent (rapporter, opptak,
   dokumenter) og skal skannes, ikke bla i. */
.arkiv-seksjon { padding: 3.5rem 0; }
.arkiv-seksjon:nth-of-type(even) { background: var(--dsop-mist-pale); }
.arkiv-seksjon__tittel {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--dsop-primary);
}
.arkiv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.arkiv-element__lenke {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-md, 12px);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.arkiv-element__lenke:hover {
  border-color: var(--dsop-primary);
  transform: translateY(-2px);
  box-shadow: var(--dsop-shadow-tile-hover, 0 8px 24px rgba(0,85,135,0.12));
}
.arkiv-element__lenke:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: 3px; }
.arkiv-element__ikon { font-size: 1.25rem; text-align: center; opacity: 0.75; }
.arkiv-element__tekst { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.arkiv-element__tittel { font-weight: 700; color: var(--dsop-ink); }
.arkiv-element__beskr { font-size: 0.875rem; line-height: 1.5; color: var(--dsop-muted); }
.arkiv-element__meta {
  display: flex; align-items: center; gap: 0.625rem;
  font-family: var(--dsop-font-mono-family, monospace);
  font-size: 0.75rem;
  color: var(--dsop-muted);
  white-space: nowrap;
}
.arkiv-element__pil { color: var(--dsop-primary); font-size: 0.9375rem; }
@media (max-width: 640px) {
  .arkiv-element__lenke { grid-template-columns: 2rem minmax(0, 1fr); row-gap: 0.5rem; }
  .arkiv-element__meta { grid-column: 2; }
}


/* ---- Gradient-tekst: siste bokstav ble beskaaret ----
   Overskriftene har negativ letter-spacing, som ogsaa trekker inn etter
   siste tegn. Med background-clip: text blir malingsboksen da smalere enn
   glyfen, og hoeyre kant av f.eks. P-en i «DSOP» faar ingen gradient.
   Padding utvider malingsboksen; negativ margin holder layouten uendret. */
.aktor-archive__title em,
.atlas__head h2 em,
.fk-archive__title em,
.hero-c__title em,
.kontakt-bits__title em,
.kontakt-routing__title em,
.om-erfaringer__title em,
.om-gov__title em,
.om-hero__title em,
.people-band__title em,
.story__title em,
.tj-section__title em {
  padding-right: 0.07em;
  margin-right: -0.07em;
}

/* ---- Arkiv: rad med sekundaerlenke ----
   Hovedlenken strekkes over hele kortet, saa sekundaerlenken kan ligge
   som soesken uten nestede anker. */
.arkiv-element { position: relative; }
.arkiv-element--todelt .arkiv-element__lenke { padding-right: 9rem; }
.arkiv-element__lenke::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.arkiv-element__alt {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--dsop-border);
  border-radius: 999px;
  background: var(--dsop-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dsop-primary);
  text-decoration: none;
  transition: background-color 160ms, border-color 160ms;
}
.arkiv-element__alt:hover { background: var(--dsop-mist-pale); border-color: var(--dsop-primary); }
.arkiv-element__alt:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: 2px; }
@media (max-width: 640px) {
  .arkiv-element--todelt .arkiv-element__lenke { padding-right: 1.375rem; padding-bottom: 3rem; }
  .arkiv-element__alt { top: auto; bottom: 1rem; right: auto; left: 4rem; transform: none; }
}

/* ============ KAMPANJE / «AKTUELT» ============ */
/* Forsideavsnitt for konferanser, nye tjenester og lanseringer (Georg 4.9.2026).
   Ett oppsett: .kampanje--fremhevet — første oppslag stort, resten som liste.
   «Bånd»-varianten ble valgt bort 21.9.2026 og er slettet.
   Rendres av template-parts/kampanje.php. */

.kampanje { background: var(--dsop-mist-pale); }
.kampanje__head { margin-bottom: var(--dsop-space-lg); max-width: 46rem; }
.kampanje__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin-bottom: var(--dsop-space-xs);
}
.kampanje__eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--dsop-teal-accessible);
}
.kampanje__title {
  font-family: var(--dsop-font-family);
  font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15; letter-spacing: -1px;
  color: var(--dsop-ink); margin: 0;
}

.kampanje-liste__dato {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.kampanje-liste__lenke {
  margin-top: auto;
  font-weight: 700; font-size: 0.9375rem;
  color: var(--dsop-teal-accessible);
  text-decoration: none;
}
.kampanje-liste__lenke:hover { text-decoration: underline; }

.kampanje__fremhevet {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--dsop-space-md);
  align-items: stretch;
}
@media (max-width: 900px) { .kampanje__fremhevet { grid-template-columns: 1fr; } }

.kampanje-hoved {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.875rem;
  padding: var(--dsop-space-lg);
  background: var(--dsop-ink);
  border-radius: var(--dsop-rounded-tile);
  color: #fff;
}
/* Med bilde deles panelet i to: bildet på den ene siden, teksten på den andre.
   Padding flyttes fra panelet til innholdet, så bildet kan gå helt ut i kanten. */
.kampanje-hoved--med-bilde {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.kampanje-hoved--med-bilde .kampanje-hoved__innhold {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.875rem;
  padding: var(--dsop-space-lg);
}
/* Lys bunn under bildet. DSOPs illustrasjonsbibliotek er gjennomsiktige PNG-er
   tegnet for lyse flater — på den mørke panelbunnen forsvinner de rett og slett.
   Samme gradient som atlas-flisene bruker for de samme illustrasjonene, så
   motivene ser like ut over hele nettstedet. Et fotografi fungerer også her. */
.kampanje-hoved__bilde {
  min-height: 100%;
  background: var(--dsop-gradient-tile-illu);
}
.kampanje-hoved__bilde img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .kampanje-hoved--med-bilde { grid-template-columns: 1fr; }
  .kampanje-hoved__bilde { aspect-ratio: 16 / 9; min-height: 0; }
}
/* Samme blueprint-mønster som tellerstripen, så det fremhevede oppslaget leser
   som en del av DSOP-språket og ikke som en fremmed reklameboks. */
.kampanje-hoved::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(91, 192, 201, 0.20) 0%, transparent 55%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
}
/* Mønsteret legges bak med z-index -1 og isolation, framfor å løfte hvert barn
   med `> * { position: relative }`. Det er ikke kosmetikk: et posisjonert barn
   ville blitt containing block for den strekkede lenka under, og da hadde
   klikkflaten stoppet ved tekstspalten i stedet for å dekke hele kortet. */
.kampanje-hoved { isolation: isolate; }
.kampanje-hoved__dato {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dsop-cyan);
}
.kampanje-hoved__tittel {
  font-family: var(--dsop-font-family);
  font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.15; letter-spacing: -0.8px;
  /* Eksplisitt hvit: den globale overskriftsregelen setter --dsop-ink på h3,
     som er nøyaktig samme farge som panelbakgrunnen. Uten denne blir
     tittelen usynlig. */
  color: #fff;
  margin: 0;
}
.kampanje-hoved__tekst {
  font-size: 1rem; line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 34rem; margin: 0;
}
.kampanje-hoved__lenke {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 1.375rem;
  background: var(--dsop-cyan);
  color: var(--dsop-ink);
  font-weight: 700; font-size: 0.9375rem;
  border-radius: var(--dsop-rounded-pill);
  text-decoration: none;
}
.kampanje-hoved__lenke:hover { background: #fff; color: var(--dsop-ink); }

.kampanje-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--dsop-space-sm); }
.kampanje-liste__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: var(--dsop-space-md);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
  flex: 1;
}
.kampanje-liste__tittel {
  font-family: var(--dsop-font-family);
  font-weight: 800; font-size: 1.125rem; line-height: 1.3;
  color: var(--dsop-ink); margin: 0;
}
.kampanje-liste__tekst {
  font-size: 0.875rem; line-height: 1.55; color: var(--dsop-muted); margin: 0;
}
/* Toppluften mellom heroen og tjenesterutenettet var 169px målt fra bunnen av
   ingressen til toppen av første kort — 48px fra heroen pluss 120px fra
   .section. På en ren indeksside er rutenettet hovedsaken og skal komme
   raskere. Kutter kun toppen; bunnen beholder seksjonsrytmen. */
.atlas--tett-topp { padding-top: var(--dsop-space-xl); }

/* ---- Aktuelt: hele kortet er klikkbart ----
   Samme mønster som arkivradene: lenka strekkes over kortet med ::after, så vi
   får én ekte lenke og full klikkflate uten nestede anker. Overlegget finnes
   bare når lenka finnes — kort uten lenke forblir ren informasjon og skal ikke
   se klikkbare ut.

   Lenketeksten er fortsatt den tilgjengelige navnet på lenka; hele kortet blir
   ikke lenketekst. Det er med vilje — «Meld deg på» leser bedre i en
   lenkeoversikt enn hele oppslaget. */
.kampanje-liste__item,
.kampanje-hoved { position: relative; }

.kampanje-liste__lenke::after,
.kampanje-hoved__lenke::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Hover på hele kortet, ikke bare lenka, så flaten signaliserer at den kan
   trykkes. :focus-within gir samme markering ved tastaturnavigasjon. */
.kampanje-liste__item:has(.kampanje-liste__lenke):hover,
.kampanje-liste__item:has(.kampanje-liste__lenke):focus-within {
  border-color: var(--dsop-teal-accessible);
  box-shadow: var(--dsop-shadow-card-hover);
  transform: translateY(-2px);
}
.kampanje-liste__item { transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }

.kampanje-hoved:has(.kampanje-hoved__lenke):hover,
.kampanje-hoved:has(.kampanje-hoved__lenke):focus-within {
  box-shadow: var(--dsop-shadow-elevated);
}
.kampanje-hoved { transition: box-shadow 200ms ease; }

@media (prefers-reduced-motion: reduce) {
  .kampanje-liste__item,
  .kampanje-hoved { transition: none; }
  .kampanje-liste__item:hover { transform: none; }
}

/* ---- Komponenter: gruppeoverskrift ----
   Georg 4.9.2026 delte de seks i to grupper. Overskriften skal skille tydelig
   uten å konkurrere med sidetittelen, derfor mono-etikett i samme språk som
   de øvrige kickerne framfor en stor display-overskrift. */
/* Gruppene er h2 og komponentene h3, men mono-etiketten gjorde overskriften
   visuelt MINDRE enn kortene under. Nivået leses av størrelsen, ikke av taggen.
   Nå i seksjonstittel-skala, med kortene tydelig under. */
.fk-list-gruppe {
  font-family: var(--dsop-font-family);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.5px;
  font-weight: 800;
  color: var(--dsop-ink);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--dsop-border);
}
.fk-list-gruppe + .fk-list-grid { margin-bottom: var(--dsop-space-xl); }
.fk-list-grid:last-child { margin-bottom: 0; }

/* ---- Sidetopp: kompakt variant for Kontakt og Arkiv ----
   Om DSOP åpner samarbeidets historie og tåler den store, midtstilte formen.
   Kontakt og Arkiv er bruksflater med kort intro, og skal komme raskere til
   innholdet. Venstrestilt, mindre luft, og samme tittelskala som de øvrige
   sidetoppene (2,75rem) framfor Om DSOPs 4,5rem. */
.om-hero--kompakt {
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-xl);
  text-align: left;
}
.om-hero--kompakt .om-hero__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  max-width: 24ch;
}
.om-hero--kompakt .om-hero__lede {
  margin-left: 0;
  margin-right: 0;
  max-width: 62ch;
}

/* Om DSOP: variant C. Etikett og overskrift står midtstilt og beholder
   åpningstyngden, men brødteksten venstrestilles i en smalere, sentrert
   spalte. Midtstilt langtekst er det tyngste å lese på hele nettstedet —
   øyet mister startpunktet på hver nye linje — og 48rem ga i tillegg 80–90
   tegn per linje. Venstrestilt tåler bredere spalte enn midtstilt, derfor
   62ch her framfor de 36rem en midtstilt variant ville krevd. */
.om-hero:not(.om-hero--kompakt) .om-hero__lede {
  text-align: left;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Komponentikoner: buntede Lucide-SVG-er ----
   Erstattet emoji, som var en blanding av enfargede tegn og fargeemoji og
   aldri kunne harmonere. SVG-ene tegnes med stroke="currentColor", så de
   arver fargen fra containeren og følger paletten. */
.fk-list-card__ikon svg,
.fk-single__hero-ikon svg,
.aktor-fk-list__ikon svg {
  width: 32px;
  height: 32px;
  display: block;
  stroke-width: 1.75;
}
.aktor-fk-list__ikon svg { width: 20px; height: 20px; }

/* ============ GEVINSTER (disposisjonsutkast 8.9.2026) ============ */
/* Rangert liste framfor stolpediagram. Bredden er relativ til STØRSTE tjeneste,
   ikke til totalen — med totalen som referanse ville alt under 5 % blitt en
   usynlig strek, som i rapportens egen graf. Tallet bærer informasjonen. */

.gevinst-fordeling { background: var(--dsop-surface); }
/* Hjelpetekst, ikke ingress: den forklarer hvordan søylene skal leses, og hører
   tett på overskriften framfor å stå som et eget avsnitt. Derfor strammere marg
   opp og litt mindre grad. */
.gevinst-fordeling__ingress {
  font-size: 1rem; line-height: 1.55;
  color: var(--dsop-muted); max-width: 80ch;
  margin: 0 0 var(--dsop-space-lg);
}
.gevinst .gevinst-fordeling .tj-section__title { margin-bottom: 0.375rem; }

.gevinst-liste { list-style: none; margin: 0; padding: 0; }
/* Ingen padding på raden selv. Den ligger på summary, slik at hover-flaten
   fyller nøyaktig fra kantlinjen over til kantlinjen under uten å måtte
   kompensere med skygge eller negative marger. */
.gevinst-rad { position: relative; border-top: 1px solid var(--dsop-border); }
.gevinst-rad--tom { padding: 0.875rem 0 0.5rem; }
.gevinst-rad:last-child { border-bottom: 1px solid var(--dsop-border); }
.gevinst-rad:hover .gevinst-rad__navn,
.gevinst-rad:focus-within .gevinst-rad__navn { color: var(--dsop-teal-accessible); }

.gevinst-rad__navn {
  font-family: var(--dsop-font-family);
  font-weight: 700; font-size: 1rem;
  color: var(--dsop-ink);
  transition: color 160ms ease;
}
.gevinst-rad__tall {
  display: inline-flex; align-items: baseline; gap: 0.375rem;
  white-space: nowrap;
  font-family: var(--dsop-font-family);
}
.gevinst-rad__tall strong { font-weight: 800; font-size: 1.125rem; color: var(--dsop-ink); }
.gevinst-rad__enhet { font-size: 0.8125rem; color: var(--dsop-muted); }


/* Streken viser forhold, ikke verdi — verdien står som tall rett over.
   Minimumsbredden gjør at den minste tjenesten fortsatt er synlig som en strek,
   ikke ingenting. 8px ble valgt framfor 3px: den tynne streken forsvant mot
   radskillene, og de små tjenestene ble til støv. */
.gevinst-rad__strek {
  display: block; margin-top: 0.5rem;
  height: 8px; border-radius: 4px;
  background: var(--dsop-mist-pale);
  overflow: hidden;
}
.gevinst-rad__fyll {
  display: block; height: 100%;
  border-radius: 4px;
  background: var(--dsop-gradient-heading);
}
/* Ingen min-width lenger. Den ga mening da streken var relativ til den største
   tjenesten og null ikke fantes; nå betyr tom strek «ikke realisert ennå», og
   det skal leses som null — ikke som en liten andel. */

/* Statuslinjen under streken. Bærer det streken ikke kan si presist. */
.gevinst-rad__status {
  display: block; margin-top: 0.4375rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 0.5px;
  color: var(--dsop-muted);
}

/* Trekkspillet: pila står ved beløpet der blikket allerede er, og raden får en
   flate ved hover og tastaturfokus så den leses som ett trykkbart objekt.

   Flaten ligger på SUMMARY, som nå bærer radens padding. To tidligere forsøk
   bommet: box-shadow-spredning ga en boble som ikke traff kantlinjene, og flate
   på hele raden la seg oppå det åpne panelet — to former med ulik radius og
   ulik bredde samtidig. Nå er det én form: radbredde, 4px radius, både ved
   hover og når raden er åpen. */
/* Flaten går litt utenfor tekstmargen på begge sider. Uten den luften stoppet
   bakgrunnen rett inntil bokstavene og så ut som et uhell. Marg og padding er
   like store, så teksten står på nøyaktig samme linje som i lukkede rader. */
.gevinst-rad__detalj > summary {
  margin: 0 calc(var(--dsop-space-sm) * -1);
  padding: 0.875rem var(--dsop-space-sm) 0.5rem;
  border-radius: 8px;
  transition: background-color 160ms ease;
}
.gevinst-rad__detalj:not([open]) > summary:hover,
.gevinst-rad__detalj:not([open]) > summary:focus-visible {
  background: color-mix(in srgb, var(--dsop-mist-pale) 55%, transparent);
}
.gevinst-rad:hover .gevinst-rad__pil,
.gevinst-rad:focus-within .gevinst-rad__pil { color: var(--dsop-teal-accessible); }

/* .gevinst-uavklart og .gevinst-plassholder er borte sammen med merknadene de
   tilhørte. De var med vilje påtrengende, og gjorde jobben sin: begge er
   avklart. .gevinst-mangler står igjen — den er ikke midlertidig, men sier fra
   når en tjeneste faktisk mangler gevinstanslag. */
.gevinst-mangler {
  margin: var(--dsop-space-md) 0 0;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--dsop-muted);
  max-width: 68ch;
}

@media (max-width: 560px) {
  .gevinst-rad__topp { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .gevinst-rad__tall { align-self: flex-start; }
}

/* ---- Gevinstrader som trekkspill ----
   <details>/<summary> framfor egen JS. Standardmarkøren fjernes og erstattes av
   en egen pil, ellers får vi to. */
.gevinst-rad__detalj > summary { list-style: none; cursor: pointer; display: block; }
.gevinst-rad__detalj > summary::-webkit-details-marker { display: none; }
.gevinst-rad__detalj > summary:focus-visible {
  outline: 2px solid var(--dsop-teal-accessible);
  outline-offset: 3px; border-radius: var(--dsop-rounded-sm);
}

.gevinst-rad__topp { text-decoration: none; color: inherit; }
.gevinst-rad__hode {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--dsop-space-md);
}
.gevinst-rad:hover .gevinst-rad__navn,
.gevinst-rad:focus-within .gevinst-rad__navn { color: var(--dsop-teal-accessible); }

.gevinst-rad__pil {
  width: 7px; height: 7px; flex-shrink: 0;
  margin-left: 0.125rem;
  color: var(--dsop-muted);
  transition: transform 200ms ease, color 160ms ease;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 200ms ease;
}
.gevinst-rad__detalj[open] .gevinst-rad__pil { transform: rotate(-135deg) translate(-1px, -1px); }

.gevinst-panel {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--dsop-space-md);
  padding: var(--dsop-space-md) 0 var(--dsop-space-sm);
  align-items: start;
}
.gevinst-panel__illu {
  background: var(--dsop-gradient-tile-illu);
  border-radius: var(--dsop-rounded-md);
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.gevinst-panel__illu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gevinst-panel__kol h3 {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin: 0 0 0.75rem;
}
.gevinst-panel__kol ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.gevinst-panel__kol li {
  padding-left: 1.25rem; position: relative;
  font-size: 0.9375rem; line-height: 1.6; color: var(--dsop-muted);
}
.gevinst-panel__kol li::before {
  content: ''; position: absolute; left: 0; top: 0.55rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dsop-cyan);
}

/* Illustrasjonen holdes helt innenfor heroen. Overlapp ble prøvd først, men
   virker ikke her: motivet er gjennomsiktig og har ingen egen kant, så
   fargeskiftet mellom hero og feltet under tegner en vannrett linje tvers over
   det — og det leses som et kutt, ikke som et valg. Overlapp krever et element
   med definert kant, f.eks. et kort eller et foto med ramme. */
.gevinst .archive-hero { position: relative; overflow: visible; }
.gevinst .archive-hero > .wrap { position: relative; z-index: 1; }
@media (min-width: 901px) {
  /* 40 % ga et hull mellom teksten og illustrasjonen etter at motivet ble
     beskåret og dermed smalere. 30 % lar teksten puste ut uten å komme borti. */
  .gevinst .archive-hero > .wrap { padding-right: 30%; }
}
/* Størrelsen styres på HØYDEN, ikke bredden: det beskårne motivet er tilnærmet
   kvadratisk (906x1045), og heroens høyde er den knappe ressursen. Med
   breddestyring vokste den ut av seksjonen før den ble stor nok å se. */
/* Heroen bærer nå ingress og piller i venstre kolonne, så illustrasjonen har
   høyde å fylle igjen. Et glimt av seksjonsoverskriften under er nok til å vise
   at det finnes mer (Eirik 9.9) — hele grafen trenger ikke være synlig. */
.gevinst-hero__illu {
  position: absolute;
  right: max(1.5rem, calc((100% - 1200px) / 2));
  /* Midtstilt framfor forankret i bunnen. Bunnforankringen stammer fra da
     illustrasjonen skulle overlappe seksjonskanten; nå ligger den inne i en
     hero med tekst ved siden av, og satt for tett på nedre kant. */
  top: 50%;
  transform: translateY(-50%);
  height: clamp(240px, 24vw, 330px);
  width: auto;
  pointer-events: none;
  z-index: 2;
}
/* Heroen må ikke kunne bli lavere enn illustrasjonen den inneholder — ellers
   stikker den opp over seksjonskanten igjen. */
@media (min-width: 901px) {
  .gevinst .archive-hero { min-height: calc(clamp(240px, 24vw, 330px) + 3rem); }
}

/* Under 900px skjules den framfor å stables — den er dekorativ og skal ikke
   dytte innholdet ned på en liten skjerm. */
@media (max-width: 900px) { .gevinst-hero__illu { display: none; } }

/* Rutenettet under må ikke havne oppå illustrasjonen som stikker ned i det. */
.gevinst .gevinst-fordeling { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .gevinst-panel { grid-template-columns: 1fr; }
  .gevinst-panel__illu { max-width: 240px; }
}
@media (max-width: 560px) {
  .gevinst-rad__hode { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gevinst-rad__pil { transition: none; }
}

/* ---- Gevinster: beløp vs. andel, panel og bunnseksjoner ---- */
/* Enheten hørte visuelt til prosenten og ga «mill 0,4». Nå følger enheten
   beløpet i ink, og andelen står for seg i egen kolonne med fast bredde. */
.gevinst-rad__tall { display: inline-flex; align-items: baseline; gap: var(--dsop-space-sm); }
.gevinst-rad__belop { white-space: nowrap; color: var(--dsop-ink); }
.gevinst-rad__belop strong { font-weight: 800; font-size: 1.125rem; }
.gevinst-rad__enhet { font-size: 0.8125rem; font-weight: 600; color: var(--dsop-ink); }
/* .gevinst-rad__andel er fjernet: andelen av totalen sa lite (Georg 9.9),
   og plassen brukes nå til realiseringsgraden. */

/* auto-fit regnet ut fire like spor à 268px av 1144px, men panelet har tre
   barn — så en hel kolonne sto tom og begge tekstkolonnene ble klemt ned til
   268px. Eksplisitte spor i stedet: teksten deler all plass som blir til overs,
   illustrasjonen får bare bredden den trenger. */
.gevinst-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 240px);
}
.gevinst-panel__illu { max-width: none; }
/* Tekstlenke framfor fylt knapp. Understreket i utgangspunktet, så den fortsatt
   leses som lenke uten å konkurrere med tallene over. */
.gevinst-panel__knapp {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.375rem;
  /* Malt 23,1px — under 2.5.8 sine 24, med under en piksel aa gaa paa. Hoeyden
     tas i min-height framfor stoerre skrift: lenken skal fortsatt ikke
     konkurrere med tallene over den. 44 paa mobil per DESIGN.md. */
  min-height: 44px;
  font-size: 0.875rem; font-weight: 700;
  color: var(--dsop-teal-accessible);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--dsop-teal-accessible) 35%, transparent);
}
.gevinst-panel__knapp:hover { text-decoration-color: currentColor; }
.gevinst-panel__knapp-pil { transition: transform 160ms ease; }
.gevinst-panel__knapp:hover .gevinst-panel__knapp-pil { transform: translateX(3px); }

/* Åpen rad får egen flate. Uten den fløt panelet fritt mellom to radskiller og
   det var ikke opplagt hvilken tjeneste tallene hørte til. Bakgrunnen binder
   overskrift og innhold sammen som én blokk. */
/* Åpen rad har samme bredde som de lukkede. Den blødde tidligere 24px ut på hver
   side og ble bredere enn resten av grafen — panelet så større ut enn lista det
   hørte til. Samme radius som hover-flaten, så formspråket er ett. */
/* Samme utblødning som hover-flaten. Det avgjørende er ikke at de holder seg
   innenfor margen, men at de er nøyaktig like brede — ulik bredde var det som
   fikk panelet til å se større ut enn lista. */
.gevinst-rad__detalj[open] {
  margin: 0 calc(var(--dsop-space-sm) * -1);
  padding: 0 var(--dsop-space-sm) var(--dsop-space-sm);
  background: var(--dsop-mist-pale);
  border-radius: 8px;
}
.gevinst-rad__detalj[open] > summary { margin: 0; padding-left: 0; padding-right: 0; }
/* Sporet bak streken må bytte tone når raden selv er blitt mist-pale. */
.gevinst-rad__detalj[open] .gevinst-rad__strek { background: var(--dsop-mist); }

/* Alle brekkpunktene for panelet MÅ stå her, etter grunnregelen over.
   Enkolonne-regelen lenger oppe i fila taper på kilderekkefølge — media queries
   gir ikke ekstra spesifisitet — og ga 19,5px brede tekstkolonner på 375px. */
@media (max-width: 980px) {
  .gevinst-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Kolonnen med illustrasjon og bærekraftsmål legger seg under tekstene.
     Grid-plasseringen ligger på wrapperen, maksbredden fortsatt på bildet. */
  .gevinst-panel__side { grid-column: 1 / -1; }
  .gevinst-panel__illu { max-width: 320px; }
}
@media (max-width: 700px) {
  .gevinst-panel { grid-template-columns: minmax(0, 1fr); }
  /* Full bredde. 240px etterlot en tredjedel tom ved siden av på mobil, og
     motivet ble for lite til å lese. */
  .gevinst-panel__illu { max-width: none; }
}

/* ---- Gevinster: fargenøkkel, åpne-hint og bærekraftsmål (runde 4, 3.10.2026) ----
   Blå = økonomisk, grønn = samfunn. Samme par i heroen og i panelet, så
   leseren kjenner igjen skillet. Fargen er aldri alene om det — ordene står. */
.gevinst-ord--okonomi { color: var(--dsop-primary); }
.gevinst-ord--samfunn { color: var(--dsop-green-accessible); }
.gevinst-panel__tittel--okonomi { color: var(--dsop-primary); }
.gevinst-panel__tittel--samfunn { color: var(--dsop-green-accessible); }

/* «Vis gevinster» ved pila. Pila alene ble ikke lest som noe som kan åpnes;
   en liten pille med tekst gjør det, uten å ta blikket fra beløpet. Teal på
   hvit er 5,09:1, på mist-pale (åpen rad) 4,58:1. */
.gevinst-rad__vis {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-left: var(--dsop-space-xs);
  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
  border: 1px solid var(--dsop-border);
  border-radius: 999px;
  background: var(--dsop-surface);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
  color: var(--dsop-teal-accessible);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.gevinst-rad__vis .gevinst-rad__pil { margin: -3px 0 0; color: currentColor; }
.gevinst-rad__vis-apen { display: none; }
.gevinst-rad__detalj[open] .gevinst-rad__vis-lukket { display: none; }
.gevinst-rad__detalj[open] .gevinst-rad__vis-apen { display: inline; }
.gevinst-rad__detalj[open] .gevinst-rad__vis .gevinst-rad__pil { margin-top: 3px; }
.gevinst-rad__detalj > summary:hover .gevinst-rad__vis,
.gevinst-rad__detalj > summary:focus-visible .gevinst-rad__vis {
  border-color: var(--dsop-teal-accessible);
}

/* Illustrasjon og bærekraftsmål deler tredje kolonne. */
.gevinst-panel__side { display: flex; flex-direction: column; gap: var(--dsop-space-sm); min-width: 0; }
.gevinst-panel__sdg-tittel {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  margin: 0 0 0.5rem;
}
.gevinst-panel__sdg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
/* 44px: ikonene er små som detalj, men er lenker og skal kunne treffes med
   tommelen (DESIGN.md: 44 på mobil). */
.gevinst-panel__sdg-lenke { display: block; border-radius: 4px; transition: transform 160ms ease; }
.gevinst-panel__sdg-lenke img { display: block; width: 44px; height: 44px; border-radius: 4px; }
.gevinst-panel__sdg-lenke:hover { transform: translateY(-2px); }
.gevinst-panel__sdg-lenke:focus-visible { outline: 2px solid var(--dsop-teal-accessible); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .gevinst-panel__sdg-lenke { transition: none; }
  .gevinst-panel__sdg-lenke:hover { transform: none; }
}


/* Bunnseksjonen: bærekraftsmålene som gevinstenes ikke-målbare halvdel.
   .gevinst-annet-reglene er fjernet sammen med seksjonen de tilhørte. */
.gevinst-sdg { background: var(--dsop-surface); }
.gevinst-sdg__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--dsop-space-md); margin-top: var(--dsop-space-lg);
}
.gevinst-sdg__kort {
  position: relative;
  padding: var(--dsop-space-md);
  background: var(--dsop-mist-pale);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
  transition: border-color 160ms ease, transform 160ms ease;
}
/* Hele kortet klikkbart via strukket lenke, ikke en <a> rundt alt — kortet
   inneholder overskrift og lister, og et anker rundt dem gir ugyldig HTML
   straks noe der inne selv skal lenke. Samme grep som .arkiv-element og
   .kampanje-hoved. */
/* Den faktiske treffflaten er hele kortet (::after under, inset:0), saa 2.5.8
   er dekket uansett. Men selve <a>-boksen malte 20px, og en maaling som ikke
   stemmer med virkeligheten er verdt aa rette: da slipper neste gjennomgang aa
   ta omveien om aa oppdage at lenken er strukket. */
.gevinst-sdg__lenke { display: inline-flex; align-items: center; min-height: 24px; }
.gevinst-sdg__lenke::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.gevinst-sdg__kort:hover { border-color: var(--dsop-teal-accessible); transform: translateY(-2px); }
.gevinst-sdg__kort:hover .gevinst-sdg__navn a { color: var(--dsop-teal-accessible); }
.gevinst-sdg__kort:focus-within { border-color: var(--dsop-teal-accessible); }
.gevinst-sdg__lenke:focus-visible { outline: 2px solid var(--dsop-teal-accessible); outline-offset: 3px; }
.gevinst-sdg__ikon { width: 64px; margin-bottom: 0.875rem; }
.gevinst-sdg__ikon img { width: 100%; height: auto; display: block; border-radius: 6px; }
.gevinst-sdg__navn { font-size: 1rem; font-weight: 800; margin: 0 0 0.5rem; line-height: 1.3; }
.gevinst-sdg__navn a { color: var(--dsop-ink); text-decoration: none; }
.gevinst-sdg__navn a:hover { color: var(--dsop-teal-accessible); }
.gevinst-sdg__bidrag { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--dsop-muted); }
.gevinst-sdg__antall {
  margin: 0; font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.gevinst-sdg__antall--helhet { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--dsop-muted); }


/* Lenken fra tjenestearkivet til gevinstoppdelingen. */
.archive-hero__cta { margin: var(--dsop-space-lg) 0 0; }

/* ---- Heroens ingress og piller ----
   Innholdet lå en periode som egen seksjon under heroen. Det leste da som to
   bolker om det samme, og skjøv grafen langt ned. Nå er det ingressen til
   tallet, i venstre kolonne ved siden av illustrasjonen. */
.gevinst-hero__ingress {
  max-width: 54ch;
  margin: var(--dsop-space-md) 0 0;
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--dsop-ink);
}
.gevinst-hero__ingress--dempet {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--dsop-muted);
}

/* Piller framfor kort eller kolonner: eksemplene er stikkord, ikke avsnitt, og
   de skal ikke ta høyde fra illustrasjonen ved siden av. */
.gevinst-hero__piller {
  list-style: none; margin: var(--dsop-space-md) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  max-width: 60ch;
}
.gevinst-hero__piller li {
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem; line-height: 1.4;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: 999px;
  color: var(--dsop-ink);
}

/* ---- Metoden ----
   Sammenlagt fordi de færreste leser den i sin helhet, men den skal finnes:
   den er hele svaret på hvor tallet kommer fra. Samme trekkspillmønster som
   radene, så affordansen er den samme to steder på siden. */
.gevinst-metode {
  margin-top: var(--dsop-space-lg);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-md);
  background: var(--dsop-surface);
}
.gevinst-metode > summary { list-style: none; }
.gevinst-metode > summary::-webkit-details-marker { display: none; }
.gevinst-metode__topp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dsop-space-sm);
  padding: 0.875rem var(--dsop-space-md);
  cursor: pointer;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.gevinst-metode > summary:focus-visible {
  outline: 2px solid var(--dsop-teal-accessible);
  outline-offset: 2px; border-radius: var(--dsop-rounded-md);
}
.gevinst-metode[open] .gevinst-rad__pil { transform: rotate(-135deg) translate(-1px, -1px); }
.gevinst-metode__tekst { padding: 0 var(--dsop-space-md) var(--dsop-space-md); max-width: 78ch; }
.gevinst-metode__tekst p {
  margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.65;
  color: var(--dsop-muted);
}
.gevinst-metode__kilde { font-style: italic; font-size: 0.8125rem !important; margin-bottom: 0 !important; }

/* Eget seksjonshode, som på den gamle bærekraftssiden. */
.gevinst-sdg__kicker {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}

@media (prefers-reduced-motion: reduce) {
  .gevinst-sdg__kort { transition: none; }
  .gevinst-sdg__kort:hover { transform: none; }
}

/* ============ 404, SØK OG ERKLÆRINGER ============
   Brukt av: 404.php, search.php, searchform.php, template-parts/snarveier.php
   og template-parts/erklaering.php. Alle tre sidetypene åpner med den lyse
   .archive-hero-toppen; reglene her gjelder bare det som kommer i tillegg. */

/* ---- Søkeskjema ---- */
.sokeskjema { margin-top: var(--dsop-space-lg); max-width: 36rem; }
.sokeskjema__etikett {
  display: block;
  margin-bottom: var(--dsop-space-xs);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dsop-ink);
}
.sokeskjema__rad { display: flex; gap: var(--dsop-space-xs); }
/* Kanten er #6F8298, ikke --dsop-border: feltets avgrensning må ha 3:1 mot
   bakgrunnen (WCAG 1.4.11). --dsop-border gir 1,3:1; denne gir 3,55:1 mot
   heroens lyseste og mørkeste bunn (#FAFCFE / #E8F5FC). */
.sokeskjema__felt {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--dsop-ink);
  background: var(--dsop-surface);
  border: 1px solid #6F8298;
  border-radius: var(--dsop-rounded-sm);
}
.sokeskjema__felt:focus { border-color: var(--dsop-primary); box-shadow: 0 0 0 3px rgba(0, 85, 135, 0.16); }
.sokeskjema__knapp { flex: none; min-height: 48px; }

/* ---- Snarveier (404 og tom søketilstand) ---- */
.snarveier__tittel {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing: -0.4px;
  margin-bottom: var(--dsop-space-md);
}
.snarveier__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--dsop-space-sm);
}
.snarveier__lenke {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: var(--dsop-space-md);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-md);
  box-shadow: var(--dsop-shadow-card);
  color: var(--dsop-ink);
  text-decoration: none;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms, border-color 240ms;
}
.snarveier__lenke:hover {
  color: var(--dsop-ink);
  border-color: var(--dsop-primary);
  box-shadow: var(--dsop-shadow-tile-hover);
  transform: translateY(-2px);
}
.snarveier__lenke:focus-visible { outline: 3px solid var(--dsop-teal-accessible); outline-offset: 3px; border-radius: var(--dsop-rounded-md); }
.snarveier__navn {
  display: flex;
  justify-content: space-between;
  gap: var(--dsop-space-xs);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.snarveier__navn::after {
  content: '\2192';
  content: '\2192' / '';
  color: var(--dsop-primary);
  transition: transform 240ms;
}
.snarveier__lenke:hover .snarveier__navn::after { transform: translateX(3px); }
.snarveier__tekst { font-size: var(--dsop-font-body-sm); line-height: 1.5; color: var(--dsop-muted); }

/* ---- 404 ---- */
.feilside__rutenett {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dsop-space-2xl);
}
/* Dekorativt (aria-hidden): samme gradient som uthevede ord i sidetoppene. */
.feilside__merke {
  font-family: var(--dsop-font-mono-family);
  font-size: clamp(6rem, 13vw, 10.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.85;
  user-select: none;
}
.feilside__snarveier.section { padding-top: var(--dsop-space-2xl); }
@media (max-width: 900px) {
  .feilside__rutenett { grid-template-columns: minmax(0, 1fr); }
  .feilside__merke { display: none; }
}

/* ---- Søkeresultater ---- */
.sokeside.section { padding-top: var(--dsop-space-xl); }
.sokeresultater {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
  border-top: 1px solid var(--dsop-border);
}
.sokeresultat { padding: var(--dsop-space-md) 0; border-bottom: 1px solid var(--dsop-border); }
.sokeresultat__type {
  margin: 0 0 0.375rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.sokeresultat__tittel {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.sokeresultat__tittel a { color: var(--dsop-ink); text-decoration: none; }
.sokeresultat__tittel a:hover { color: var(--dsop-primary); text-decoration: underline; text-decoration-color: var(--dsop-cyan); }
.sokeresultat__utdrag { margin: 0; max-width: 68ch; color: var(--dsop-muted); }

.sokeside .pagination { margin-top: var(--dsop-space-xl); }
.sokeside .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dsop-space-xs); }
.sokeside .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  font-weight: 600;
  color: var(--dsop-ink);
  text-decoration: none;
}
.sokeside a.page-numbers:hover { border-color: var(--dsop-primary); color: var(--dsop-primary); }
.sokeside .page-numbers.current { background: var(--dsop-ink); border-color: var(--dsop-ink); color: #fff; }
.sokeside .page-numbers.dots { border-color: transparent; }

.sok-tom { max-width: 48rem; margin-bottom: var(--dsop-space-2xl); }
.sok-tom__tittel { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -0.4px; margin-bottom: var(--dsop-space-sm); }
.sok-tom__liste { margin: 0; padding-left: 1.375rem; }
.sok-tom__liste li { margin-bottom: 0.375rem; }
.sok-tom__liste li::marker { color: var(--dsop-teal-accessible); }

/* ---- Erklæringer (personvern, cookies, tilgjengelighet) ---- */
.erklaering__dato {
  margin: var(--dsop-space-sm) 0 0;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.8125rem;
  color: var(--dsop-muted);
}
.erklaering__kropp.section { padding-top: var(--dsop-space-2xl); }
.erklaering__rutenett--toc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 40rem);
  gap: var(--dsop-space-2xl);
  align-items: start;
}
.erklaering__toc {
  position: sticky;
  top: calc(var(--dsop-header-h) + var(--dsop-space-lg));
  max-height: calc(100vh - var(--dsop-header-h) - 2 * var(--dsop-space-lg));
  overflow: auto;
}
.erklaering__toc-tittel {
  margin: 0 0 0.75rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
}
.erklaering__toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--dsop-border); }
.erklaering__toc a {
  display: block;
  margin-left: -2px;
  padding: 0.375rem 0 0.375rem 1rem;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--dsop-muted);
  text-decoration: none;
}
.erklaering__toc a:hover { color: var(--dsop-primary); border-left-color: var(--dsop-primary); }

/* rem, ikke ch: Plus Jakarta Sans har brede sifre, så 68ch ble 830px og
   rundt 100 tegn per linje. 40rem gir ca. 70. */
.erklaering__innhold { max-width: 40rem; line-height: 1.7; }
.erklaering__innhold > :first-child { margin-top: 0; }
.erklaering__innhold p { margin: 0 0 1.1em; }
.erklaering__innhold h2 {
  margin: var(--dsop-space-xl) 0 var(--dsop-space-sm);
  padding-top: var(--dsop-space-lg);
  border-top: 1px solid var(--dsop-border);
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.4px;
}
.erklaering__innhold :is(h2, h3) { scroll-margin-top: calc(var(--dsop-header-h) + var(--dsop-space-md)); }
.erklaering__innhold h3 { margin: var(--dsop-space-lg) 0 var(--dsop-space-xs); font-size: var(--dsop-font-h4); }
.erklaering__innhold :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.375rem; }
.erklaering__innhold li { margin-bottom: 0.5em; padding-left: 0.25rem; }
.erklaering__innhold li::marker { color: var(--dsop-teal-accessible); }
.erklaering__innhold code {
  padding: 0.1em 0.35em;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.875em;
  background: var(--dsop-mist-pale);
  border-radius: 4px;
}
.erklaering__innhold figure.wp-block-table { margin: 0 0 1.5em; overflow-x: auto; }
.erklaering__innhold table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.erklaering__innhold :is(th, td) {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--dsop-border);
}
.erklaering__innhold thead th { background: var(--dsop-mist-pale); font-weight: 700; }

@media (max-width: 1024px) {
  .erklaering__rutenett--toc { grid-template-columns: minmax(0, 1fr); gap: var(--dsop-space-lg); }
  .erklaering__toc {
    position: static;
    max-height: none;
    overflow: visible;
    max-width: 40rem;
    padding: var(--dsop-space-md);
    background: var(--dsop-mist-pale);
    border-radius: var(--dsop-rounded-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snarveier__lenke:hover { transform: none; }
  .snarveier__lenke:hover .snarveier__navn::after { transform: none; }
}