/* ==========================================================================
   Orvello · orvello.no · redesign/plexus-live

   Plexus, levende: lys grunnflate med spesifikasjonsspraak (mono-etiketter,
   loepenumre, hairlines, spesifikasjonsbaand), store typografiske sprang, og
   fire moerke taktslag i full bredde: hero, kilen, tryggheten og kontakten.
   Heroen baerer Plexus-instrumentet, en ny teknisk tegning som kjoerer paa
   navy og svarer paa leseren; flytscenen staar i et navy hus i plattformen
   som arkitekturkart. Ingen fotografi. Paletten, fontene og all synlig
   tekst er uendret. Flytscenen og modulkortenes markup staar som foer;
   fs-klassene, keyframes-blokka og reduced-motion-stoppet for scenen er
   kopiert ordrett og skal bestaa saa lenge scenen bruker dem.

   Formregel (en radiusskala, en betydning per verdi):
     12px  kort, husflaten rundt kartet og dialogen
     pill  alt som kan klikkes som knapp
     4px   chips, fokusring og smaa markoerer
     50%   punkter og noder
   Flatene selv (seksjonene) har ingen radius: de gaar fra kant til kant.
   ========================================================================== */

/* --- Fonter (lokalt) --- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Mono lastes kun i vekt 500; vekt 400-filen ligger i fonts/ men hentes
   ikke (14 708 byte spart paa foerstelast, se runden 24.8). */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Metrikk-justerte fallbacks: byttet fra systemfont til Archivo/Plex
   flytter da nesten ingenting. Tallene er Archivos og Plex Sans sine
   vertikale metrikker mot Arial; size-adjust er maalt bredde. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 103%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Plex Sans Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* --- Tokens --- */

/* Paletten er uendret (--paper staar definert, men er ubrukt etter at
   trygghetsflaten ble navy). --header-h er ankerhoyde for det faste
   toppfeltet, --dur-in/--dur-out gir asymmetriske tilstandsoverganger
   (raskt inn, rolig ut), --surface-dark er de gjennomskinnelige kortene paa
   navy, og --hairline er strekbredden for alle hairlines: 1px, 0.5px paa
   1,5x og 2x skjermer der 1px ellers blir to graa piksler. */
:root {
  --navy: #052f4e;
  --deep: #03233c;
  --core: #0b3d5f;
  --teal: #3fbf7f;
  --teal-ink: #17694a;
  --off: #f9f9f7;
  --paper: #f3f4f4;
  --card: #ffffff;
  --mist: #adc0cf;
  --text: #1d3d57;
  --text-soft: #46647c;
  --line-light: rgba(5, 47, 78, 0.14);
  --line-light-strong: rgba(5, 47, 78, 0.3);
  --line-dark: rgba(249, 249, 247, 0.14);
  --line-dark-strong: rgba(249, 249, 247, 0.34);
  --tint-teal: rgba(23, 105, 74, 0.08);
  --surface-dark: rgba(249, 249, 247, 0.05);
  --radius: 4px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --hairline: 1px;
  --pad-section: clamp(96px, 6.5vw + 24px, 200px);
  --sh2: 0 6px 18px rgba(3, 35, 60, 0.1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-in: 0.14s;
  --dur-out: 0.26s;
  --header-h: 72px;
  --gutter: max(24px, 1.4vw);
  --wrap-max: clamp(1280px, 60.89vw + 500.6px, 3600px);
  --sans: 'IBM Plex Sans', 'Plex Sans Fallback', -apple-system, 'Segoe UI', Arial, sans-serif;
  --disp: 'Archivo', 'Archivo Fallback', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}
@media (min-resolution: 1.5dppx) {
  :root { --hairline: 0.5px; }
}

/* --- Basis --- */

*, *::before, *::after { box-sizing: border-box; }

/* Kanvasen er lys i begge ender, saa korte sider (404, personvern) maler
   riktig flate under footeren. scroll-padding-top kompenserer for det
   faste toppfeltet fra 880px; under det er headeren statisk og verdien er
   bare pusterom. Ikke sett overflow paa html: det dreper sticky. */
html {
  background: var(--off);
  scroll-padding-top: 24px;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 880px) {
  html { scroll-padding-top: calc(var(--header-h) + 24px); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --u er sidens grunnstoerrelse og eneste typografiske akse, uendret:
   17px under 1024px, clamp fra 18 til 23 over. */
:root { --u: 17px; }
@media (min-width: 1024px) {
  :root { --u: clamp(18px, 0.136vw + 16.096px, 23px); }
}

body {
  margin: 0;
  background: var(--off);
  color: var(--text);
  font: 400 var(--u)/1.6 var(--sans);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 0.18em; }

h1, h2 {
  font-family: var(--disp);
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
}
/* Seksjonstitlene: store paastander paa store flater. Spranget fra
   broedtekst til H2 er sidens hovedvirkemiddel: ved 1440 er broedteksten
   18,6px og H2 59px. */
h2 { font-weight: 640; font-size: clamp(2.25rem, 1rem + 3vw, 4.5rem); line-height: 1.04; }
h3 { font: 600 1.11rem/1.4 var(--sans); color: var(--navy); }

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

/* Fokus: teal-ink paa lyse flater (6,31:1 mot --off), lys teal paa de
   moerke (5,89:1 mot --navy og 6,85:1 mot --deep). */
:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.dark :focus-visible,
.flow-visual :focus-visible { outline-color: var(--teal); }

::selection { background: var(--navy); color: var(--off); }
.dark ::selection,
.flow-visual ::selection { background: var(--off); color: var(--navy); }

/* Moerke flater: navy som grunn, deep for kilen og kontakten. Fargene paa
   overskrift, eyebrow og broedtekst foelger med. Kontrast: --off paa --navy
   13,1:1 og paa --deep 15,2:1; --mist 7,35:1 og 8,55:1. */
.dark { background: var(--navy); color: var(--off); }
.dark.deep { background: var(--deep); }
.dark h2, .dark h3 { color: var(--off); }
.dark .sec-lead { color: var(--mist); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hopp-lenken er et pekemaal og holder 44 px hoyde via min-height. */
.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--navy);
  color: var(--off);
  font: 600 15px/1 var(--sans);
  padding: 12px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--sh2);
  transition: top var(--dur-out) var(--ease);
}
.skip-link:focus { top: 16px; }

/* Containeren: 1280px ved 1280px viewport, lineaer vekst til taket 3600px
   ved 5090px, der --u selv toppes ut. Uttrykket er verifisert i main og
   gjenbrukes uendret. Flatene gaar fra kant til kant; det er wrap som
   holder tekstspalten. */
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Eyebrow --- */

/* Mono-etikett i versaler med en 24px strek foran: aksenten ligger i
   streken, ikke i bokstavene. Seksjonsnumrene med hairline over hele
   linja ble tatt ut 2026-09-14 paa Kristian Tunglands beskjed. --text-soft
   paa --off 5,90:1; --mist paa --navy 7,35:1; streken --teal-ink paa lyst
   (6,31:1), --teal paa moerkt. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--teal-ink);
}
.dark .eyebrow { color: var(--mist); }
.dark .eyebrow::before { background: var(--teal); }

/* --- Seksjoner og seksjonshoder --- */

/* Seksjonene skilles av rom, ikke av linjer. 112px ved 1280, 124 ved
   1440, 155 ved 1920, tak 200. */
.section { padding-block: var(--pad-section); }

.sec-head { margin-bottom: clamp(40px, 3.5vw, 88px); }
.sec-head h2 { max-width: 18ch; }

.sec-lead {
  margin-top: 24px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 52ch;
  text-wrap: pretty;
}

/* Delt seksjon: hodet i venstre spalte, innholdet i hoeyre. Hodet er
   sticky under toppfeltet fra 880px, saa overskriften foelger lista mens
   den leses. Sticky krever at ingen forelder har overflow; .section og
   .wrap har det ikke. */
@media (min-width: 880px) {
  .sec-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px clamp(48px, 6vw, 128px);
    align-items: start;
  }
  .sec-split > .sec-head {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

/* --- Knapper og mono-lenker --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.01em;
  padding: 18px 32px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-out) var(--ease), background-color var(--dur-out) var(--ease),
              border-color var(--dur-out) var(--ease), box-shadow var(--dur-out) var(--ease);
}
.btn:hover { transition-duration: var(--dur-in); }
.btn:active { transform: translateY(1px) scale(0.99); transition-duration: 0.08s; }

/* Teal-knappen baerer moerk tekst: --deep paa --teal maaler 6,85:1. */
.btn-teal {
  background: var(--teal);
  color: var(--deep);
  box-shadow: 0 1px 2px rgba(3, 35, 60, 0.2);
}
.btn-teal:hover { background: #37ad72; box-shadow: 0 4px 14px rgba(3, 35, 60, 0.22); }
.btn-teal:active { box-shadow: 0 1px 1px rgba(3, 35, 60, 0.12); }

/* Retningspilen paa primaerhandlingen er tegnet av to kanter og en
   rotasjon, aldri satt som tegn. Paa hover glir den 2px mot hoeyre. */
.btn-teal:not(.btn-sm)::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-out) var(--ease);
}
.btn-teal:not(.btn-sm):hover::after { transform: translateX(2px) rotate(45deg); transition-duration: var(--dur-in); }

.btn-sm { padding: 12px 20px; font-size: 14px; min-height: 44px; }

/* Spoekelsesknappen paa moerk flate: gjennomsiktig med lys ramme
   (rgba(249,249,247,0.55) paa navy 4,7:1) og lys tekst (13,1:1). */
.btn-ghost {
  background: transparent;
  color: var(--off);
  border-color: rgba(249, 249, 247, 0.55);
}
.btn-ghost:hover { border-color: var(--off); background: var(--surface-dark); }

/* Handlingslenker i versal mono. Understreken staar alltid; pekemaalet
   holdes av min-height 44. --navy paa --off 13,1:1; lys variant --off paa
   --deep 15,2:1. */
.link-mono {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line-light-strong);
  transition: border-color var(--dur-out) var(--ease), gap var(--dur-out) var(--ease);
}
.link-mono::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.link-mono:hover { border-bottom-color: var(--teal-ink); gap: 14px; transition-duration: var(--dur-in); }
.link-mono-light {
  color: var(--off);
  border-bottom-color: var(--line-dark-strong);
}
.link-mono-light:hover { border-bottom-color: var(--teal); }

/* --- Header --- */

/* Toppfeltet er statisk under 880px (to rader, se under) og fast fra
   880px. I ro er det den lyse flaten selv; naar siden er rullet setter
   app.js .is-scrolled, og feltet blir frostet glass med en hairline
   under. backdrop-filter brukes kun her, med hensikt: det er den eneste
   flaten som ligger over annet innhold. Uten JS staar feltet fast og lyst
   uten frost; det er komplett. Ingen forelder til headeren har overflow,
   transform, filter eller contain: paint. */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--off);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-out) var(--ease), border-color var(--dur-out) var(--ease);
}
@media (min-width: 880px) {
  .site-header { position: sticky; top: 0; }
  .site-header.is-scrolled {
    background: rgba(249, 249, 247, 0.8);
    border-bottom-color: var(--line-light);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header.is-scrolled {
      background: rgba(249, 249, 247, 0.72);
      -webkit-backdrop-filter: saturate(1.6) blur(18px);
      backdrop-filter: saturate(1.6) blur(18px);
    }
  }
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
  padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; border-radius: var(--radius); }
.brand img { height: 34px; width: auto; }
@media (min-width: 880px) {
  .brand img { height: 38px; }
}

.site-nav { display: flex; gap: clamp(20px, 1.8vw, 36px); margin-left: auto; }
.site-nav a {
  position: relative;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 10px 2px;
}
/* Understreken er en egen flate som vokser fra venstre: rolig inn,
   raskere ut. Naavaerende seksjon (aria-current, satt av app.js) holder
   streken staaende i teal-ink. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 4px;
  height: 1px;
  background: var(--teal-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-out) var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); transition-duration: var(--dur-in); }
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }

.header-cta { margin-left: auto; }
/* Knappen staar to steder i markup, en for hvert baand, og bare den ene er
   rendret om gangen: rendret rekkefoelge er lik DOM-rekkefoelge paa alle
   bredder. Begrunnelsen staar ved elementene i index.html. */
.header-cta-smal { display: none; }
@media (min-width: 880px) {
  .site-nav + .header-cta { margin-left: 0; }
}

/* Under 880px har headeren to rader: logo og knapp paa den foerste,
   seksjonslenkene paa den andre. Lenkene staar i markup og er synlige
   uten hamburger og uten skript. */
@media (max-width: 879px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 52px auto;
    grid-template-areas:
      "brand cta"
      "nav   nav";
    align-items: center;
    justify-content: space-between;
    gap: 0 16px;
  }
  .brand { grid-area: brand; }
  .header-cta { grid-area: cta; margin-left: 0; justify-self: end; }
  .header-cta-smal { display: inline-flex; }
  .header-cta-bred { display: none; }
  .site-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin-left: 0;
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .site-nav a::after { left: 0; right: 0; bottom: 8px; }
}

@media (max-width: 383px) {
  .btn-sm {
    padding: 8px 12px;
    letter-spacing: 0;
  }
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }
}

/* --- Hero --- */

/* Navy hero i full bredde med Plexus levende bak teksten, ferdig tegnet
   ved foerste maling: ingen avsloering og ingen ordsplitt. H1 alene i
   toppen, brutt i tre kontrollerte linjer med trappinnrykk fra 640px. Grad:
   clamp(2.5rem, 6.4vw + 0.2rem, 7rem) gir 52px ved 768, 85 ved 1280, 95
   ved 1440 og taket 112 fra 1700. Bredeste linje er "Datakontroll og AI"
   (18 tegn); med maalt faktor 0,55 px per px grad per tegn er linjen ca
   1109px ved taket, mot ca 1450px innhold der taket naas.

   Hoeyden er ikke 100vh (nattoppdraget 4.11): clamp(560px, 84svh, 920px),
   saa neste seksjon skimtes under paa vanlige skjermer. Canvasen
   (.hero-live) fyller flaten absolutt bak innholdet; app.js tegner
   organismen med sentrum til hoeyre fra 880px og lavt i midten under, saa
   H1 leses over de tynneste fibrene. Fibrene er --off paa lav alfa og
   endrer ikke kontrasten paa teksten maalbart (verste kompositt bak et
   tegn er under 0,4 alfa av --off over navy, teksten selv er 13,1:1). */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 84svh, 920px);
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 6vh, 96px) clamp(56px, 7vh, 112px);
}
.hero-live {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-live canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-title {
  font-weight: 640;
  font-size: clamp(2.5rem, 6.4vw + 0.2rem, 7rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: 12em;
  color: var(--off);
}
.hero-title .l { display: inline; }
@media (min-width: 640px) {
  .hero-title .l { display: block; }
  .hero-title .l2 { margin-left: 0.5em; }
  .hero-title .l3 { margin-left: 1em; }
}
@media (max-width: 399px) {
  .hero-title { font-size: 2.25rem; }
}

/* Handlingsraden: to knapper og sidens ene tall som chip. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(28px, 3vw, 48px);
}
.hero-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--mist);
  margin-left: 8px;
}
.hero-chip::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
@media (max-width: 479px) {
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { justify-self: start; }
  .hero-chip { margin-left: 0; }
}

/* --- Spesifikasjonsbaandet --- */

/* Ingressen og de fire forpliktelsene i mono med tabellsifre: 2 maaneder,
   4 timer, 30 dager, 1 abonnement. Alle fire tallene staar allerede i
   broedtekst og FAQ; samlet i mono leser de som spesifikasjon, ikke
   forbehold. Ordlyden er fastsatt i docs/nattoppdrag-nettside.md 5.6.
   Baandet ligger rett under heroen med hairline over og under; ingressen
   til venstre og de fire feltene to og to til hoeyre fra 880, alt stablet
   under. Kontrast: --navy paa --off 13,1:1, --text-soft 5,90:1. */
.spec-band { padding-block: clamp(40px, 4vw, 72px); }
.spec-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(32px, 3vw, 56px) 0;
  border-top: var(--hairline) solid var(--line-light-strong);
}
@media (min-width: 880px) {
  .spec-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px clamp(48px, 6vw, 128px);
    align-items: start;
  }
}
.spec-lead {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--navy);
  max-width: 26ch;
  text-wrap: pretty;
}
.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 2.5vw, 48px);
}
.spec-item {
  border-top: var(--hairline) solid var(--line-light-strong);
  padding-block: 18px 22px;
}
.spec-n {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.375rem, 0.6vw + 1.1rem, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  white-space: nowrap;
}
.spec-l {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
@media (max-width: 479px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
}

/* --- Fotoflatene --- */

/* Naturfoto kant til kant, uten ramme og uten curtain. Flaten er rundt
   seksti prosent av viewporten hoey; bildet ligger absolutt med cover, saa
   width/height-attributtene styrer aldri layout og flaten gir ingen CLS.
   En svak navy-tone (alfa 0,3) legges over alle fotoene saa de sitter i
   paletten. Kantene mykes med en maske: .photo-fade tones inn fra og ut
   til grunnen bak i topp og bunn; .photo-into-deep tones inn i toppen og
   gaar over i --deep i bunnen, saa kontaktflaten under henger sammen med
   fotoet. Masken bruker grunnen bak, derfor ingen egen bakgrunnsfarge paa
   flaten. */
.photo {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 62svh, 760px);
}
.photo > picture,
.photo-quote > picture {
  position: absolute;
  inset: 0;
}
.photo > picture > img,
.photo-quote > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo::after,
.photo-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 47, 78, 0.3);
  pointer-events: none;
}
.photo-fade {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.photo-into-deep {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.photo-into-deep::after {
  background: linear-gradient(180deg, rgba(3, 35, 60, 0.3) 0, rgba(3, 35, 60, 0.3) 45%, rgba(3, 35, 60, 1) 100%);
}

/* --- Kilen --- */

/* Sitatet over blaatime-fotoet, kant til kant, med rikeligere luft enn de
   andre seksjonene (1,4x), saa det leses som et taktslag og ikke en
   seksjon. Fotoet ligger absolutt bak; en jevn deep-tone (alfa 0,35) over
   hele flaten, og gradienten bak tekstboksen er bundet til boksen med
   faste pikselstopp: alfa 0,62 bak hele boksen uansett vindushoeyde og
   linjetall. Beregnet garanti, fotouavhengig: selv en ren hvit fotopiksel
   bak 0,62 gir kompositt rgb(99,119,134), 4,41:1 mot --off. 50vw-leddene
   strekker gradienten til flatekantene; overskuddet klippes. */
.quote {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--pad-section) * 1.4);
}
.photo-quote::after { background: rgba(3, 35, 60, 0.35); }
.quote-inner { position: relative; z-index: 1; }
.quote-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: calc(-1 * var(--pad-section) * 1.4);
  height: calc(100% + var(--pad-section) * 1.4 + 200px);
  background: linear-gradient(180deg,
    rgba(3, 35, 60, 0) 0,
    rgba(3, 35, 60, 0.3) 104px,
    rgba(3, 35, 60, 0.56) 176px,
    rgba(3, 35, 60, 0.62) 200px,
    rgba(3, 35, 60, 0.62) 100%);
  pointer-events: none;
}
.quote blockquote p {
  font-family: var(--disp);
  font-weight: 640;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--off);
  text-indent: -0.38em;
  max-width: 24ch;
  text-wrap: balance;
}

/* --- Blokkene paa lyse flater --- */

/* Innholdsstykkene er hairline-blokker, ikke bokser: en strek over, luft
   rundt. Ingenting i dem er klikkbart, saa de har ingen hover. */
.card {
  border-top: var(--hairline) solid var(--line-light-strong);
  padding-top: clamp(24px, 1vw + 12px, 36px);
}
.card p { color: var(--text-soft); font-size: 0.96em; margin-top: 10px; text-wrap: pretty; }

.card-index {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
  margin-bottom: 20px;
}

.card-icon {
  width: 24px; height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--navy);
  margin-bottom: 20px;
}

/* Blokktitlene i displayfamilien: redaksjon, ikke grensesnitt. */
.sit-list h3,
.trust-grid h3,
.steps-list h3,
.mod-grid h3 {
  font-family: var(--disp);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.14;
  font-size: clamp(1.25rem, 0.45vw + 1.1rem, 1.75rem);
}

/* Hairline-radene (situasjonene og kjoepsmodellen): loepenummer i mono,
   tittel og tekst, skilt av hairlines, uten kortramme. Fra 640px tre
   spalter: nummer, tittel, tekst; under det stables tittel og tekst til
   hoeyre for nummeret. Siste rad faar en strek under, saa lista lukkes.
   Situasjonene faar nummeret fra en teller (ikke i DOM); kjoepsmodellen
   har sitt nummer i markup (card-index) fordi det staar med chipen. */
.sit-list { counter-reset: sit; }
.sit-row,
.step-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 8px 16px;
  padding-block: clamp(24px, 1.2vw + 12px, 36px);
  border-top: var(--hairline) solid var(--line-light-strong);
}
.sit-row:last-child,
.step-row:last-child { border-bottom: var(--hairline) solid var(--line-light-strong); }
.sit-row { counter-increment: sit; }
.sit-row::before {
  content: counter(sit, decimal-leading-zero) / "";
  grid-row: 1 / span 2;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
  padding-top: 0.45em;
}
.sit-row h3, .step-row h3 { grid-column: 2; grid-row: 1; }
.sit-row p, .step-row p { grid-column: 2; grid-row: 2; margin-top: 0; color: var(--text-soft); text-wrap: pretty; }
/* Steghodet loeses opp (display: contents) paa alle bredder, saa nummeret
   alltid staar i nummerspalten med samme bredde som de andre radene, og
   chipen «eneste binding» staar under tittelen i tittelspalten (under 640
   under teksten) i stedet for aa presse seg inn i nummerspalten. */
.step-row .step-head { display: contents; }
.step-row .card-index { grid-column: 1; grid-row: 1; margin: 0; padding-top: 0.45em; }
.step-row .chip-binding { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; }
@media (min-width: 640px) {
  .step-row .chip-binding { grid-row: 2; margin-top: 12px; }
  .sit-row,
  .step-row {
    grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr);
    gap: 8px 32px;
    align-items: start;
  }
  .sit-row::before { grid-row: 1; }
  .sit-row h3, .step-row h3 { grid-column: 2; grid-row: 1; }
  /* Teksten spenner over to rader, saa chipen under tittelen (rad 2) legger
     seg rett under tittelen og ikke under hele tekstblokken. */
  .sit-row p, .step-row p { grid-column: 3; grid-row: 1 / span 2; padding-top: 0.2em; }
}


/* Handlingsblokk etter en seksjon: hairline over, mikrotekst til venstre
   og knappen til hoeyre. Paa moerk flate byttes streken og fargen. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(56px, 5vw, 96px);
  padding-top: clamp(24px, 2vw, 40px);
  border-top: var(--hairline) solid var(--line-light-strong);
}
.cta-micro {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cta-micro::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-ink);
}
.dark .cta-row { border-top-color: var(--line-dark-strong); }
.dark .cta-micro { color: var(--mist); }
.dark .cta-micro::before { background: var(--teal); }

/* Tryggheten: navy flate, to og to gjennomskinnelige kort (samme form som
   modulkortene hadde paa navy). Trygghetslinja under overskriften er to
   mono-rader med teal-punkt. Tittel --off 13,1:1, tekst --mist 7,35:1,
   ikon --teal 5,89:1 (markoer). */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 28px;
}
.trust-line li {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist);
}
.trust-line li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1vw, 20px);
}
.trust-grid > .card {
  border-top: 0;
  background: var(--surface-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-card);
  padding: clamp(24px, 1.4vw + 12px, 40px);
}
.trust-grid h3 { color: var(--off); }
.trust-grid .card p { color: var(--mist); }
.trust-grid .card-icon { color: var(--teal); }
@media (max-width: 639px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Plattformen: kartet i navy hus --- */

/* DOD-krav: flat #052f4e bak flytscenen, ingen tekstur, ingen gradient og
   aldri foto. Scenens egne kontrastkommentarer er maalt mot ren navy og
   gjelder derfor uendret i huset. Huset er sidens ene innrammede navy
   flate: radius 12 og polstring clamp(24px, 3vw, 64px). */
.flow-visual {
  background: var(--navy);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 64px);
  margin-block: 0 clamp(48px, 5vw, 104px);
}

/* Scenen fyller husets innholdsbredde opp til taket. Desktopscenen vises
   fra 800px og rendres aldri under 1:1: innholdsbredden er viewport minus
   2 * gutter (24) minus 2 * huspolstring (24), altsaa 704px ved 800 mot
   designbredden 696 (1,011:1). Taket calc(var(--u) * 55) er main sin
   regel: 696 delt paa scenens 12.5px broedtekst gir 55,7. Mobilscenen har
   faktor 28. Under 640 gaar huset til viewportkanten uten radius, med
   12px polstring: 390 - 24 = 366 mot mobilscenens 360, saa den staar
   over 1:1 ogsaa der. Dette er sidens eneste element som bryter ut av
   wrap. */
.flow-visual svg { width: 100%; max-width: calc(var(--u) * 55); height: auto; margin-inline: auto; }
.flow-visual svg.flow-mobile { max-width: calc(var(--u) * 28); }
@media (max-width: 639px) {
  .flow-visual {
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
    padding: 24px 12px;
  }
}

.flow-desktop { display: none; }
.flow-mobile { display: block; }
@media (min-width: 800px) {
  .flow-desktop { display: block; }
  .flow-mobile { display: none; }
}
.flow-desktop { overflow: visible; }

/* Modulkortene paa den lyse flaten under huset: hvite kort med hairline,
   ikon i --navy (13,1:1), tittel --navy, tekst --text-soft (6,22:1 mot
   --card). Fra 1200: tre kort oppe paa to spalter hver, to kort nede paa
   tre spalter hver, saa ingen rad staar med et foreldreloest kort. */
.mod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1vw, 20px);
}
.mod-grid > .card {
  border-top: 0;
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-card);
  padding: clamp(24px, 1.4vw + 12px, 40px);
}
@media (min-width: 640px) {
  .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-grid > .card:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .mod-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mod-grid > .card { grid-column: span 2; }
  .mod-grid > .card:nth-child(4) { grid-column: 1 / span 3; }
  .mod-grid > .card:nth-child(5) { grid-column: 4 / span 3; }
}

.mod-note {
  margin-top: clamp(40px, 3vw, 72px);
  padding-top: clamp(24px, 1vw + 12px, 36px);
  border-top: var(--hairline) solid var(--line-light-strong);
  color: var(--text-soft);
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 56ch;
  text-wrap: pretty;
}

/* --- Driftsvignetten --- */

/* Tre steg paa en skinne: fra 768px tre spalter med en sjevron tegnet av
   to kanter i mellomrommet mellom spaltene (aldri et tegn), under det
   stablet med sjevronen pekende ned. Hairline over hvert steg. */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 72px);
}
.ops-step {
  position: relative;
  border-top: var(--hairline) solid var(--line-light-strong);
  padding-top: clamp(24px, 1vw + 12px, 36px);
}
.ops-step .card-index { margin-bottom: 16px; }
.ops-step p {
  color: var(--text);
  margin-top: 14px;
  max-width: 30ch;
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.ops-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(clamp(24px, 1vw + 12px, 36px) + 8px);
  right: calc(-1 * clamp(32px, 3vw, 72px) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--teal-ink);
  border-right: 1.5px solid var(--teal-ink);
  transform: rotate(45deg);
}
.ops-note {
  margin-top: clamp(40px, 3vw, 72px);
  padding-top: clamp(24px, 1vw + 12px, 36px);
  border-top: var(--hairline) solid var(--line-light-strong);
  color: var(--text-soft);
  max-width: 56ch;
}
@media (max-width: 767px) {
  .ops-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ops-step:not(:last-child)::after {
    top: auto;
    bottom: -22px;
    right: auto;
    left: 0;
    transform: rotate(135deg);
  }
}

/* --- Kjoepsmodellen --- */
/* "eneste binding" som stempel: --teal-ink paa tonen maaler 5,64:1. */
.chip-binding {
  flex: none;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: var(--tint-teal);
  border: 1px solid rgba(23, 105, 74, 0.35);
  border-radius: var(--radius);
  padding: 6px 10px;
}

/* Loeftesitatet som stort utsagn alene paa flaten, med sitt eget rom foer
   og etter. */
.pledge {
  margin-top: clamp(96px, 8vw, 200px);
  margin-bottom: clamp(24px, 2vw, 48px);
  text-align: center;
}
.pledge + .cta-row { margin-top: clamp(64px, 6vw, 120px); }
.pledge blockquote p {
  font-family: var(--disp);
  font-weight: 640;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.75rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--navy);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* --- Teamet --- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 40px);
}
@media (max-width: 639px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* Teamkortene baerer et bilde og faar kortradius. */
.card.team-card {
  padding: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-light);
  border-top: 1px solid var(--line-light);
  border-radius: var(--radius-card);
}
.team-media {
  background: var(--deep);
  border-bottom: 1px solid var(--line-light);
}
/* Portrettfilene er 3:4, samme forhold som rammen, og fyller den med lik luft
   over hodet i begge; derfor staar utsnittet sentrert og loeftes ikke. cover
   staar igjen fordi 640-varianten er 640x853 og dermed en broekdel fra 3:4. */
.team-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
}
.team-card .team-text { padding: clamp(20px, 1.2vw + 8px, 32px); }
.team-card .team-text p { margin: 0; color: var(--text-soft); font-size: 0.96em; text-wrap: pretty; }
.team-card .team-text strong { color: var(--navy); font-weight: 600; }

/* --- Spoersmaalene --- */

/* Aapen dl i hoeyre spalte av den delte seksjonen: alle svar staar
   synlige, ingen trekkspill. */
.faq-list > div {
  border-top: var(--hairline) solid var(--line-light-strong);
  padding-block: clamp(24px, 1.2vw + 12px, 40px);
}
.faq-list > div:last-child { border-bottom: var(--hairline) solid var(--line-light-strong); }
.faq-list dt {
  font-family: var(--disp);
  font-weight: 640;
  font-size: clamp(1.125rem, 0.35vw + 1rem, 1.4375rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.faq-list dd { margin-top: 12px; color: var(--text-soft); max-width: 60ch; text-wrap: pretty; }

/* --- Kontakt --- */

/* Dyp flate i full bredde: sidens sentrerte sluttpunkt. Overskrift,
   ingress, handlinger og kontaktopplysninger staar midtstilt i en spalte
   paa 60ch. Kontrast: --off paa --deep 15,2:1, --mist paa --deep 8,55:1,
   teal-punktet 6,85:1. */
.contact h2 { max-width: 16ch; margin-inline: auto; }
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  max-width: 60ch;
  text-align: center;
}
.contact-inner .sec-head { margin-bottom: 0; }
.contact-inner .eyebrow { justify-content: center; }
.contact-lead {
  margin-top: 24px;
  margin-inline: auto;
  color: var(--mist);
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  line-height: 1.5;
  max-width: 40ch;
  text-wrap: pretty;
}
.contact .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
.contact-micro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.contact-micro::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.contact-meta {
  margin-top: clamp(40px, 3vw, 64px);
  padding-top: 24px;
  border-top: var(--hairline) solid var(--line-dark);
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* --- Ring oss-boksen --- */

/* Aapnes av app.js kun paa presise pekere; ellers virker tel:-lenkene som
   foer. Inntreden er tegnet med @starting-style der det finnes; uten det
   staar boksen bare der. */
.phone-dialog {
  border: 0;
  border-radius: var(--radius-card);
  padding: 0;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(3, 35, 60, 0.35);
  max-width: min(420px, calc(100vw - 48px));
}
.phone-dialog::backdrop { background: rgba(3, 35, 60, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .phone-dialog[open] {
    transition: opacity var(--dur-out) var(--ease), transform var(--dur-out) var(--ease);
  }
  @starting-style {
    .phone-dialog[open] { opacity: 0; transform: translateY(8px) scale(0.98); }
  }
}
.phone-dialog-inner {
  position: relative;
  padding: 48px 56px 56px;
  text-align: center;
}
.phone-dialog h2 {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.phone-dialog-number {
  margin-top: 16px;
  font-family: var(--disp);
  font-weight: 640;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  white-space: nowrap;
}
.phone-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--dur-out) var(--ease), background-color var(--dur-out) var(--ease);
}
.phone-dialog-close:hover { color: var(--navy); background: rgba(5, 47, 78, 0.06); transition-duration: var(--dur-in); }
.phone-dialog-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* --- Footer --- */

/* Lys footer i to felt: merke og metadata til venstre, seksjonslenker og
   personvern til hoeyre. Kontrast: --navy paa --off 13,1:1, --text-soft
   5,90:1. */
.site-footer {
  padding-block: clamp(56px, 5vw, 104px) clamp(32px, 3vw, 56px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1px solid var(--line-light);
}
/* Hairlinen ligger paa gitteret inne i wrap, ikke paa wrap selv, saa den
   slutter der tekstspalten slutter. */
@media (min-width: 880px) {
  .footer-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px clamp(48px, 6vw, 128px);
  }
}
.footer-brand img { height: 40px; width: auto; margin-bottom: 28px; }
.footer-meta {
  font: 500 12px/1.9 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.footer-meta a { color: var(--text-soft); text-decoration: none; transition: color var(--dur-out) var(--ease); }
.footer-meta a:hover { color: var(--navy); transition-duration: var(--dur-in); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
}
.footer-nav a,
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-out) var(--ease);
}
.footer-nav a:hover,
.footer-link:hover { border-bottom-color: var(--teal-ink); transition-duration: var(--dur-in); }
.footer-link {
  margin-top: 24px;
  font-size: 12px;
  border-bottom-color: var(--line-light-strong);
}
@media (min-width: 880px) {
  .footer-side { display: flex; flex-direction: column; align-items: flex-start; }
}

/* --- Undersider --- */

.page-head { padding-block: clamp(64px, 8vh, 128px) clamp(24px, 3vw, 56px); }
.page-head h1 { font-weight: 640; font-size: clamp(2.25rem, 4.5vw, 4.5rem); line-height: 1.05; }
.page-head p { margin-top: 20px; color: var(--text-soft); max-width: 56ch; }
.error-head .btn { margin-top: 36px; }

/* Prosaen holder wrappens venstrekant, som page-head over den; bredden
   settes paa elementene, ikke paa wrap, saa spalten ikke sentreres. */
.prose h2 {
  max-width: 720px;
  font-family: var(--disp);
  font-weight: 640;
  font-size: clamp(1.25rem, 0.4vw + 1.1rem, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light-strong);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 14px; color: var(--text); max-width: min(720px, 65ch); text-wrap: pretty; }

/* --- Hairlines paa hoy pikseltetthet --- */

/* En 1px strek blir to graa piksler paa 1,5x og 2x; 0.5px rendres som en
   skarp fysisk piksel. Hairlinene bruker --hairline (se tokens); de faa
   som fortsatt har fast 1px staar her. Gjelder ikke knapperammene. */
@media (min-resolution: 1.5dppx) {
  .footer-grid,
  .prose h2 { border-width: 0.5px; }
}

/* --- Scroll-avsloeringer (kun med JS og uten redusert bevegelse) --- */

/* Hele avsloeringssporet ligger inne i no-preference: selv om skriptet
   skulle sette js-reveal, skjules ingenting for en leser som har bedt om
   mindre bevegelse. Uten JS finnes ikke js-reveal, og alt staar tegnet.
   Moensteret opacity: 0 rett i CSS pluss en klasse fra JS er forbudt her;
   se docs/nattoppdrag-nettside.md 4.5. Heroen har ingen avsloeringer: den
   staar ferdig ved foerste maling. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js-reveal .reveal.d2 { transition-delay: 0.1s; }
  .js-reveal .reveal.d3 { transition-delay: 0.2s; }
  .js-reveal .reveal.d4 { transition-delay: 0.3s; }
  .js-reveal .reveal.d5 { transition-delay: 0.4s; }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }

  /* De to store utsagnene faar en egen, langsommere entré. */
  .js-reveal .pledge.reveal,
  .js-reveal .quote .reveal {
    transform: translateY(32px);
    transition-duration: 1.1s;
    transition-delay: 0.1s;
  }

  /* Fotoflatene setter seg: bildet gaar fra 1,05 til 1 og flaten toner inn
     over 1,6 s naar den kommer i syne, en gang. Flaten selv flyttes ikke
     (ingen translateY), bare bildet skaleres, saa masken staar stille. */
  .js-reveal .photo.reveal {
    transform: none;
    transition: opacity 1.2s var(--ease);
  }
  .js-reveal .photo.reveal > picture > img {
    transform: scale(1.05);
    transition: transform 1.6s var(--ease);
  }
  .js-reveal .photo.reveal.is-in > picture > img { transform: none; }
}

/* --- Plexus-scenen vaakner --- */

/* Sidens ene autoriserte oeyeblikk: naar figuren kommer i syne bygges den
   opp i tegnerekkefoelge, altsaa i dataens egen retning fra kildekortet til
   Flow og til slutt stegmerkene, og foerst da starter punktstroemmene som
   ellers gaar fra foerste maling. Ingen koordinat, klasse eller rekkefoelge i
   SVG-ene er roert: reglene under adresserer toppnivaa-elementene med
   nth-child og de eksisterende klassene, og legger opacity, transform og
   animation-play-state oppaa. Alt ligger bak .js-reveal og no-preference,
   saa uten skript og ved redusert bevegelse staar figuren komplett i ro
   fra foerste maling, slik den skal (nattoppdraget 4.5 og 4.6).
   app.js setter .is-live paa .flow-visual naar en femdel av figuren er
   synlig, en gang, og observerer ikke mer. Budsjett: 45 elementer med 38 ms
   trinn pluss 0,55 s overgang gir 2,3 s til stegmerkene staar, og de fem
   ringene faar et enkelt scale-ping etter det. */
@media (prefers-reduced-motion: no-preference) {
  /* Overgangen ligger kun paa is-live-tilstanden: da skjules figuren
     momentant naar js-reveal settes ved last, og bare oppbyggingen er
     animert. Laa overgangen paa grunntilstanden, ville de siste
     elementene fortsatt vaere paa vei ned i 2,3 s etter last, og en rask
     rulling eller en dyplenke til #plattformen ville vist dem halvveis. */
  .js-reveal .flow-visual.is-live .flow-scene > :not(defs) {
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
    transition-delay: calc(var(--k, 0) * 38ms);
  }
  /* !important med hensikt: noen toppnivaa-elementer i figuren baerer
     opacity inline (etiketter paa 0,5 til 0,78), og punktstroemmene baerer
     animation-forkortelsen inline. En vanlig regel taper mot inline; den
     viktige vinner, og naar is-live settes gjelder inline-verdiene igjen
     og overgangen gaar fra 0 til hver enkelt sin egen verdi. */
  .js-reveal .flow-visual:not(.is-live) .flow-scene > :not(defs) {
    opacity: 0 !important;
    transform: translateY(6px);
  }
  .js-reveal .flow-visual:not(.is-live) .flow-scene [data-anim] { animation-play-state: paused !important; }
.flow-scene > :nth-child(2) { --k: 1; }  .flow-scene > :nth-child(3) { --k: 2; }  .flow-scene > :nth-child(4) { --k: 3; }
.flow-scene > :nth-child(5) { --k: 4; }  .flow-scene > :nth-child(6) { --k: 5; }  .flow-scene > :nth-child(7) { --k: 6; }
.flow-scene > :nth-child(8) { --k: 7; }  .flow-scene > :nth-child(9) { --k: 8; }  .flow-scene > :nth-child(10) { --k: 9; }
.flow-scene > :nth-child(11) { --k: 10; }  .flow-scene > :nth-child(12) { --k: 11; }  .flow-scene > :nth-child(13) { --k: 12; }
.flow-scene > :nth-child(14) { --k: 13; }  .flow-scene > :nth-child(15) { --k: 14; }  .flow-scene > :nth-child(16) { --k: 15; }
.flow-scene > :nth-child(17) { --k: 16; }  .flow-scene > :nth-child(18) { --k: 17; }  .flow-scene > :nth-child(19) { --k: 18; }
.flow-scene > :nth-child(20) { --k: 19; }  .flow-scene > :nth-child(21) { --k: 20; }  .flow-scene > :nth-child(22) { --k: 21; }
.flow-scene > :nth-child(23) { --k: 22; }  .flow-scene > :nth-child(24) { --k: 23; }  .flow-scene > :nth-child(25) { --k: 24; }
.flow-scene > :nth-child(26) { --k: 25; }  .flow-scene > :nth-child(27) { --k: 26; }  .flow-scene > :nth-child(28) { --k: 27; }
.flow-scene > :nth-child(29) { --k: 28; }  .flow-scene > :nth-child(30) { --k: 29; }  .flow-scene > :nth-child(31) { --k: 30; }
.flow-scene > :nth-child(32) { --k: 31; }  .flow-scene > :nth-child(33) { --k: 32; }  .flow-scene > :nth-child(34) { --k: 33; }
.flow-scene > :nth-child(35) { --k: 34; }  .flow-scene > :nth-child(36) { --k: 35; }  .flow-scene > :nth-child(37) { --k: 36; }
.flow-scene > :nth-child(38) { --k: 37; }  .flow-scene > :nth-child(39) { --k: 38; }  .flow-scene > :nth-child(40) { --k: 39; }
.flow-scene > :nth-child(41) { --k: 40; }  .flow-scene > :nth-child(42) { --k: 41; }  .flow-scene > :nth-child(43) { --k: 42; }
.flow-scene > :nth-child(44) { --k: 43; }  .flow-scene > :nth-child(45) { --k: 44; }  .flow-scene > :nth-child(46) { --k: 45; }

  /* Stegmerkene: ett ping per ring i rekkefoelge, etter at figuren staar.
     Ringene ligger som soesken i figurens siste gruppe; sirkel 2 er det
     fylte merket for steg 1, sirklene 3 til 6 er ringene for steg 2 til 5. */
  @keyframes step-ping {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.32); }
    100% { transform: scale(1); }
  }
  .js-reveal .flow-visual.is-live .flow-scene > g:last-child > circle {
    transform-box: fill-box;
    transform-origin: center;
  }
  .js-reveal .flow-visual.is-live .flow-scene > g:last-child > circle:nth-of-type(2) { animation: step-ping 0.7s var(--ease) 2.5s both; }
  .js-reveal .flow-visual.is-live .flow-scene > g:last-child > circle:nth-of-type(3) { animation: step-ping 0.7s var(--ease) 2.8s both; }
  .js-reveal .flow-visual.is-live .flow-scene > g:last-child > circle:nth-of-type(4) { animation: step-ping 0.7s var(--ease) 3.1s both; }
  .js-reveal .flow-visual.is-live .flow-scene > g:last-child > circle:nth-of-type(5) { animation: step-ping 0.7s var(--ease) 3.4s both; }
  .js-reveal .flow-visual.is-live .flow-scene > g:last-child > circle:nth-of-type(6) { animation: step-ping 0.7s var(--ease) 3.7s both; }
}

/* --- Hero-scenens presentasjon --- */

/* De presentasjonsstrengene som gjentok seg paa mange elementer i de to
   figurene ligger her i stedet for som inline style paa hvert element. Det er
   husets praksis (farge og strek i CSS, geometri i markup) og gjoer at en
   justering er ett sted i stedet for fjorten. Verdiene er de samme som sto
   inline, tegn for tegn, og hex-verdiene er palettens egne: #052f4e er --navy,
   #3fbf7f er --teal, #f9f9f7 er --off og #adc0cf er --mist. De staar som hex
   og ikke som token slik at klassene fortsatt kan sammenlignes direkte mot
   Mortens overleverte SVG-filer.
   Klassene er scopet til .flow-scene og kan ikke treffe de tolv ikonene ellers
   paa siden. Geometri, rekkefoelge og bevegelse er uroert. */

/* Flatene: glasskortene, hairlinene i dem og nokkeltallflisene */
.flow-scene .fs-surface { stroke: rgba(249, 249, 247, 0.28); stroke-width: 1; }
.flow-scene .fs-rule { stroke: rgba(249, 249, 247, 0.16); stroke-width: 1; }
.flow-scene .fs-tile { stroke: rgba(249, 249, 247, 0.18); stroke-width: 1; }

/* Typografien i scenen. fs-h-l er den venstrestilte varianten av fs-h. */
.flow-scene .fs-h { font: 600 15px 'Archivo', sans-serif; fill: #f9f9f7; text-anchor: middle; }
.flow-scene .fs-h-l { font: 600 15px 'Archivo', sans-serif; fill: #f9f9f7; }
.flow-scene .fs-sub { font: 400 12px 'IBM Plex Sans', sans-serif; fill: #adc0cf; text-anchor: middle; }
.flow-scene .fs-body { font: 400 12.5px 'IBM Plex Sans', sans-serif; fill: #adc0cf; }
.flow-scene .fs-body-c { font: 400 12.5px 'IBM Plex Sans', sans-serif; fill: #adc0cf; text-anchor: middle; }

/* De stille basisbanene: teal der plattformen foerer data videre, mist paa de
   korte overgangene inne i AI-kortet. Punktstroemmen som renner oppaa dem har
   sin egen inline animation og er ikke roert. */
.flow-scene .fs-wire { fill: none; stroke: rgba(63, 191, 127, 0.38); stroke-width: 1.5; stroke-linecap: round; }
.flow-scene .fs-wire-q { fill: none; stroke: rgba(173, 192, 207, 0.35); stroke-width: 1.5; stroke-linecap: round; }

/* Stegmerkene. fs-step-n1 er det moerke tallet i det fylte merket for steg 1. */
.flow-scene .fs-step { fill: #052f4e; stroke: #3fbf7f; stroke-width: 1.5; }
.flow-scene .fs-step-n { font: 700 15px 'Archivo', sans-serif; fill: #3fbf7f; text-anchor: middle; }
.flow-scene .fs-step-n1 { font: 700 15px 'Archivo', sans-serif; fill: #052f4e; text-anchor: middle; }

/* --- Hero-scenens bevegelse --- */

/* De fjorten keyframene er hentet ordrett fra Mortens overlevering
   (hero-anim.css linje 5-68) og staar her én gang, delt av begge scenene.
   Selve figurene er inline i index.html med sin egen presentasjon; her ligger
   bare bevegelsen. Alt som beveger seg bærer data-anim, og blokka nederst
   stopper alt sammen naar brukeren har bedt om mindre bevegelse. Uten
   bevegelse er begge figurene komplette: banene staar som punktlinjer, kurven
   staar i sin basisform og skrivelinjen staar paa knappe to tredeler. */

/* Datapunktene renner langs banene */
@keyframes dot-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -24; }
}
/* Lange baner faar stoerre punktavstand, samme hastighet: faerre punkter i luften */
@keyframes dot-flow-long {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -64; }
}
@keyframes dot-flow-mid {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -48; }
}
@keyframes dot-flow-short {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -16; }
}
/* Grafen i BI lever: kurven flytter seg mellom to maalinger, og det ferske
   punktet foelger enden. Nettlesere uten d-interpolering viser den statiske
   kurven, som er den samme figuren i ro. */
@keyframes trend-line {
  0%, 100% { d: path("M80 556 L122 542 L164 548 L206 528 L248 534 L288 512"); }
  50%      { d: path("M80 550 L122 548 L164 538 L206 536 L248 524 L288 504"); }
}
@keyframes trend-area {
  0%, 100% { d: path("M80 556 L122 542 L164 548 L206 528 L248 534 L288 512 L288 562 L80 562 Z"); }
  50%      { d: path("M80 550 L122 548 L164 538 L206 536 L248 524 L288 504 L288 562 L80 562 Z"); }
}
@keyframes trend-line-m {
  0%, 100% { d: path("M64 694 L117 684 L170 688 L223 678 L276 682 L328 670"); }
  50%      { d: path("M64 690 L117 688 L170 682 L223 682 L276 674 L328 662"); }
}
@keyframes trend-area-m {
  0%, 100% { d: path("M64 694 L117 684 L170 688 L223 678 L276 682 L328 670 L328 696 L64 696 Z"); }
  50%      { d: path("M64 690 L117 688 L170 682 L223 682 L276 674 L328 662 L328 696 L64 696 Z"); }
}
@keyframes trend-dot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes kpi-pulse {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.4); }
}
@keyframes soft-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}
@keyframes caret-blink {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0; }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
@keyframes write-run {
  0%        { stroke-dashoffset: 1; }
  50%, 100% { stroke-dashoffset: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; }
}
/* Blokka over er scenens fredede stopp og staar uroert. Plexus levende i
   heroen tegnes av app.js, som ved redusert bevegelse tegner ett
   stillestaaende bilde og aldri starter sloeyfen. Avsloeringene ligger i
   sin helhet inne i no-preference. */

/* ==========================================================================
   Store skjermer: typografien foelger --u
   --------------------------------------------------------------------------
   Her staar bare det som er laast i rem eller px og derfor ikke ville fulgt
   med naar --u vokser. Display-gradene har egne vw-ledd og baerer selv.
   ========================================================================== */

@media (min-width: 1400px) {
  h3 { font-size: calc(var(--u) * 0.987); }
  .sit-list h3,
  .trust-grid h3,
  .steps-list h3,
  .mod-grid h3 { font-size: calc(var(--u) * 1.33); }
  .sec-lead { font-size: calc(var(--u) * 1.22); }
  .mod-note { font-size: calc(var(--u) * 1.11); }
  .contact-lead { font-size: calc(var(--u) * 1.22); }
  .faq-list dt { font-size: calc(var(--u) * 1.16); }
  .spec-lead { font-size: calc(var(--u) * 1.5); }
  .spec-n { font-size: calc(var(--u) * 1.556); }
  .ops-step p { font-size: calc(var(--u) * 1.11); }

  .btn { font-size: calc(var(--u) * 0.833); padding: calc(var(--u) * 1) calc(var(--u) * 1.778); }
  .btn-sm { font-size: calc(var(--u) * 0.778); padding: calc(var(--u) * 0.667) calc(var(--u) * 1.111); }
  .site-nav a { font-size: calc(var(--u) * 0.72); }
  .link-mono { font-size: calc(var(--u) * 0.72); }
  .footer-nav a { font-size: calc(var(--u) * 0.72); }
  .footer-link { font-size: calc(var(--u) * 0.667); }
  .eyebrow,
  .hero-chip,
  .trust-line li,
  .card-index,
  .spec-l,
  .cta-micro,
  .contact-micro,
  .contact-meta,
  .footer-meta { font-size: calc(var(--u) * 0.667); }
  .chip-binding { font-size: calc(var(--u) * 0.611); }
  .card-icon { width: calc(var(--u) * 1.333); height: calc(var(--u) * 1.333); }
}

/* ==========================================================================
   Utskrift
   --------------------------------------------------------------------------
   Avsloeringene nullstilles, flatene blir hvite, teksten moerk, og
   navigasjon, knapper, foto og dekor tas ut. Kontaktopplysningene staar
   igjen som tekst i kontaktseksjonen og i footeren.
   ========================================================================== */

@media print {
  .js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html,
  body,
  .dark,
  .flow-visual,
  .site-footer {
    background: var(--card) !important;
    color: var(--text) !important;
  }

  h1, h2, h3,
  .dark h2,
  .dark h3,
  .hero-title,
  .quote blockquote p,
  .pledge blockquote p,
  .spec-lead,
  .team-card .team-text strong { color: var(--navy) !important; }

  p,
  .sec-lead,
  .mod-note,
  .trust-grid .card p,
  .contact-lead,
  .ops-note,
  .faq-list dd { color: var(--text) !important; }

  .eyebrow,
  .hero-chip,
  .trust-line li,
  .card-index,
  .spec-l,
  .cta-micro,
  .contact-micro,
  .contact-meta,
  .footer-meta { color: var(--teal-ink) !important; }
  .spec-n { color: var(--navy) !important; }

  .site-header,
  .skip-link,
  .flow-visual,
  .hero-live,
  .photo,
  .photo-quote > picture,
  .photo-quote::after,
  .quote-inner::before,
  .ops-step::after,
  .hero-actions,
  .cta-row .btn,
  .contact .actions,
  .card-icon,
  .phone-dialog,
  .footer-nav,
  .footer-link { display: none !important; }

  .mod-grid > .card,
  .trust-grid > .card { border: 1px solid var(--line-light-strong) !important; }
  .sec-split > .sec-head { position: static !important; }

  .section { padding-block: 18pt !important; }
  .hero { padding-block: 12pt 18pt !important; min-height: 0 !important; }
  .quote { padding-block: 18pt !important; }

  .card,
  .sit-row,
  .step-row,
  .ops-step,
  .team-card,
  .spec-item,
  .faq-list > div { break-inside: avoid; }

  a { text-decoration: underline; }
}

/* ==========================================================================
   Samtykkebanner og detaljvisning

   Levert av Morten Randeberg (ved Karen) 2026-09-14 som 2-samtykke.css i
   overleveringen «Sporing og samtykke paa orvello.no», lagt inn ordrett.
   Eneste avvik: --cc-mono har husets IBM Plex Mono foerst i stabelen, som
   filens egen tilpasningsregel tillater (variablene oeverst er byttepunktet).

   Selvstendig stilark. Alt banneret trenger staar her, og ingen regel viser
   til en variabel eller en klasse som ikke er definert i denne blokken. Alle
   velgerne ligger under prefikset .cc og kan derfor ikke treffe noe utenfor
   banneret.

   Banneret bygges av samtykke.js og finnes ikke i markup. Uten JS kan ingen
   tagg laste, og da finnes det ingenting aa samtykke til; derfor ligger det
   heller ingen skjult markup som maatte ryddes bort.

   TILPASNING. Fargene ligger som variabler med cc-prefiks oeverst, samlet paa
   ett sted. Skal banneret baere en annen palett, byttes verdiene der og ingen
   andre steder. Det som maa vaere sant etter en slik omfarging:
   - Tekst mot flate holder 4,5:1, og knappetekst mot knappeflate likedan.
   - Avkryssingsboksene og fokusmarkoeren holder 3:1 mot flaten bak.
   - De tre knappene beholder samme farge, ramme og stoerrelse.

   Alle tre knappene deler én klasse, .cc-knapp, og har ingen varianter. Det
   er den eneste maaten aa gjoere kravet etterproevbart paa: identisk
   stoerrelse, flate, farge og skriftvekt foelger av at det bare finnes én
   regel, og ingen av dem kan tones ned uten at de to andre foelger med.
   Nettstedets egen hovedknapp er utestengt fra banneret med vilje; det er en
   asymmetri Datatilsynets raad 7 slaar ned paa. Legges det til en modifikator
   paa godta-knappen her, er kravet brutt i samme operasjon.

   Kontrast regnet mot verdiene i denne blokken, ikke paa oeyemaal:
     --cc-teal-ink  paa --cc-card    6,65:1   tittel
     --cc-text      paa --cc-card   11,31:1   ingress, panelingress, navn
     --cc-text-soft paa --cc-card    6,22:1   forklaringer og statusetikett
     --cc-off       paa --cc-navy   13,08:1   tekst i alle tre knappene
     --cc-navy      paa --cc-card   13,79:1   lenken til erklaeringen
     --cc-off       paa --cc-core   10,79:1   knappene ved hover
   Alle over 4,5:1. Bunntekstlenken staar utenfor listen med vilje: den arver
   farge og skrift fra bunnteksten den settes inn i, og maaler derfor likt med
   teksten som allerede staar der.
   ========================================================================== */

/* Prefikset paa variablene er der for at de ikke skal kollidere med tokens
   som allerede finnes i stilarket. Ingen av dem leses noe annet sted enn i
   denne blokken. */
:root {
  --cc-navy: #052f4e;
  --cc-core: #0b3d5f;
  --cc-teal-ink: #17694a;
  --cc-off: #f9f9f7;
  --cc-card: #ffffff;
  --cc-text: #1d3d57;
  --cc-text-soft: #46647c;
  --cc-line: rgba(5, 47, 78, 0.14);
  --cc-line-strong: rgba(5, 47, 78, 0.3);
  --cc-skygge: 0 -8px 32px rgba(3, 35, 60, 0.14);
  --cc-radius-pill: 999px;
  --cc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cc-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Nullstillingen under er ikke pynt. Banneret settes inn i en ukjent side, og
   uten den avgjoer sidens egne regler for p, h2, h3, button og fieldset hvor
   stor luften i banneret blir. Skriftfamilien settes bevisst ikke: teksten
   arver sidens egen brodtekstskrift, og bare de to mono-detaljene har egen
   familie. */
.cc,
.cc *,
.cc *::before,
.cc *::after { box-sizing: border-box; }

/* :where() gjoer at nullstillingen ikke veier tyngre enn én klasse. Uten den
   ville .cc p slaatt .cc-ingress, og luften mellom tittel og broedtekst
   forsvunnet. Blokken maa derfor ogsaa staa foer reglene under. */
.cc :where(h2, h3, p, fieldset, legend, button) { margin: 0; }

.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Taket maa ligge over alt som kan dekke banneret, men under en eventuell
     modal paa siden. Er det allerede noe hoyere i stilarket, heves tallet. */
  z-index: 300;
  background: var(--cc-card);
  color: var(--cc-text);
  border-top: 1px solid var(--cc-line-strong);
  box-shadow: var(--cc-skygge);
}
.cc[hidden] { display: none; }
.cc:focus { outline: none; }

/* Fokusmarkoeren settes i banneret selv, saa den ikke er avhengig av at siden
   har en. Den er 6,65:1 mot den hvite flaten og langt over kravet paa 3:1. */
.cc :focus-visible {
  outline: 2px solid var(--cc-teal-ink);
  outline-offset: 3px;
}

/* Hoydetaket gjoer at banneret aldri dekker hele skjermen naar panelet er
   aapent paa en lav telefon. env() med null som reserve holder knappene klar
   av hjemindikatoren paa iPhone. */
.cc-inner {
  max-width: 880px;
  max-height: 85vh;
  overflow-y: auto;
  margin-inline: auto;
  padding: 20px max(24px, 1.4vw) calc(20px + env(safe-area-inset-bottom, 0px));
}

.cc-tittel {
  font-family: var(--cc-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-teal-ink);
}
.cc-ingress {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cc-text);
  max-width: 64ch;
}
.cc-lenkelinje { margin-top: 10px; }
.cc-lenke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--cc-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Detaljvisningen ligger under knapperaden i DOM-en, slik at avvisning staar
   like hoyt uansett om visningen er aapen. Streken over skiller den fra
   valget uten aa lage en ny flate. */
.cc-panel {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cc-line);
}
.cc-panel[hidden] { display: none; }
.cc-panel-tittel {
  font-weight: 600;
  font-size: 1.11rem;
  line-height: 1.4;
  color: var(--cc-navy);
}
.cc-panel-ingress {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cc-text);
  max-width: 64ch;
}
.cc-gruppe {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
  min-width: 0;
}
.cc-panel-knapp { margin-top: 20px; }

/* Ledeteksten i gruppen er for skjermlesere alene. Regelen er den vanlige
   sr-only-oppskriften, kopiert hit med cc-prefiks slik at blokken ikke er
   avhengig av at siden har sin egen. */
.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hele raden er pekemaal, ikke bare avkryssingsboksen: min-height 44 paa
   etiketten gir et maal som holder paa telefon. */
.cc-rad {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-block: 8px;
  cursor: pointer;
}
.cc-rad input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--cc-teal-ink);
}
/* Den laaste raden har statusetikett i stedet for en avkryssing som ikke kan
   endres: en avslaatt, uklikkbar bryter leses som en feil. Der de to andre
   radene har en boks, staar en tom plass av samme bredde, saa alle tre
   tekstkolonnene deler venstrekant. */
.cc-rad-laast { cursor: default; }
.cc-rad-plass {
  flex: none;
  width: 20px;
}
/* min-width: 0 er ikke pynt. Et flex-barn har min-width: auto som standard og
   nekter derfor aa krympe under sitt eget innhold. Forklaringene i
   detaljvisningen er lange, og uten denne linjen kan raden skyve ut vannrett
   paa 360px. */
.cc-rad-tekst { min-width: 0; }
.cc-rad-navnlinje {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.cc-rad-status {
  font-family: var(--cc-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-text-soft);
  white-space: nowrap;
}
.cc-rad-navn {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cc-text);
}
.cc-rad-hjelp {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-text-soft);
}

.cc-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
/* Én regel for alle knappene i banneret, uten varianter. Ingen pil, intet
   ikon og ingen sterkere farge paa én av dem: en retningspil paa godta og
   ikke paa avvis er den samme asymmetrien i liten skala. */
.cc-knapp {
  flex: 1 1 auto;
  min-width: 140px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: var(--cc-radius-pill);
  border: 1px solid transparent;
  background: var(--cc-navy);
  color: var(--cc-off);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s var(--cc-ease);
}
.cc-knapp:hover { background: var(--cc-core); }
.cc-knapp:active { transform: translateY(1px); }

/* Under 560px staar knappene i full bredde under hverandre. Ved 360px gir det
   312px knappebredde etter 24px padding paa hver side, og ingenting i
   banneret har fast bredde, saa flaten kan ikke skyve ut vannrett. */
@media (max-width: 559px) {
  .cc-knapp { flex: 1 1 100%; }
}

/* Bunntekstlenken som aapner banneret igjen er en knapp, fordi den ikke
   navigerer. Den arver skrift og farge fra bunnteksten den settes inn i, saa
   den maaler likt med lenkene som allerede staar der og passer inn i et
   hvilket som helst formspraak. Understreken er en ramme i bunn, slik at
   maalet holder 44px hoyde uten aa flytte teksten. */
.cc-fotlenke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cc-fotlenke:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Banneret glir opp kun naar bevegelse er tillatt. Ved redusert bevegelse
   finnes ingen transform i det hele tatt, saa flaten staar der med en gang;
   klassen cc-inne settes fortsatt av skriptet, men ingen regel bruker den. */
@media (prefers-reduced-motion: no-preference) {
  .cc {
    transform: translateY(100%);
    transition: transform 0.4s var(--cc-ease);
  }
  .cc.cc-inne { transform: none; }
}