/* ==========================================================
   NORDVO — felles stilark
   Alle farger og skrifter styres herfra. Endrer du noe under
   ":root", endres det på hele nettsiden.
   ========================================================== */

/* --- Skriftene ---
   Ligger lokalt i skrift/-mappa i stedet for hos Google: raskere,
   virker uten nett, og ingen besøksdata sendes ut av siden.
   Filene er «variable» — én fil dekker alle tykkelser.

   Brødteksten er Instrument Sans, ikke Inter: Inter er standard-
   skriften i hvert eneste AI-genererte utkast på nettet, og folk
   kjenner den igjen uten å vite hvorfor. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("skrift/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("skrift/cormorant-kursiv.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("skrift/instrument.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marineblå: ÉN flat farge over hele siden. Tidligere lå det tre
         ulike blåtoner her, pluss gløder og fargeoverganger i flere
         seksjoner. Det ga mange nyanser som skled over i hverandre og
         gjorde siden urolig. Nå er alt den samme flaten — samme navy
         som logoen bruker — og seksjoner skilles med hårfine streker
         i stedet for fargeskift. --- */
  --blekk:    #0B1B33;
  --blekk-2:  #0B1B33;
  --blekk-3:  #0B1B33;

  /* --- Is: den lyseblå som løfter fram det viktige --- */
  --is:       #4FC3F7;
  --is-lys:   #9AE4FF;
  /* Stemt ned fra #1B7FB5 den 26.08.2026: den gamle tonen ga 4,24:1 som
     tekst på lys flate og 4,42:1 med hvit tekst oppå — begge like under
     kravet på 4,5:1. Denne gir 5,17 og 5,39. */
  --is-dyp:   #17719F;

  /* --- Varme: det er disse som gjør flatene innbydende i stedet for
         kalde. Gull brukes på priser og små detaljer, sand på brødtekst. --- */
  --gull:      #D0A868;
  --gull-lys:  #E8C68C;
  --gull-mork: #96690F;  /* gull som TEKST på lys flate — se merknaden under */

  /* --- Den lyse flaten ---
         Flaten er ikke ren hvit, men et varmt nær-hvitt: ren #FFF blir
         klinisk, mens denne holder samme varme som resten. --- */
  --flate-lys: #FCFAF6;
  --skifer:    #4A5A70;  /* brødtekst PÅ lys flate */
  --kant-lys:  rgba(11, 27, 51, 0.12);

  /* --- Tekstfarger for MØRK flate (brukes nå kun i hjerne-seksjonen) --- */
  --sno:      #FBF9F6;   /* overskrifter — varm nær-hvit, ikke blåhvit */
  --dis:      #D3C9BA;   /* brødtekst — sand, ikke kaldt blågrått */
  --dis-svak: rgba(211, 201, 186, 0.55);

  /* ==========================================================
     ROLLEFARGENE — DET VIKTIGSTE Å FORSTÅ I HELE FILA
     ==========================================================
     Fargene over er PALETTEN (hvilke farger finnes). De fire
     under er ROLLENE (hva brukes hvor). Resten av stilarket
     spør alltid etter rollen, aldri etter paletten direkte.

     Hele nettsiden er LYS. Den eneste mørke flaten er seksjonen
     med hjernen — og den bytter bare ut de fire verdiene under
     (se «.hjerne-seksjon»), så alt innhold der snur farge av seg
     selv uten en eneste ekstra regel.

     Vil du gjøre en ny seksjon mørk: sett de samme fire
     variablene på den, så følger teksten etter.

     MERK om gull: #D0A868 er nydelig mot mørkt, men mot den lyse
     flaten har den for svak kontrast til å leses (2,1 der 4,5
     kreves). Derfor finnes --gull-mork, som er samme farge stemt
     ned til lesbarhet (4,7). Gull som DEKOR kan fortsatt være
     lys; gull som TEKST på lys flate skal være --gull-mork.
     ========================================================== */
  --flate:      var(--flate-lys);  /* sidens bakgrunn            */
  --tekst:      var(--blekk);      /* overskrifter og sterk tekst */
  --tekst-svak: var(--skifer);     /* brødtekst                   */
  --aksent:     var(--is-dyp);     /* den blå som løfter fram     */
  --kant:       var(--kant-lys);   /* hårfine skillestreker       */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Merk: ingen overflow-x her. Overflow på rotelementet smitter over på
     hele vinduet, og da slutter scroll-hendelsene å fyre — alt som drives
     av scroll ville frosset. Hver seksjon klipper seg selv i stedet. */
}

body {
  margin: 0;
  background: var(--flate);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section, footer { max-width: 100vw; overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--is); color: var(--blekk); }

/* ==========================================================
   TYPOGRAFI
   ========================================================== */

/* Den store, lette serifen — det er denne som bærer hele uttrykket */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* Rollefargen, ikke paletten: da blir den mørk blå på lys flate og
   lys blå inne i hjerne-seksjonen, helt av seg selv. */
.display em { font-style: normal; color: var(--aksent); }

/* Liten versal-etikett over overskriftene */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aksent);
  margin: 0;
}

.eyebrow-strek { display: flex; align-items: center; gap: 0.85rem; }
.eyebrow-strek::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--aksent);
  flex-shrink: 0;
}

/* --- «På nett»-prikken ---
   Samme plass som streken over, men en prikk som puster ut en ring.
   Det er slik programmer viser at noe er tilkoblet, og her sier den
   det samme som slagordet: bedriften er våken akkurat nå.

   Ringen lages med box-shadow som vokser og tones ut. Fordelen mot
   et ekstra element er at ingenting flytter på seg — skyggen tar
   ikke plass i layouten, så teksten står bom stille. */
.eyebrow-puls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.eyebrow-puls::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: puls 2.8s ease-out infinite;
}

/* Ringen bruker den mørke blåtonen — den lyse forsvinner mot
   nesten-hvitt. Inne i hjerne-seksjonen ville den lyse vært riktig,
   men prikken brukes ikke der. */
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(27, 127, 181, 0.45); }
  70%  { box-shadow: 0 0 0 0.75rem rgba(27, 127, 181, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 127, 181, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow-puls::before { animation: none; }
}

/* Tall skal stå i kolonne, ikke danse */
.tall { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.ingress {
  color: var(--tekst-svak);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 34rem;
}

/* ==========================================================
   FLATER
   ========================================================== */

.edge {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) { .edge { padding-inline: 3rem; } }

/* Fin-kornet støy. Tar bort det flate «CSS-preget» og gir dybde.
   Kornet er MØRK støy, så på den lyse flaten må den dempes kraftig
   — full styrke leser som skitt i stedet for som liv. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.015;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blå lysglød — får elementer til å «sveve» */
.glod {
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
              rgba(79, 195, 247, 0.42) 0%, transparent 70%);
  pointer-events: none;
}

/* Felles perspektiv for 3D-scenene */
.scene { perspective: 1400px; perspective-origin: 50% 45%; }
.layer { transform-style: preserve-3d; will-change: transform, opacity; }

@media (max-width: 767px) { .scene { perspective: 900px; } }

/* ==========================================================
   KNAPPER
   ========================================================== */

.knapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              border-color 0.4s, color 0.4s;
}

.knapp:hover { transform: translateY(-2px); }

/* Den fylte knappen bruker den DYPE blåtonen: lys is på lys flate
   gir hvit tekst på nesten-hvitt, altså uleselig. */
.knapp-fyll { background: var(--is-dyp); color: #FFFFFF; font-weight: 600; }
.knapp-fyll:hover { box-shadow: 0 12px 40px -10px rgba(27, 127, 181, 0.5); }

.knapp-linje { border-color: rgba(11, 27, 51, 0.25); color: var(--tekst); }
.knapp-linje:hover { border-color: var(--aksent); color: var(--aksent); }

/* ==========================================================
   TOPPMENY
   ========================================================== */

.fremdrift {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--is-dyp), var(--is-lys));
  z-index: 100;
}

.topp {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: 1.15rem 0;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}

/* Menyen er gjennomsiktig over toppen av sida, og legger seg som en
   lys, matt flate først når du scroller. */
.topp.festet {
  background: rgba(252, 250, 246, 0.86);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: var(--kant);
}

.topp-innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logoen er nå en SVG-fil, ikke bokstaver. Vi styrer den på HØYDE og
   lar bredden følge selv — ellers ville logoen strukket seg skjevt. */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img {
  height: 2.1rem;
  width: auto;
  display: block;
}

/* Hele sida er lys, så det er den MØRKE logoen som gjelder overalt
   (bilder/logo-full-mork.svg). Den lyse utgaven ligger fortsatt i
   bilder/ i tilfelle en mørk flate skulle trenge den senere. */

/* I bunnteksten får den stå litt større, der er det bedre plass */
.bunn .logo img { height: 2.6rem; }

@media (max-width: 700px) {
  .logo img { height: 1.7rem; }
  .bunn .logo img { height: 2.1rem; }
}

.meny { display: flex; align-items: center; gap: 2rem; }

.meny a {
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 27, 51, 0.72);
  padding: 0.3rem 0;
  position: relative;
  transition: color 0.35s;
}

.meny a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--aksent);
  transition: width 0.45s var(--ease);
}

.meny a:hover { color: var(--tekst); }
.meny a:hover::after, .meny a.aktiv::after { width: 100%; }
.meny a.aktiv { color: var(--tekst); }

@media (max-width: 700px) {
  .meny { gap: 1.1rem; }
  .meny a { font-size: 0.68rem; letter-spacing: 0.08em; }
  .logo { font-size: 0.8rem; letter-spacing: 0.22em; }
}

/* Under ~430px er det ikke plass til logo + fire menypunkter med den brede
   sperringen — «Kontakt» ble kuttet av på høyre side. Vi strammer inn
   bokstavavstanden i stedet for å skjule noe.

   MERK skriftstørrelsen: den var nede i 0.6rem (9,6 px) her, og det er
   for lite å lese på telefon. Plassen hentes i stedet fra LOGOEN og
   mellomrommene. Lenkene har også luft over og under seg — ikke for
   utseendet, men fordi en tommel treffer dårlig på 26 px høye mål. */
@media (max-width: 430px) {
  .edge { padding-inline: 1.1rem; }
  .topp { padding: 0.7rem 0; }
  .topp-innhold { gap: 0.7rem; }
  .logo img { height: 1.35rem; }
  .logo { font-size: 0.72rem; letter-spacing: 0.14em; }
  .meny { gap: 0.55rem; }
  .meny a {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    padding: 0.6rem 0;
  }
}

/* ==========================================================
   HERO — navnet stort, slagordet under
   ========================================================== */

.hero-tekst {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: center;
  text-align: center;
  /* Eksplisitt farge, selv om body har den samme. En seksjon skal
     eie sin egen flate — ellers brekker den i det øyeblikket noen
     endrer body eller flytter seksjonen. */
  background: var(--flate);
  /* Toppmenyen ligger over — luften her holder teksten under den */
  padding: 8rem 0 3rem;
}

.hero-tekst .edge { width: 100%; }

.hero-tittel {
  margin: 0;
  color: var(--blekk);
  font-size: clamp(4.2rem, 15vw, 11.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Slagordet: serif-kursiv i den dype blå. MERK fargen: ren lyseblå
   (--is) på den lyse flaten er nesten usynlig (2:1 i kontrast) —
   --is-dyp er samme blåtone stemt for lys bakgrunn. */
.hero-slagord {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  color: var(--is-dyp);
  margin: 1.4rem 0 0;
}

.hero-knapper {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ==========================================================
   HJERNEN — seksjonen under hero-en
   ==========================================================
   Partikkelhjernen: gyllen kontur, isblå gnister, mørk flate.
   Seksjonen er 2,6 skjermhøyder; innholdet står klistret mens
   man scroller «gjennom», og hjerne.js roterer hjernen etter
   hvor langt man har kommet. Scroller man opp, roterer den
   tilbake. Uten JavaScript, WebGL eller med «redusert
   bevegelse» valgt vises stillbildet i stedet.
   ========================================================== */

.hjerne-seksjon {
  position: relative;
  height: 260vh;
  /* Nær sort, ikke marineblå: partikkellyset legges oppå flaten
     (additiv blanding), og jo mørkere grunn, desto mer gløder
     fargene. Må matche BAKGRUNN øverst i hjerne.js. */
  background: #05080F;

  /* DETTE er den eneste mørke flaten på hele sida. Ved å bytte de
     fire rollefargene her snur all tekst inni seksjonen av seg
     selv — ingen egne regler trengs. Se forklaringen i :root. */
  --flate:      #05080F;
  --tekst:      var(--sno);
  --tekst-svak: var(--dis);
  --aksent:     var(--is);
  --kant:       rgba(211, 201, 186, 0.14);
}

.hjerne-scene {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
}

.hjerne-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Stillbildet — reserven når 3D ikke kan vises */
.hjerne-stille {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.hjerne-sitat {
  position: absolute;
  inset-inline: 0;
  top: 14svh;    /* over hjernen, som svever i nedre to tredjedeler */
  z-index: 2;
  margin: 0;
  padding-inline: 1.5rem;
  text-align: center;
}

.hjerne-sitat .display {
  font-size: clamp(1.55rem, 3.4vw, 2.7rem);
  color: var(--tekst);
  line-height: 1.18;
}

.hjerne-sitat em { color: var(--is); }

/* Uten JavaScript, WebGL eller med «redusert bevegelse»: én rolig
   skjermhøyde med stillbildet. Aldri en tom, mørk flate. */
.hjerne-seksjon.uten-anim,
html:not(.js) .hjerne-seksjon { height: auto; }

.uten-anim .hjerne-scene,
html:not(.js) .hjerne-scene { position: relative; }

.uten-anim .hjerne-scene canvas,
html:not(.js) .hjerne-scene canvas { display: none; }

.uten-anim .hjerne-stille,
html:not(.js) .hjerne-stille { display: block; }

@media (max-width: 767px) {
  .hero-tekst { min-height: 64svh; padding-top: 6.5rem; }
  /* Kortere strekning på mobil — tommelen scroller i rykk */
  .hjerne-seksjon { height: 190vh; }
  .hjerne-sitat { top: 12svh; }
  /* Det faste linjeskiftet er satt for brede skjermer — på smale
     lar vi teksten brekke seg selv */
  .hjerne-sitat br { display: none; }
}

/* --- Felles: maske- og inntonings-grepene brukes av hero-en og
       kan brukes av andre seksjoner senere --- */

/* Overskriftslinjene skyves opp bak en maske ved innlasting */
.linje-maske { display: block; overflow: hidden; padding-bottom: 0.08em; }

.linje-maske > span {
  display: block;
  transform: translateY(115%);
}

.js .linje-maske > span { transition: transform 1.1s var(--ease); }
.js .lastet .linje-maske > span { transform: translateY(0); }

/* Uten JavaScript skal teksten bare stå der */
html:not(.js) .linje-maske > span { transform: none; }

/* Innhold som tones inn i rekkefølge ved innlasting */
.js .last-inn { opacity: 0; transform: translateY(20px); }
.js .lastet .last-inn {
  opacity: 1; transform: none;
  transition: opacity 0.9s ease var(--vent, 0s), transform 0.9s var(--ease) var(--vent, 0s);
}

/* ==========================================================
   SEKSJONER
   ========================================================== */

.seksjon { position: relative; padding: 7rem 0; overflow: hidden; }

/* Seksjonene deler samme flate farge nå. Skillet mellom dem gjøres med
   en hårfin strek i stedet for et fargeskift — roligere og mer presist
   enn å veksle mellom to blåtoner. */
.seksjon + .seksjon,
.seksjon + .manifest,
.manifest + .seksjon,
.seksjon + .avslutning,
.manifest + .avslutning { border-top: 1px solid var(--kant); }

@media (min-width: 768px) { .seksjon { padding: 10rem 0; } }

.seksjon h2 {
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  margin: 1.4rem 0 0;
  color: var(--tekst);
  max-width: 24ch;
}

.seksjon-topp { max-width: 42rem; margin-bottom: 4rem; }
.seksjon-topp .ingress { margin-top: 1.6rem; }

@media (min-width: 768px) { .seksjon-topp { margin-bottom: 6rem; } }

/* Inntoning når elementet kommer i syne */
.js .frem { opacity: 0; transform: translateY(38px); }
.js .frem.synlig {
  opacity: 1; transform: none;
  transition: opacity 0.85s ease var(--vent, 0s), transform 0.9s var(--ease) var(--vent, 0s);
}

/* ==========================================================
   MANIFEST — ordene tennes ett for ett mens du scroller
   ========================================================== */

/* Én setning, én hel skjerm, ingenting annet. Dette er sidas mest
   eksklusive rom — referansens rute 5,0: to linjer tekst på en hel
   flate. Størrelsen ER grepet; mellomstørrelser er der sider dør. */
.manifest {
  position: relative;
  overflow: hidden;
  min-height: 86svh;
  display: flex;
  align-items: center;
  padding: 6rem 0;
}

.manifest p.setning {
  font-size: clamp(2.2rem, 5.8vw, 5rem);
  line-height: 1.12;
  max-width: 62rem;
  margin: 0;
  color: var(--tekst);
}

/* Hvert ord starter nesten usynlig og tennes når det er din tur */
.manifest .ord {
  display: inline-block;
  opacity: 0.13;
  transform: translateY(8px);
  transition: opacity 0.1s linear, transform 0.1s linear;
}

/* Uten JS vises hele setningen med en gang */
html:not(.js) .manifest .ord { opacity: 1; transform: none; }

/* ==========================================================
   PROBLEMET — fire påstander, én linje hver
   ==========================================================
   Ingen avsnitt under linjene: kan noe sies med overskriften
   alene, strykes avsnittet. Linjene er forskjøvet i ulik høyde
   med VILJE — fire like rader hadde lest som en liste, dette
   leser som fire øyeblikk. Tallet står stort i gull. */

.problem-liste {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 7vh, 4.5rem);
}

.problem-linje {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.3vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.problem-linje { color: var(--tekst); }

.problem-tall {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1;
  color: var(--gull-mork);   /* lys gull forsvinner mot lys flate */
  flex-shrink: 0;
}

/* Forskyvningen — et bevisst valg, ikke tilfeldig rot */
.problem-linje:nth-child(2) { margin-left: 16%; }
.problem-linje:nth-child(3) { margin-left: 5%; }
.problem-linje:nth-child(4) { margin-left: 25%; }

@media (max-width: 767px) {
  .problem-linje:nth-child(2) { margin-left: 7%; }
  .problem-linje:nth-child(3) { margin-left: 2%; }
  .problem-linje:nth-child(4) { margin-left: 11%; }
}

/* ==========================================================
   TJENESTEVELGER — den store fargede boksen
   ==========================================================

   Hele boksen bader i tjenestens farge. Fargene per tjeneste
   settes med data-farge på .vboks — fire variabler per tjeneste:
     --boks    den mørke, mettede flaten
     --glod    det lysere feltet i midten, bak objektet
     --aksent  detaljfargen (etikett, aktive kanter)
     --tekst   nær-hvit stemt til flaten
   Kontrast er REGNET UT (WCAG): aksent mot boks 8,3–10,3 : 1,
   tekst mot boks 14–16 : 1. Aksentfarget tekst skal ALDRI stå
   oppå selve glødefeltet (der er kontrasten nede i 2,7).

   Tekst, pris og kallenavn ligger stablet i samme rutenett-celle
   (grid-area 1/1) og byttes med klasser fra velger.js — boksen
   beholder da samme høyde uansett hvilken tjeneste som vises.
   ========================================================== */

.vboks {
  position: relative;
  border-radius: 28px;
  padding: clamp(1.2rem, 2.6vw, 2.2rem) clamp(1.2rem, 3vw, 2.8rem);
  overflow: hidden;
  background: var(--boks);
  color: var(--tekst);
  transition: background 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.vboks[data-farge="0"] { --boks: #08243F; --glod: #1C6FA8; --aksent: #7FD4FF; --tekst: #F4FAFF; }
.vboks[data-farge="1"] { --boks: #052E2E; --glod: #0F7C76; --aksent: #5FE3D2; --tekst: #F0FFFC; }
.vboks[data-farge="2"] { --boks: #2C1F05; --glod: #A07214; --aksent: #F2C978; --tekst: #FFFAF0; }
.vboks[data-farge="3"] { --boks: #33101A; --glod: #9E2440; --aksent: #FF97A8; --tekst: #FFF4F5; }
.vboks[data-farge="4"] { --boks: #231038; --glod: #6A2E9C; --aksent: #C8A0FF; --tekst: #F9F4FF; }

/* Gløden: et mykt lys bak objektet i midten — et lys som løfter,
   ikke en skygge. Tones ned og opp av velger.js under byttet. */
.vboks-glod {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(58vw, 720px);
  aspect-ratio: 1.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--glod) 0%, transparent 68%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* --- Toppen: piler til venstre, piller i midten --- */

.vboks-topp {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.vboks-piler { display: flex; gap: 0.5rem; }

.vpil {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--tekst);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease);
}

.vpil:hover { border-color: var(--aksent); color: var(--aksent); transform: translateY(-1px); }

.vboks-piller {
  display: flex;
  gap: 0.4rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.vboks-piller::-webkit-scrollbar { display: none; }

.vpille {
  flex-shrink: 0;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.13);
  color: var(--tekst);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s, color 0.35s;
}

/* Den aktive pillen er hvit med mørk tekst — som i referansen */
.vpille[aria-selected="true"] { background: #FFFFFF; color: var(--boks); }
.vpille:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, 0.24); }

.vpil:focus-visible,
.vpille:focus-visible,
.vpanel-knapp:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 3px;
}

/* --- Kroppen: tekst | objekt | pris --- */

.vboks-kropp {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr minmax(180px, 21%);
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  align-items: center;
  margin-top: 1.6rem;
}

/* Venstre: stablet i samme celle, byttes med maskeglid */
.vboks-venstre { display: grid; }

.vpanel {
  grid-area: 1 / 1;
  visibility: hidden;
  overflow: hidden;
}
.vpanel.aktiv, .vpanel.ut { visibility: visible; }

/* Linjene glir opp og inn, forskjøvet — masken er panelets egen
   kant. Krysstoning er med vilje ikke brukt. */
.vpanel > * {
  transform: translateY(1.3em);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.4s ease;
}
.vpanel.aktiv > * { transform: none; opacity: 1; }
.vpanel.aktiv > *:nth-child(2) { transition-delay: 0.06s; }
.vpanel.aktiv > *:nth-child(3) { transition-delay: 0.12s; }
.vpanel.aktiv > *:nth-child(4) { transition-delay: 0.18s; }
.vpanel.ut > * { transform: translateY(-1.1em); opacity: 0; }

.vpanel-etikett {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aksent);
}

.vpanel-navn {
  margin: 0.55rem 0 0;
  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  color: var(--tekst);
}

.vpanel-tekst {
  margin: 0.9rem 0 0;
  max-width: 26ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--tekst);
  opacity: 0.82;
}

.vpanel-knapp {
  margin-top: 1.4rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--tekst);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.vpanel-knapp:hover { border-color: var(--aksent); color: var(--aksent); }

/* --- Midten: objektet. Går ut med liten rotasjon og skalering,
       det nye kommer inn samme vei — 500 ms, forskjøvet 120 ms
       etter fargen, slik at fargen leder og objektet følger. --- */

.vboks-scene {
  position: relative;
  min-height: clamp(300px, 40vh, 420px);
}

.vobj {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9) rotate(5deg);
  transition: opacity 0.5s var(--ease) 0.12s, transform 0.5s var(--ease) 0.12s;
}
.vobj.aktiv { opacity: 1; transform: none; }
.vobj.ut { transform: scale(0.9) rotate(-5deg); }

/* Svevet: perspektivet og den myke ovale skyggen under */
.vsvev {
  position: relative;
  transform: perspective(1300px) rotateY(-10deg) rotateX(4deg);
}

.vsvev::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2.6rem;
  height: 26px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.42), transparent 72%);
  filter: blur(7px);
}

/* Lysstrøket over flatene — et svakt, skrått gjenskinn */
.nettleser::after, .tilbudsark::after, .ankort-front::after, .telefon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%);
  pointer-events: none;
}

/* 1 — Nettleservinduet med ekte kundeforside */
.nettleser {
  position: relative;
  width: clamp(250px, 30vw, 390px);
  border-radius: 10px;
  overflow: hidden;
  background: #0D1626;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.nettleser-topp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
}

.nettleser-topp i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.nettleser-topp i:first-child { background: var(--aksent); }

.nettleser-adresse {
  margin-left: 8px;
  padding: 2px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

.nettleser img { display: block; width: 100%; height: auto; }

/* 2 — Chatpanelet. Prikkene som pulserer er den ENE tingen på
       sida som får bevege seg av seg selv — det er poenget med
       illustrasjonen. */
.chatobj {
  width: clamp(240px, 26vw, 330px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #06181B;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chatobj-topp {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.chatobj-topp i { width: 7px; height: 7px; border-radius: 50%; background: var(--aksent); }

.boble {
  max-width: 86%;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 0.76rem;
  line-height: 1.5;
}

.boble-kunde {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.boble-svar {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--aksent);
  color: #05282B;
}

/* Boblene kommer inn etter hverandre hver gang tjenesten velges.
   Uten JavaScript står de bare fremme. */
.js .vobj .boble { opacity: 0; transform: translateY(9px); }
.js .vobj.spill .boble { animation: boble-inn 0.45s var(--ease) forwards; }
.vobj.spill .b1 { animation-delay: 0.15s; }
.vobj.spill .b2 { animation-delay: 0.6s; }
.vobj.spill .b3 { animation-delay: 1.05s; }
.vobj.spill .b4 { animation-delay: 1.5s; }

@keyframes boble-inn { to { opacity: 1; transform: none; } }

.boble-skriver { display: flex; gap: 4px; padding: 10px 13px; }
.boble-skriver i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #05282B;
  animation: skriver 1.15s ease-in-out infinite;
}
.boble-skriver i:nth-child(2) { animation-delay: 0.18s; }
.boble-skriver i:nth-child(3) { animation-delay: 0.36s; }

@keyframes skriver {
  0%, 60%, 100% { transform: none; opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* 3 — Tilbudsarket. Summen telles opp av velger.js. */
.tilbudsark {
  position: relative;
  width: clamp(200px, 21vw, 260px);
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: #FFFDF6;
  color: #2C1F05;
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
}

.ark-topp {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(44, 31, 5, 0.8);
}

.ark-linje { height: 7px; border-radius: 4px; background: rgba(44, 31, 5, 0.12); margin-top: 13px; }
.ark-skille { margin-top: auto; border-top: 1px solid rgba(44, 31, 5, 0.2); }

.ark-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 11px;
}
.ark-sum span { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ark-sum strong { font-size: 1.3rem; font-weight: 600; }

.ark-stempel {
  margin-top: 12px;
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid #A07214;
  border-radius: 999px;
  color: #A07214;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* 4 — Anmeldelseskortene, stablet i dybden */
.kortstabel { position: relative; width: clamp(230px, 24vw, 300px); height: 180px; }

.ankort {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #FFFCFC;
}
.ankort-bak1 { transform: translate(14px, -14px) scale(0.97); opacity: 0.5; }
.ankort-bak2 { transform: translate(28px, -28px) scale(0.94); opacity: 0.26; }
.ankort-front { position: absolute; padding: 16px 18px; color: #33101A; }

.stjerner { display: flex; align-items: center; gap: 10px; }
/* Stjernene ligger på et HVITT kort, ikke på den fargede boksen —
   derfor den nedstemte gulltonen, ikke den lyse. */
.stjerner span { color: var(--gull-mork); font-size: 1.1rem; letter-spacing: 3px; }
.stjerner strong { font-size: 1.25rem; font-weight: 600; }

.ankort-linje { height: 7px; border-radius: 4px; background: rgba(51, 16, 26, 0.13); margin-top: 13px; }

/* 5 — Telefonen med innleggsrutenettet */
.telefon {
  position: relative;
  width: clamp(150px, 15vw, 180px);
  aspect-ratio: 9 / 17;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #140B22;
  padding: 20px 11px 12px;
}

.telefon-hakk {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.telefon-rutenett {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  height: 100%;
  align-content: start;
}

.telefon-rutenett i { aspect-ratio: 1; border-radius: 5px; background: rgba(200, 160, 255, 0.16); }
.telefon-rutenett i:nth-child(1) { background: var(--aksent); opacity: 0.85; }
.telefon-rutenett i:nth-child(5) { background: rgba(208, 168, 104, 0.55); }
.telefon-rutenett i:nth-child(6) { background: rgba(200, 160, 255, 0.34); }
.telefon-rutenett i:nth-child(9) { background: rgba(255, 255, 255, 0.22); }
.telefon-rutenett i:nth-child(11) { background: rgba(200, 160, 255, 0.4); }

/* --- Høyre kant: prisen. Ingen overstrøket «førpris» — det
       finnes ingen rabatt, og det skal ikke late som. --- */

.vboks-hoyre { display: grid; justify-items: end; text-align: right; }

.vpris {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  visibility: hidden;
  overflow: hidden;
}
.vpris.aktiv, .vpris.ut { visibility: visible; }

.vpris > * {
  transform: translateY(1.3em);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.4s ease;
}
.vpris.aktiv > * { transform: none; opacity: 1; }
.vpris.aktiv > *:nth-child(2) { transition-delay: 0.06s; }
.vpris.aktiv > *:nth-child(3) { transition-delay: 0.12s; }
.vpris.ut > * { transform: translateY(-1.1em); opacity: 0; }

.vpris-tall {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.9rem);
  line-height: 1;
  color: var(--tekst);
}

.vpris-drift { margin-top: 0.45rem; font-size: 0.76rem; opacity: 0.75; }

.vspes {
  margin: 1.3rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vspes div {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 0.6rem;
  min-width: 11rem;
}

.vspes dt {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aksent);
}

.vspes dd { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.9; }

/* «Se hva den koster»-knappen gir prisen et lite gyllent blink */
.vpris.puls .vpris-tall { animation: pris-puls 0.9s ease; }

@keyframes pris-puls {
  30% { text-shadow: 0 0 26px var(--aksent); color: var(--aksent); }
}

/* --- Nederst i midten: kallenavnet --- */

.vboks-bunn { display: grid; justify-items: center; margin-top: 0.8rem; }

.vkallenavn {
  grid-area: 1 / 1;
  margin: 0;
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.08;
  text-align: center;
  color: var(--tekst);
  opacity: 0;
  transform: translateY(0.7em);
  transition: transform 0.55s var(--ease), opacity 0.4s ease;
  visibility: hidden;
}
.vkallenavn.aktiv { opacity: 0.85; transform: none; visibility: visible; }
.vkallenavn.ut { visibility: visible; opacity: 0; transform: translateY(-0.6em); }

/* --- Mobil: alt i én kolonne, objektet først --- */

@media (max-width: 880px) {
  .vboks-topp { display: flex; flex-wrap: wrap; }

  /* Pillene er hovednavigasjonen i velgeren — de må kunne treffes
     med tommelen, ikke bare med musepeker. */
  .vpille { padding: 0.68rem 1.05rem; }

  .vboks-kropp {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 1.2rem;
  }

  .vboks-scene { order: -1; min-height: 250px; }

  .vboks-venstre { justify-items: center; text-align: center; }
  .vpanel-tekst { margin-inline: auto; }

  .vboks-hoyre { justify-items: center; text-align: center; }
  .vpris { align-items: center; }
  .vspes { display: none; }   /* tre stablede rader til blir en vegg på mobil */

  .vboks-glod { width: 120vw; top: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .vboks, .vpanel > *, .vpris > *, .vkallenavn, .vobj, .vpille, .vpil { transition: none; }
  .vobj .boble { opacity: 1; transform: none; animation: none; }
  .boble-skriver i { animation: none; }
}

/* ==========================================================
   NETTLESER-RAMMENE — skjermbildene av leverte sider
   ========================================================== */

/* --- Nettside-ramme ---
   Ekte skjermbilde av siden vi leverte, vist i en nettleser-ramme.
   Skjermbildene er tatt med Edge i headless-modus, ikke hentet fra
   kundenes bildearkiv — det er vårt eget arbeid som vises. */
.nettside-ramme {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(211, 201, 186, 0.14);
  background: #0B1119;
  display: flex;
  flex-direction: column;
  transition: transform 1.1s var(--ease), border-color 0.5s, box-shadow 0.6s;
}

/* Nettleserlinja på toppen */
.nettside-topp {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.nettside-topp i {
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.nettside-url {
  margin-left: 0.45rem;
  flex: 1;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: rgba(211, 201, 186, 0.45);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 100px;
  padding: 0.16rem 0.6rem;
  white-space: nowrap;
  overflow: hidden;
}

/* Selve skjermbildet. Toppstilt, slik at nettsidens hero alltid er synlig
   også når høydeforholdet må beskjæres. */
.nettside-skjerm {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #0B1119;
}

.nettside-skjerm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.6s var(--ease);
}

/* ==========================================================
   ARBEID — rammene bryter ut av rutenettet (forside + arbeid.html)
   ==========================================================
   Gjenbruker nettleser-rammen fra blokken over, men lar den
   stikke ut over sidekanten i stedet for å stå pent i midten.
   Maks to linjer tekst per prosjekt — skjermbildet ER teksten. */

.arbeid-prosjekt {
  display: grid;
  gap: 1.8rem;
  align-items: end;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}

.arbeid-prosjekt:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .arbeid-prosjekt { grid-template-columns: 8fr 4fr; gap: 3.5rem; }
  .arbeid-prosjekt.speilet { grid-template-columns: 4fr 8fr; }
  .arbeid-prosjekt.speilet .arbeid-ramme { order: 2; }
  .arbeid-prosjekt.speilet .arbeid-tekst { order: 1; text-align: right; }
  .arbeid-prosjekt.speilet .arbeid-tekst .eyebrow { justify-content: flex-end; }

  /* Utbruddet: rammen skyves forbi kanten av innholdsfeltet.
     Seksjonen klipper selv (overflow-x), så det blir ingen
     vannrett rulling — se kommentaren øverst i fila. */
  .bryt-venstre { margin-left: calc(-1 * clamp(2rem, 9vw, 9rem)); }
  .bryt-hoyre   { margin-right: calc(-1 * clamp(2rem, 9vw, 9rem)); }
}

.arbeid-ramme { aspect-ratio: 16 / 9.5; }

.arbeid-prosjekt:hover .nettside-ramme {
  transform: translateY(-6px);
  border-color: rgba(27, 127, 181, 0.45);
  box-shadow: 0 26px 60px -22px rgba(11, 27, 51, 0.35);
}

.arbeid-prosjekt:hover .nettside-skjerm img { transform: scale(1.04); }

.arbeid-tekst h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.8rem 0 0;
}

.arbeid-tekst h3 { color: var(--tekst); }

.arbeid-linje { margin: 0.9rem 0 0; font-size: 0.95rem; max-width: 26rem; }

.arbeid-prosjekt.speilet .arbeid-linje { margin-left: auto; }

/* Den ærlige merknaden over konseptlista på arbeid.html */
.konsept-merknad { margin: 1rem 0 0; font-size: 0.88rem; opacity: 0.75; }

/* ==========================================================
   HVORFOR NORDVO — tre setninger som liste i stor typografi
   ========================================================== */

.hvorfor-liste {
  margin-top: clamp(2.2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--kant-lys);
}

.hvorfor-linje {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 4.5vh, 2.8rem) 0;
  border-bottom: 1px solid var(--kant-lys);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hvorfor-linje { color: var(--tekst); }

.hvorfor-tall {
  font-size: 0.95rem;
  color: var(--gull-mork);   /* liten tekst — trenger full kontrast */
  flex-shrink: 0;
}

/* ==========================================================
   OM LYST OG MØRKT PÅ SIDA
   ==========================================================
   Her lå det tidligere en «.lys»-klasse med et tjuetalls regler
   som farget om en seksjon fra mørk til lys. Den er fjernet:
   hele sida er nå lys som utgangspunkt, så reglene sa bare det
   samme som grunnstilen én gang til.

   Den ENESTE mørke flaten er seksjonen med hjernen. Den bytter de
   fire rollefargene (--flate, --tekst, --tekst-svak, --aksent), og
   da snur alt innholdet der av seg selv. Se forklaringen i :root
   øverst i fila.

   Skal du gjøre en ny seksjon mørk, kopier de fire linjene fra
   «.hjerne-seksjon» — ikke lag en ny omfargingsklasse.
   ========================================================== */

/* ==========================================================
   AVSLUTNING
   ========================================================== */

.avslutning {
  position: relative;
  text-align: center;
  padding: 8rem 0;
  overflow: hidden;
}

@media (min-width: 768px) { .avslutning { padding: 11rem 0; } }

.avslutning h2 {
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  margin: 0 auto;
  max-width: 18ch;
  color: var(--tekst);
}

.avslutning .ingress { margin: 2rem auto 0; }
.avslutning .knapperad {
  margin-top: 2.8rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.avslutning .eyebrow { display: flex; justify-content: center; }

/* ==========================================================
   BUNN
   ========================================================== */

.bunn {
  border-top: 1px solid var(--kant);
  padding: 4rem 0 3rem;
  background: var(--flate);
}

.bunn-topp {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.bunn-slagord {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.15;
  margin: 1.2rem 0 0;
  max-width: 18rem;
  color: var(--tekst);
}

.bunn-slagord em { font-style: normal; color: var(--aksent); }

.bunn-lenker { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* Luft over og under hver lenke: uten den er trykkflaten bare 20 px
   høy, og fem lenker på rad blir umulige å treffe med tommelen. */
.bunn-lenker a {
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 27, 51, 0.7);
  transition: color 0.3s;
  padding: 0.5rem 0;
}

.bunn-lenker a:hover { color: var(--aksent); }

/* --- «Følg oss» ---
   Ikonene er tegnet som SVG rett i HTML-en (ingen ikonpakke, ingen
   ekstra fil å laste). De arver fargen fra lenken via currentColor,
   så de snur av seg selv hvis flaten en gang blir mørk.
   Sirkelen er 44 px = tommelvennlig trykkflate uten ekstra padding. */
.folg-oss {
  margin-top: 2rem;
}

.folg-tittel {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-svak);
  margin: 0 0 0.9rem;
}

.folg-lenker { display: flex; gap: 0.7rem; }

.folg-lenker a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kant);
  color: var(--tekst-svak);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              transform 0.35s var(--ease);
}

.folg-lenker a:hover,
.folg-lenker a:focus-visible {
  color: var(--aksent);
  border-color: var(--aksent);
  transform: translateY(-2px);
}

.folg-lenker svg { width: 19px; height: 19px; display: block; }

.bunn-under {
  border-top: 1px solid var(--kant);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  /* Var rgba(..., 0.5), som ble #848B95 mot flaten — 3,29:1, under kravet.
     Halvgjennomsiktig svart på lys flate treffer nesten alltid for lyst;
     derfor en fast farge her i stedet for en dekkgrad. */
  color: #646E7A;
}

/* ==========================================================
   TJENESTEMENYEN — tjenester.html
   ==========================================================
   Hele sida er en MENY, ikke en katalog: fem navn i stor
   typografi mot nesten svart flate. Ved hover og tastaturfokus
   tar linja tjenestens aksentfarge (samme fem som i velgeren),
   prisen toner inn til høyre for navnet, og de andre linjene
   dempes. Klikk går til velgeren på forsiden, på riktig
   tjeneste (?tjeneste=N — velger.js leser den ved lasting). */

.tmeny-seksjon {
  background: var(--flate);
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 8rem 0 5rem;
}

.tmeny-tittel {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--tekst-svak);
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
}

.tmeny { display: flex; flex-direction: column; }

.tmeny-linje {
  --ak: var(--aksent);
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 8.2vh, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tekst);
  text-decoration: none;
  padding: clamp(0.8rem, 2.2vh, 1.4rem) 0;
  transition: color 0.45s, opacity 0.45s;
}

/* MERK at dette IKKE er de samme fem fargene som i velgeren på
   forsiden. Der ligger de på en mørk boks, og der er pastellene
   riktige. Her ligger de på den lyse flaten, og pastellene ville
   hatt kontrast 1,5–2,0 — altså praktisk talt usynlige. Dette er
   de samme fem fargene stemt ned til lesbarhet (4,1–8,1). */
.tmeny-linje[data-tjeneste="0"] { --ak: #1C6FA8; }
.tmeny-linje[data-tjeneste="1"] { --ak: #0F7C76; }
.tmeny-linje[data-tjeneste="2"] { --ak: #8C6210; }
.tmeny-linje[data-tjeneste="3"] { --ak: #9E2440; }
.tmeny-linje[data-tjeneste="4"] { --ak: #6A2E9C; }

.tmeny-linje:hover,
.tmeny-linje:focus-visible { color: var(--ak); }

/* Én linje våkner — resten trer et halvt steg tilbake */
.tmeny:hover .tmeny-linje:not(:hover),
.tmeny:focus-within .tmeny-linje:not(:focus-visible) { opacity: 0.35; }

.tmeny-navn { position: relative; display: inline-block; }

.tmeny-pris {
  position: absolute;
  left: calc(100% + 1.4rem);
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  color: var(--tekst-svak);
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.tmeny-linje:hover .tmeny-pris,
.tmeny-linje:focus-visible .tmeny-pris {
  opacity: 1;
  transform: translateY(-50%);
}

.tmeny-under {
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  color: var(--tekst-svak);
  font-size: 0.95rem;
}

.tmeny-knapp { margin: 1.5rem 0 0; }

@media (max-width: 767px) {
  .tmeny-linje { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  /* Mobil har ingen hover — prisen står alltid, liten, under navnet */
  .tmeny-pris {
    position: static;
    display: block;
    opacity: 1;
    transform: none;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: rgba(11, 27, 51, 0.6);
  }
}

/* ==========================================================
   UNDERSIDER
   ========================================================== */

.sidehode {
  position: relative;
  padding: 11rem 0 5rem;
  overflow: hidden;
  /* Flat farge, ingen glød. Se kommentaren i :root. */
  background: var(--flate);
  border-bottom: 1px solid var(--kant);
}

.sidehode h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin: 1.4rem 0 0;
  color: var(--tekst);
  max-width: 18ch;
}

.sidehode .ingress { margin-top: 1.8rem; }

/* Tjenesteliste på undersiden */
.tjeneste {
  padding: 3rem 0;
  border-bottom: 1px solid var(--kant);
}

.tjeneste:first-of-type { border-top: 1px solid var(--kant); }

.tjeneste-topp {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tjeneste h2,
.tjeneste h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  margin: 0;
  color: var(--tekst);
}

.tjeneste p { color: var(--tekst-svak); margin: 0; max-width: 40rem; font-size: 0.95rem; }

/* ==========================================================
   KONTAKTSIDE
   ========================================================== */

.kontakt-oppsett { display: grid; grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 900px) {
  .kontakt-oppsett { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}

.felt { margin-bottom: 1.3rem; }

.felt label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 27, 51, 0.72);
  margin-bottom: 0.55rem;
}

/* Feltene er hvite med en tydelig kant. På lys flate må kanten
   BÆRE formen — uten den flyter feltet ut i bakgrunnen og man ser
   ikke hvor man skal skrive. */
.felt input,
.felt textarea,
.felt select {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(11, 27, 51, 0.2);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--tekst);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.felt input:focus,
.felt textarea:focus,
.felt select:focus {
  outline: none;
  border-color: var(--aksent);
  box-shadow: 0 0 0 3px rgba(27, 127, 181, 0.18);
}

.felt textarea { min-height: 9rem; resize: vertical; }

.hjelpetekst { font-size: 0.82rem; color: rgba(11, 27, 51, 0.75); margin-top: 0.9rem; }

.info-boks {
  border-top: 1px solid var(--kant);
  padding: 1.6rem 0;
}

.info-boks h2,
.info-boks h3 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(11, 27, 51, 0.75);
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-weight: 500;
}

.info-boks p { margin: 0; color: var(--tekst-svak); font-size: 0.95rem; }

/* E-post og telefon er det folk faktisk trykker på — de får egen
   høyde så de kan treffes med tommelen, ikke bare med musepeker. */
.info-boks a {
  display: inline-block;
  padding: 0.45rem 0;
  color: var(--aksent);
  text-decoration: none;
  word-break: break-word;
}
.info-boks a:hover { text-decoration: underline; }

/* En lenke midt inne i en tekst. Litt luft over og under så den kan
   treffes med tommelen — men ikke så mye at linjeavstanden sprekker. */
.tekstlenke {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--aksent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================
   TILGJENGELIGHET
   ========================================================== */

:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respekter brukere som har slått av animasjoner i systemet sitt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .frem, .js .last-inn { opacity: 1 !important; transform: none !important; }
  .js .linje-maske > span { transform: none !important; }
  .manifest .ord { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   CHATBOT-WIDGET
   Alt her styres av chat.js, som injiserer HTML-en selv —
   hver side trenger bare <script src="chat.js"> for å få dette.
   ========================================================== */

#chat-knapp {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 200;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  border: none;
  background: var(--is);
  color: var(--blekk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(79, 195, 247, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

#chat-knapp:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(79, 195, 247, 0.7); }
#chat-knapp svg { width: 1.5rem; height: 1.5rem; }

#chat-panel {
  /* Widgeten ligger på den LYSE siden, men er selv en MØRK flate.
     Derfor må de fire rollefargene settes på nytt her — samme grep
     som .hjerne-seksjon bruker. Uten dette arver den tekstfargene
     for lys flate, og teksten blir marineblå på marineblå (1:1). */
  --flate:      var(--blekk-2);
  --tekst:      var(--sno);
  --tekst-svak: var(--dis);
  --aksent:     var(--is);
  --kant:       rgba(211, 201, 186, 0.14);
  position: fixed;
  right: 1.4rem;
  bottom: 5.4rem;
  z-index: 200;
  width: min(23rem, calc(100vw - 2.8rem));
  height: min(32rem, calc(100vh - 8rem));
  background: var(--blekk-2);
  border: 1px solid rgba(211, 201, 186, 0.14);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}

/* #chat-panel sin egen display:flex har høyere presedens enn nettleserens
   innebygde regel for [hidden], så uten denne linjen fortsetter panelet å
   vises selv etter at JS setter panel.hidden = true — X-knappen "virker"
   i koden, men gjør ingenting synlig. */
#chat-panel[hidden] { display: none; }

.chat-hode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: var(--blekk);
  color: var(--tekst);
  font-family: var(--serif);
  font-size: 1.15rem;
  border-bottom: 1px solid rgba(211, 201, 186, 0.12);
  flex-shrink: 0;
}

#chat-lukk {
  background: none;
  border: none;
  color: var(--tekst-svak);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  /* Minst 24x24 px trykkflate — kravet til klikkmål. */
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

#chat-lukk:hover { color: var(--tekst); }

#chat-meldinger {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.melding {
  max-width: 82%;
  padding: 0.6rem 0.85rem;
  border-radius: 0.8rem;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.melding-bot {
  align-self: flex-start;
  background: var(--blekk-3);
  color: var(--tekst);
  border-bottom-left-radius: 0.2rem;
}

.melding-bruker {
  align-self: flex-end;
  background: var(--is);
  color: var(--blekk);
  border-bottom-right-radius: 0.2rem;
}

.melding-typer { color: var(--tekst-svak); font-style: italic; }

#chat-skjema {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem;
  border-top: 1px solid rgba(211, 201, 186, 0.12);
  flex-shrink: 0;
}

#chat-felt {
  flex: 1;
  background: var(--blekk);
  border: 1px solid rgba(211, 201, 186, 0.16);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  color: var(--tekst);
  font-family: inherit;
  font-size: 0.88rem;
}

/* Fokusringen skal være synlig — outline: none her slo av den globale
   :focus-visible-regelen, og erstatningen var for svak til å sees. */
#chat-felt:focus-visible { outline: 2px solid var(--is); outline-offset: 2px; border-color: var(--is); }

#chat-skjema button {
  background: var(--is);
  color: var(--blekk);
  border: none;
  border-radius: 0.6rem;
  padding: 0 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

@media (max-width: 480px) {
  #chat-panel { right: 0.7rem; bottom: 5rem; }
  #chat-knapp { right: 0.9rem; bottom: 0.9rem; }
}

/* ==========================================================
   SAMTYKKE-BANNER
   Bevisst plassert i motsatt hjørne av chat-knappen, slik at
   de to aldri kolliderer visuelt.
   ========================================================== */

#samtykke-banner {
  /* Widgeten ligger på den LYSE siden, men er selv en MØRK flate.
     Derfor må de fire rollefargene settes på nytt her — samme grep
     som .hjerne-seksjon bruker. Uten dette arver den tekstfargene
     for lys flate, og teksten blir marineblå på marineblå (1:1). */
  --flate:      var(--blekk-2);
  --tekst:      var(--sno);
  --tekst-svak: var(--dis);
  --aksent:     var(--is);
  --kant:       rgba(211, 201, 186, 0.14);
  position: fixed;
  left: 1.2rem; bottom: 1.2rem;
  z-index: 210;
  width: min(22rem, calc(100vw - 2.4rem));
  background: var(--blekk-2);
  border: 1px solid rgba(208, 168, 104, 0.35);
  border-radius: 0.9rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.6);
}

#samtykke-banner p {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--tekst-svak);
}

#samtykke-banner a { color: var(--is); text-decoration: underline; }

.samtykke-knapper { display: flex; gap: 0.6rem; justify-content: flex-end; }

.samtykke-knapper button {
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(211, 201, 186, 0.2);
  background: transparent;
  color: var(--tekst-svak);
}

#samtykke-ja {
  background: var(--gull);
  color: var(--blekk);
  border-color: transparent;
  font-weight: 600;
}

.samtykke-knapper button:hover { border-color: var(--is); color: var(--tekst); }
#samtykke-ja:hover { color: var(--blekk); border-color: transparent; background: var(--gull-lys); }

/* Er nå en <button> i stedet for en tom lenke — må derfor nullstilles
   så den fortsatt ser ut som teksten rundt seg i bunnteksten. */
#administrer-samtykke {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(211, 201, 186, 0.35);
}

#samtykke-banner:focus { outline: none; }

@media (max-width: 480px) {
  /* Banneret blir fullbredt her, så det må heves over chat-knappen —
     ellers ville de to ligget oppå hverandre i samme hjørne. */
  #samtykke-banner { left: 0.7rem; right: 0.7rem; width: auto; bottom: 5.6rem; }
}

/* ==========================================================
   UNIVERSELL UTFORMING — hopp-lenka
   Usynlig til den får fokus med Tab — første stopp på siden.
   ========================================================== */
.hopp-lenke {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1000;
  padding: 0.7rem 1.2rem;
  background: var(--is-dyp);
  color: #fff;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-250%);
}

.hopp-lenke:focus {
  transform: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Målet for hopp-lenka skal ikke få egen fokusring —
   det er innholdet som får fokus, ikke en synlig boks */
main#innhold:focus { outline: none; }