/* ==========================================================================
   Orvello · orvello.no · redesign/fotoflate 2026

   Fotobok-formsprak: lys grunnflate med store display-utsagn, fullflate-
   naturfoto som rytmestopp, smalt mono-baand, generoes vertikal luft og
   rolige scroll-avsloeringer. Flytscenen og modulkortene staar uendret fra
   main paa en flat navy-flate; fs-klassene, keyframes-blokka og
   reduced-motion-stoppet for scenen er kopiert ordrett fra main og skal
   bestaa saa lenge scenen bruker dem. Paletten er den samme som foer, og
   all synlig tekst er ordrett fra copydecken.
   ========================================================================== */

/* --- 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 ble brukt av to regler (.contact-meta og
   .footer-meta); begge er flyttet til 500, som allerede var lastet. Det er den
   stoerste enkeltgevinsten paa foerstelast: 14 708 byte som ikke lenger hentes.
   Fontfilen for vekt 400 ligger fortsatt i fonts/ og er ikke slettet. */
@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;
}

/* --- Tokens --- */

/* Paletten er uendret fra main. Nytt i denne runden: --radius-pill for
   pilleknappene (designanalysens grep 6 ber uttrykkelig om pilleform paa
   primaer-CTA, saa den gamle radiusskalaens tak paa 12 er opphevet som en
   del av formspraaket) og --radius-card for kortene. Teksturen fra main er
   tatt ut: fotoflatene baerer rytmen naa, og DOD-kravet om flat navy bak
   flytscenen gjelder hele den moerke midtdelen. Gradienten bak sitatet
   ligger ved .photo-quote, ikke som token: den brukes ett sted. */
: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);
  --radius: 4px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --sh2: 0 6px 18px rgba(3, 35, 60, 0.1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --disp: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* --- Basis --- */

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

/* Kanvasfargen paa html er lys naa: baade toppen (lys hero) og bunnen (lys
   footer) er off, saa korte sider (404, personvern) maler riktig flate under
   footeren. Headeren er statisk og ikke sticky i dette formspraaket, saa
   scroll-padding-top er bare pusterom over ankermaalet, ikke kompensasjon
   for en flate som ligger over innholdet. */
html {
  background: var(--off);
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(63, 191, 127, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --u er sidens grunnstoerrelse og eneste typografiske akse, uendret fra main:
   17px under 1024px, clamp fra 18 til 23 over. Broedtekstnaere stoerrelser
   regner seg ut av den; display-gradene har egne clamp-uttrykk fordi de ikke
   skal foelge broedteksten. */
: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.65 var(--sans);
  overflow-x: hidden;
}

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

h1, h2 {
  font-family: var(--disp);
  letter-spacing: -0.03em;
  color: var(--navy);
}
/* Seksjonstitlene er hevet til display-graden: store paastander paa store
   flater. Mellomleddet baerer til taket 80px, som naas ved 1829px vindu;
   over det staar graden mens --u vokser, og forholdet mot broedteksten
   faller rolig fra 4,4 til 3,5. */
h2 { font-weight: 700; font-size: clamp(2.25rem, 1rem + 3.5vw, 5rem); line-height: 1.05; text-wrap: balance; }
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). Begge godt over 3:1 for en
   markoer. */
:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.stage :focus-visible,
.contact :focus-visible,
.photo-quote :focus-visible { outline-color: var(--teal); }

::selection { background: var(--navy); color: var(--off); }
.stage ::selection,
.contact ::selection,
.photo-quote ::selection,
.band ::selection { background: var(--off); color: var(--navy); }

.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 0.25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* Containeren er main sin: 1280px ved 1280px viewport, lineaer vekst til
   taket 3600px ved 5090px, der --u selv toppes ut. Utledningen staar i
   main-historikken; uttrykket er verifisert der og gjenbrukes uendret. */
.wrap {
  max-width: clamp(1280px, 60.89vw + 500.6px, 3600px);
  margin-inline: auto;
  padding-inline: max(24px, 1.4vw);
}

/* --- Eyebrow --- */

/* Mono-etikett i versaler med en 24px strek foran: aksenten ligger i streken,
   ikke i bokstavene, fordi teal paa liten tekst er palettens svakeste par.
   Beregnet: --text-soft paa --off 5,90:1; --mist paa --navy 7,35:1. Streken
   er --teal-ink paa lyst (6,31:1) og --teal paa moerkt (5,89:1), begge over
   3:1 for en synlig markoer. */
.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);
}
.stage .eyebrow { color: var(--mist); }
.stage .eyebrow::before { background: var(--teal); }

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

/* Generoes vertikal luft er formspraakets hovedgrep: seksjonene skilles av
   rom, ikke av linjer, saa main sine ankerlinjer over hvert hode er tatt ut.
   Verdiene er antatt og skal ses i nettleser: 126px ved 1280, 139 ved 1440,
   178 ved 1920, tak 224. */
.section { padding-block: clamp(104px, 8vw + 24px, 224px); }

.sec-head { margin-bottom: clamp(48px, 4vw, 104px); }
.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: 56ch;
  text-wrap: pretty;
}

/* --- 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;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* 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 3px 10px 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: et tegn ville vaert synlig tekst uten dekning i
   copydecket og blitt lest opp av skjermlesere. Ingen bevegelse, saa den
   trenger ingen reduced-motion-sti. Den staar ikke paa .btn-sm, der den ville
   konkurrert med logoen. */
.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);
}

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

/* Handlingslenker i versal mono, designanalysens grep 6: diskret, aldri
   ropende. Understreken staar alltid, saa lenken ikke er hover-avhengig.
   Pekemaalet holdes av min-height 44. Kontrast: --navy paa --off 13,1:1;
   den lyse varianten er --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 0.25s 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); }
.link-mono-light {
  color: var(--off);
  border-bottom-color: var(--line-dark-strong);
}
.link-mono-light:hover { border-bottom-color: var(--teal); }

/* --- Header --- */

/* Headeren er statisk og lys: den er toppen av den lyse heroflaten og
   scroller vekk med den. Ingen sticky tilstand, ingen scrollskygge og ingen
   JS-krok; navigasjonen gjentas i footeren for veien tilbake. Det er
   fotobok-logikken i formspraaket: innholdet ruller som ett dokument.
   Kontrast: --navy lenker paa --off 13,1:1. */
.site-header { background: var(--off); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 72px;
  padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 36px; width: auto; }
@media (min-width: 880px) {
  .brand img { height: 40px; }
}

.site-nav { display: flex; gap: clamp(20px, 1.8vw, 36px); margin-left: auto; }
.site-nav a {
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 10px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.site-nav a:hover { border-bottom-color: var(--teal-ink); }

.header-cta { margin-left: auto; }
/* Knappen staar to steder i markup, en for hvert baand, og bare den ene er
   rendret om gangen: da er rendret rekkefoelge lik DOM-rekkefoelge paa alle
   bredder, og tabulatoren foelger det leseren ser. Grepet og maalingene bak
   det er fra main; 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. row-gap er 0 saa boksen maaler radene sine og
   ikke mer; hoyden kommer fra innholdet siden ingenting er forankret mot en
   fast headerhoyde i dette formspraaket. */
@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; }
  /* 44px hoye pekemaal; TEAMET er den eneste lenken som trenger min-width
     for aa naa 44 i bredden (maalt i main-runden til 42,91). */
  .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;
  }
}

/* De smaleste skjermene: knappen skal ikke brekke til to linjer, og
   lenkeraden gaar i to jevne kolonner i stedet for aa brekke skjevt.
   Begge grep er maalt og begrunnet i main-runden og gjenbrukes. */
@media (max-width: 383px) {
  .btn-sm {
    padding: 8px 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }
}

/* --- Hero --- */

/* Lys hero med display-trapp: H1 alene i toppen, brutt i tre kontrollerte
   linjer med trappinnrykk fra 640px. Under 640 er linjespennene inline og
   teksten flyter fritt, saa smale skjermer beholder naturlig brekk.
   Grad: clamp(2.5rem, 7.5vw, 8.5rem) gir 58px ved 768, 96 ved 1280, 120 ved
   1600 og taket 136 fra 1813. Bredeste linje er "Datakontroll og AI"
   (18 tegn); med main sin maalte faktor for Archivo (0,486 px per px grad
   per tegn, pluss margin for versaler: 0,55 brukt her) er linjen ca 1346px
   ved taket, mot ca 1553px innhold der taket naas. Regnet, ikke maalt;
   nettleserkontroll kommer etterpaa. */
.hero { padding-block: clamp(64px, 8vh + 16px, 160px) clamp(48px, 5vw, 104px); }
.hero-title {
  font-weight: 640;
  font-size: clamp(2.5rem, 7.5vw, 8.5rem);
  line-height: 1.02;
  max-width: 12em;
}
.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; }
}

/* Ordene i H1 bygges av app.js og finnes bare naar js-reveal er satt; se
   avsloeringsblokka lenger nede for selve bevegelsen. */
.hero-title .w { display: inline-block; }

.hero-sub {
  margin-top: clamp(28px, 3vw, 48px);
  color: var(--text-soft);
  font-size: clamp(1.125rem, 0.45vw + 1rem, 1.5rem);
  line-height: 1.5;
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(32px, 3vw, 56px);
}
/* Stables handlingene, faar pilleknappen hele bredden og mono-lenken sin
   egen rad; det er ryddigere enn to nesten like brede knapper. */
@media (max-width: 479px) {
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-actions .link-mono { justify-self: start; }
}

/* --- Baandet --- */

/* Trygghetslista som smalt, avrundet mono-baand: navy flate paa den lyse
   grunnen, fire rader i versal mono med teal punkt. Radius 28 og ikke pille,
   fordi baandet kan brekke til to rader paa mellombredder og en pille med to
   rader leses som en feil. Kontrast: --mist paa --navy 7,35:1, punktet
   --teal paa --navy 5,89:1 (markoer, kravet er 3:1). */
.band-outer { padding-block: 0 clamp(48px, 5vw, 96px); }
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  background: var(--navy);
  border-radius: 28px;
  padding: 20px clamp(24px, 2.4vw, 48px);
}
.band li {
  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);
}
.band li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
@media (max-width: 639px) {
  .band {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-block: 24px;
  }
  .band li { font-size: 11px; }
}

/* --- Fotoflatene --- */

/* Fullflate-naturfoto som egne sider: hver flate er en hel viewporthoyde
   (100vh, med 100svh-overstyring der enheten finnes, saa mobilnettlesere
   ikke hopper naar adressefeltet gjemmer seg). I fallback-stien ligger
   bildet absolutt med cover; width/height-attributtene styrer aldri
   layout, og flaten gir ingen CLS. */
.photo {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--deep);
}

/* Kunstretningen 24.8 la et <picture> mellom flaten og bildet, saa staaende
   telefonflater kan hente et staaende utsnitt (se index.html). Wrapperen
   maa vaere like usynlig for layouten som bildet var: den ligger derfor
   absolutt over hele flaten og er ute av flyten. Det er poenget, ikke
   pynt. Uten det ville picture blitt en egen rad i .photo-quote sitt grid
   (bildet inni er absolutt eller fixed, saa raden ville vaert null hoy),
   og stretch ville delt den ledige hoyden mellom de to radene og dyttet
   sitatet opp fra bunnen. Absolutt posisjonering blokkifiserer ogsaa
   picture, saa ingen display-erklaering trengs.
   Merk at picture ikke etablerer containing block for det fixede bildet i
   curtain-stien: verken position: absolute eller inset gjoer det, og
   wrapperen har ingen transform, filter, perspective, backdrop-filter
   eller contain: paint. Curtain-regnskapet under staar derfor uendret. */
.photo > picture {
  position: absolute;
  inset: 0;
}
.photo > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Curtain-revisjonen 24.8: bildet staar stille mot viewporten mens sidens
   innhold ruller over det, som i forbildet. Teknikk: position fixed paa
   bildet og clip-path: inset(0) paa seksjonen. clip-path klipper malingen
   av alle etterkommere til seksjonens boks, ogsaa fixed-posisjonerte, men
   staar ikke i listen over egenskaper som etablerer containing block for
   fixed (det gjoer transform, filter, perspective, backdrop-filter og
   contain: paint; ingen forfar av bildet har noen av dem, kontrollert mot
   html, body, main, .photo selv og picture-wrapperen fra kunstretningen
   24.8, og ingen reveal-transform ligger paa en forfar av bildet). Det
   samme gjelder klippingen: bildet er fixed og har viewporten som
   containing block, saa hverken picture eller .photo klipper det med
   overflow; clip-path gjoer det, og den virker paa hele subtreet uansett
   hvor mange ledd som ligger mellom.
   Sticky-varianten er vurdert og forkastet: i en flate
   paa noeyaktig en viewporthoyde har sticky null spillerom og gir ingen
   curtain uten kunstig ekstra hoyde.
   Bildet dimensjoneres 100vw x 100lvh forankret i toppen: lvh er stoerste
   viewport, saa utsnittet staar i ro naar mobilens adressefelt kollapser,
   og overskuddet klippes av seksjonen. 100vw kan vaere bredere enn
   klientflaten (klassisk rullefelt); ogsaa det klippes, og fixed-elementer
   bidrar ikke til dokumentets rulleomraade, saa ingen horisontal rulling.
   Dokumentar-zoomen bestaar paa bildet (32s, 38s paa sitatflaten):
   transform paa selve det fixede elementet flytter ingen containing block,
   og skalaen gaar aldri under 1, saa viewporten er dekket i alle
   scrollfaser.
   Gaten er dobbel og konservativ: @supports paa animation-timeline:
   view() og prefers-reduced-motion: no-preference fordi curtain er
   scrolldrevet bevegelse. view()-testen er en motorgenerasjons-markoer,
   ikke en funksjon curtain bruker: den slipper gjennom Chrome/Edge 115+
   og Safari 26+, der clip-path og lvh ogsaa finnes. Grunnen til at gaten
   ikke er clip-path pluss lvh: iOS 16 bestaar begge, men har en
   publisert, uloest feil der fixed-etterkommere slipper ut av forfars
   clip-path: inset(0) under knip-zoom (Apple Developer Forums 733315,
   csswg-drafts 8336); symptomet ville vaert en viewportstor fotoflis
   over annet innhold mens brukeren er zoomet inn. Ved skala 1, altsaa
   vanlig scroll, er klippingen maalt ren i Chrome og uten kjente
   motbevis i WebKit 15.4+; pre-15.4-feilklassen ligger uansett utenfor
   gaten. Prisen for valget er at Safari 16 til 18 og Firefox uten
   view() faar den statiske fallbacken, som er komplett. Utenfor gaten:
   statisk foto i normal flyt, komplett side. Scroll-parallaxen fra
   foerste bevegelsesrunde er fjernet sammen med oversizingen: et fast
   bakteppe er maksimal parallax, og de to grepene skal ikke stables. */
@keyframes photo-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.photo > picture > img { animation: photo-zoom 32s ease-in-out infinite alternate; }
.photo-quote > picture > img { animation-duration: 38s; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .photo { clip-path: inset(0); }
    .photo > picture > img {
      position: fixed;
      width: 100vw;
      height: 100lvh;
    }
  }
}

/* Sitatflaten: teksten staar lavt, og den avgrensede gradienten er bundet
   til tekstboksen, ikke til flaten. Verifikasjonen 2026-08-24 maalte den
   forrige gradienten (prosentstopp av flatehoyden) til 2,91:1 i verste
   piksel bak tekstlinje 2 ved 1280, mot krav 3:1 for displaygraden:
   tekstboksens topp landet der gradienten bare hadde alfa 0,26 til 0,44,
   og hvor toppen lander flytter seg med vindushoyden naar stoppene er
   prosenter. Gradienten ligger derfor paa tekstsonens egen boks med faste
   pikselstopp: alfa 0,62 fra boksens overkant og helt ned til flatebunnen,
   med myk utoning over de 200 pikslene over boksen. Beregnet garanti,
   fotouavhengig: selv en ren hvit fotopiksel bak alfa 0,62 gir kompositt
   rgb(99,119,134), altsaa 4,41:1 mot --off; mot maalingens verste
   bakpiksel er beregnet verdi 4,9:1. Beregnet, ikke maalt; omkjoeringen
   maaler. 50vw-leddene strekker gradienten til viewportkantene selv om
   boksen er wrap-bred, og overskuddet klippes av .photo sin overflow og
   clip-path.
   Lagdelingen under curtain: bildet er fixed og staar stille, mens inner
   (tekst) og dens ::before (gradient) ligger i normal flyt og ruller med
   siden som en enhet. inner har z-index 1 og ligger over bildet i alle
   scrollfaser, saa alfa 0,62 staar bak all tekst uansett hvilket utsnitt
   av fotoet som til enhver tid er bak; garantien er uansett
   fotouavhengig. Hoyden arves fra .photo (100vh med svh-overstyring). */
.photo-quote {
  display: grid;
}
.photo-quote-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  align-self: end;
  padding-block: 0 clamp(72px, 10vh, 136px);
}
.photo-quote-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: 0;
  height: calc(100% + 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;
}
.photo-quote blockquote { margin: 0; }
/* Hengende anfoerselstegn: innrykket er -0.38em og ikke mer, fordi flaten
   har overflow hidden og tegnet maa holde seg innenfor wrap-paddingen.
   Regnet paa de to skrankene: ved 1692px vindu er paddingen fortsatt 24px,
   graden 60px og innrykket 22,8px, altsaa innenfor; taket 68px naas foerst
   ved 2000px vindu, der paddingen er 1.4vw = 28px mot innrykk 25,8px.
   Optisk flukt maales i nettleser. */
.photo-quote blockquote p {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.875rem, 1rem + 2.6vw, 4.25rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--off);
  text-indent: -0.38em;
  max-width: 24ch;
  text-wrap: balance;
}

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

/* Innholdsstykkene er hairline-blokker, ikke bokser: en enkel strek over,
   luft rundt. Ingenting i dem er klikkbart, saa de har ingen hover. */
.card {
  border-top: 1px 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; }

.card-index {
  display: block;
  font-family: var(--disp);
  font-weight: 640;
  font-size: clamp(1.375rem, 0.55vw + 1.1rem, 2.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
  margin-bottom: 16px;
}

.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: 16px;
}

/* Blokktitlene i displayfamilien: redaksjon, ikke grensesnitt. */
.sit-grid h3,
.trust-grid h3,
.steps-grid 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);
}

/* Situasjonene og tryggheten: to og to blokker med god luft. */
.sit-grid,
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 4vw, 88px) clamp(32px, 3vw, 72px);
}
@media (max-width: 639px) {
  .sit-grid,
  .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* --- Plattformen: den flate navy-flaten --- */

/* 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 her. */
.stage { background: var(--navy); }
.stage h2 { color: var(--off); }

/* Scenen fyller wrappens innholdsbredde opp til taket. Desktopscenen vises
   fra 768px og rendres aldri under 1:1: innholdsbredden er viewport minus
   2 * max(24px, 1.4vw), altsaa 720px ved 768 mot designbredden 696
   (1,034:1), og den vokser monotont med vinduet. Taket calc(var(--u) * 55)
   er main sin regel: 696 designbredde delt paa scenens 12.5px broedtekst
   gir 55,7, saa ved taket rendrer scenens broedtekst som sidens egen, og
   taket ligger alltid over 696 (935px ved --u 17). Mobilscenen har samme
   regel med faktor 28 (360/12.5, rundet ned). */
.flow-visual { margin-block: 0 clamp(56px, 5vw, 112px); }
.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); }

/* Sceneskiftet gaar paa 768 som paa main: desktopscenen fra og med 768,
   mobilscenen under. Begge ligger inline; den som ikke vises er
   display: none. */
.flow-desktop { display: none; }
.flow-mobile { display: block; }
@media (min-width: 768px) {
  .flow-desktop { display: block; }
  .flow-mobile { display: none; }
}
/* Sikkerhetsventil fra main: SVG-tekst maales i font, ikke i tegning, saa
   om en font rendrer bredere enn maalt spiller overskuddet ut i wrappens
   padding i stedet for aa klippes. Mobilscenen har 16px marg innebygd. */
.flow-desktop { overflow: visible; }

/* Modulkortene: lyse kort paa den moerke flaten. Markupen er fredet fra
   main; bare presentasjonen er ny. Kontrast inne i kortene er de lyse
   flatenes egne tall: --navy paa hvit 13,8:1, --text-soft paa hvit 6,2:1,
   ikonene --navy paa hvit (kravet for en markoer er 3:1). */
.mod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.2vw, 28px);
}
.mod-grid > .card {
  border-top: 0;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: clamp(28px, 1.4vw + 16px, 44px);
}
@media (min-width: 768px) {
  .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Fra 1200: tre kort oppe, to sentrert under, paa et seksdelt gitter. */
@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: 2 / span 2; }
  .mod-grid > .card:nth-child(5) { grid-column: 4 / span 2; }
}

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

/* --- Driftsvignetten --- */

.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 72px);
}
.ops-step {
  border-top: 1px solid var(--line-light-strong);
  padding-top: clamp(24px, 1vw + 12px, 36px);
}
.ops-step .card-index { margin-bottom: 14px; }
.ops-step p {
  color: var(--text);
  margin-top: 14px;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  line-height: 1.5;
}
.ops-note {
  margin-top: clamp(40px, 3vw, 72px);
  padding-top: clamp(24px, 1vw + 12px, 36px);
  border-top: 1px 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: 40px; } }

/* --- Kjoepsmodellen --- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 72px);
}
.steps-grid > .card { padding-top: clamp(24px, 1vw + 12px, 36px); }
@media (max-width: 767px) { .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.step-head .card-index { margin-bottom: 0; }
/* "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, designanalysens grep 4.
   Bevegelsesrunden 24.8 ga det mer luft: utsagnet skal ha sitt eget rom
   foer og etter, ikke henge i steglisten. */
.pledge {
  margin-top: clamp(104px, 9vw, 224px);
  margin-bottom: clamp(24px, 2vw, 48px);
  text-align: center;
}
.pledge blockquote { margin: 0; }
.pledge blockquote p {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.75rem);
  line-height: 1.18;
  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(24px, 2vw, 48px);
  max-width: calc(var(--u) * 56);
}
@media (max-width: 639px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* Teamkortene er de eneste innrammede flatene paa lys grunn: de baerer et
   bilde og trenger en kant. */
.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);
}
/* Portrettet er staaende 2:3 og beskjaeres til 3:4; object-position loefter
   utsnittet saa ansiktet staar i oevre tredjedel. */
.team-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
}
.team-media.team-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
}
.team-media.team-mark img {
  width: 88px;
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.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; }
/* Halvfet i broedtekstens egen familie: navnet staar midt i en loepende
   setning og skal ikke brekke den. */
.team-card .team-text strong { color: var(--navy); font-weight: 600; }

/* --- Spoersmaalene --- */

.faq-list { max-width: calc(var(--u) * 46); }
.faq-list > div {
  border-top: 1px solid var(--line-light-strong);
  padding-block: clamp(28px, 1.2vw + 16px, 44px);
}
.faq-list > div:last-child { border-bottom: 1px 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);
}
.faq-list dd { margin-top: 12px; color: var(--text-soft); max-width: 62ch; }

/* --- Kontakt --- */

/* Flat --deep uten tekstur: den moerke sluttflaten etter kveldshav-fotoet.
   Kontrast: --off paa --deep 15,2:1, --mist paa --deep 8,55:1, teal-punktet
   6,85:1 (markoer, krav 3:1). */
.contact {
  background: var(--deep);
  text-align: center;
}
.contact h2 { color: var(--off); }
.contact-inner { max-width: calc(var(--u) * 40); }
.contact-lead {
  margin-top: 20px;
  color: var(--mist);
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  line-height: 1.5;
}
.contact .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 40px;
}
.contact-micro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  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(56px, 4vw, 104px);
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

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

/* Aapnes av app.js kun paa presise pekere; ellers virker tel:-lenkene som
   foer. Padding ligger paa inner, saa klikk paa selve dialogflaten kan
   tolkes som backdrop-klikk i app.js. */
.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); }
.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: 700;
  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;
}
.phone-dialog-close:hover { color: var(--navy); background: rgba(5, 47, 78, 0.06); }
.phone-dialog-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* --- Footer --- */

/* Lys footer med stor logo og mono-metadata, formspraakets sluttpunkt.
   Kontrast: --navy lenker paa --off 13,1:1, --text-soft metadata 5,90:1. */
.site-footer {
  background: var(--off);
  border-top: 1px solid var(--line-light);
  padding-block: clamp(56px, 5vw, 104px);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line-light);
}
.footer-nav a {
  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 0.25s var(--ease);
}
.footer-nav a:hover { border-bottom-color: var(--teal-ink); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
}
.footer-inner img { height: 44px; width: auto; }
.footer-meta {
  font: 500 12px/1.6 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; }
.footer-meta a:hover { color: var(--navy); }
.footer-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line-light-strong);
  transition: border-color 0.25s var(--ease);
}
.footer-link:hover { border-bottom-color: var(--teal-ink); }
@media (max-width: 879px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-link { margin-left: 0; }
}

/* --- Undersider --- */

/* Undersidene foelger den lyse grunnflaten: page-head er off med navy H1,
   samme header og footer som forsiden. */
.page-head { padding-block: clamp(72px, 8vh, 144px) 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; }

.prose { max-width: 720px; }
.prose h2 {
  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: 65ch; }

/* --- Scroll- og ordavsloeringer (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. */
@media (prefers-reduced-motion: no-preference) {
  /* Bevegelsesrunden 24.8: roligere og mer omsorgsfull stagger. Varighet
     0.85s og 24px loeft, soeskendelay i 0.12s-trinn. Fortsatt kun
     opacity og transform, saa ingenting maales om. */
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  }
  .js-reveal .reveal.d2 { transition-delay: 0.12s; }
  .js-reveal .reveal.d3 { transition-delay: 0.24s; }
  .js-reveal .reveal.d4 { transition-delay: 0.36s; }
  .js-reveal .reveal.d5 { transition-delay: 0.48s; }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }

  /* De to store utsagnene, loeftesitatet og kilesitatet, faar en egen,
     langsommere entré: lengre vei, lengre tid og et lite pusterom foer de
     begynner. Samme mekanikk (is-in fra IntersectionObserver), bare
     tyngre kurve; uten JS og ved redusert bevegelse finnes ingen av
     delene. */
  .js-reveal .pledge.reveal,
  .js-reveal .photo-quote .reveal {
    transform: translateY(36px);
    transition-duration: 1.25s;
    transition-delay: 0.12s;
  }

  /* Ordavsloeringen paa H1: app.js pakker hvert ord i .w med --wi som
     indeks. Ordene toner inn i rekkefoelge, kort og langsomt. */
  .js-reveal .hero-title .w {
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--wi, 0) * 0.05s + 0.1s);
  }
  .js-reveal .hero-title.words-in .w { opacity: 1; transform: none; }

  /* Ingressen og handlingene i heroen venter til ordene er inne. */
  .js-reveal .hero .hero-sub.reveal { transition-delay: 0.5s; }
  .js-reveal .hero .hero-actions.reveal { transition-delay: 0.62s; }
  .js-reveal .band.reveal { transition-delay: 0.15s; }
}

/* --- 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; fotobevegelsen fra
   bevegelsesrunden 24.8 stoppes her, i samme mekanisme og paa samme sted.
   Zoomen slaas av med animation: none, og curtain-oppfoerselen (fixed og
   clip-path) er i tillegg gatet bak (prefers-reduced-motion:
   no-preference) i sin egen @supports-blokk, saa ved redusert bevegelse
   staar bildet absolutt i normal flyt uten noen animasjon: statisk foto,
   statisk utsnitt, komplett side. Avsloeringene og ordavsloeringen ligger
   i sin helhet inne i no-preference lenger oppe. */
@media (prefers-reduced-motion: reduce) {
  .photo > picture > img { animation: none !important; }
}

/* ==========================================================================
   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-grid h3,
  .trust-grid h3,
  .steps-grid 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); }
  .ops-step p { 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); }
  .hero-sub { font-size: calc(var(--u) * 1.24); }

  .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-link { font-size: calc(var(--u) * 0.667); }
  .eyebrow,
  .band li,
  .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,
  .js-reveal .hero-title .w {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html,
  body,
  .stage,
  .contact,
  .band,
  .site-footer {
    background: var(--card) !important;
    color: var(--text) !important;
  }

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

  p,
  .sec-lead,
  .hero-sub,
  .mod-note,
  .contact-lead,
  .faq-list dd { color: var(--text) !important; }

  .eyebrow,
  .band li,
  .card-index,
  .contact-micro,
  .contact-meta,
  .footer-meta { color: var(--teal-ink) !important; }

  .site-header,
  .skip-link,
  .flow-visual,
  .hero-actions,
  .contact .actions,
  .card-icon,
  .phone-dialog,
  .footer-nav,
  .footer-link,
  .photo { display: none !important; }

  /* Sitatflaten skal med paa papir, uten foto og gradient. */
  .photo-quote {
    display: block !important;
    min-height: 0 !important;
    background: var(--card) !important;
  }
  /* Hele picture-wrapperen tas ut, ikke bare img: da forsvinner ogsaa
     source-elementene med de staaende utsnittene, og ingen tom absolutt
     boks blir staaende igjen over papirteksten. */
  .photo-quote > picture { display: none !important; }
  .photo-quote-inner::before { display: none !important; }
  .photo-quote-inner { padding-block: 18pt !important; }
  .photo-quote blockquote p { color: var(--navy) !important; }

  .mod-grid > .card { border: 1px solid var(--line-light-strong) !important; }

  .section { padding-block: 18pt !important; }
  .hero { padding-block: 12pt 18pt !important; }

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

  a { text-decoration: underline; }
}