@charset "utf-8";
/* =====================================================================
   GETONNET.NO – FORSIDE
   Én farge, én skrift, hvitt papir og svart blekk. Filmen i toppen sees
   gjennom G-en fra logoen; rulling åpner vinduet til hele skjermen.

   Innhold
     1  Skrift og designtokens      8  Kapittel 02 – arbeider
     2  Grunnstiler og typografi    9  Kapittel 03 – metode
     3  Knapper og lenker          10  Kapittel 04 – om
     4  Hopp-til-innhold og fokus  11  Kapittel 05 – kontakt og skjema
     5  Topplinje og meny          12  Bunnlinje
     6  Hero «Vinduet»             13  Redusert bevegelse og utskrift
     7  Kapittel 01 – tjenester
   ===================================================================== */


/* =====================================================================
   1. SKRIFT OG DESIGNTOKENS
   ===================================================================== */

/* Schibsted Grotesk, tegnet i Norge. Selvhostet: ingen forespørsel til
   Google, ingen overføring av IP-adresser til tredjepart, og én fil
   dekker alle vektene 400–800. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../font/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../font/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* Rødt.
     Logoens rødt er #EB5757. Mot hvit tekst gir den 3,5:1, som er under
     kravet i WCAG 2.1 AA (4,5:1) – og siden har hvit tekst på rødt både
     i toppen og i kontaktkapittelet. --rod er derfor samme rødtone et
     hakk dypere: 4,7:1 mot hvitt, og 4,7:1 som tekstfarge på hvitt.
     Skal logofargen brukes eksakt likevel: sett --rod til #EB5757 her,
     og hold all hvit tekst på rødt på minst 24px eller 19px halvfet. */
  --rod: #D63834;
  --rod-dyp: #B22E2A;
  /* på svart bunn er det omvendt: logoens lysere rødt gir 5,5:1 mot
     #101014, mens den dypere bare gir 4,0:1. Derfor brukes den her. */
  --rod-lys: #EB5757;

  --blekk: #101014;
  --papir: #fff;
  --blekk-2: rgba(16, 16, 20, .62);
  --blekk-3: rgba(16, 16, 20, .8);
  --linje: rgba(16, 16, 20, .14);
  --hvit-2: rgba(255, 255, 255, .74);
  --hvit-linje: rgba(255, 255, 255, .34);

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
  --topp: 72px;
  --rund: 12px;
}

@media (max-width: 899px) { :root { --topp: 60px; } }


/* =====================================================================
   2. GRUNNSTILER OG TYPOGRAFI
   ===================================================================== */

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

html {
  /* ankre skal ikke havne bak den faste topplinja */
  scroll-padding-top: calc(var(--topp) + 16px);
  -webkit-text-size-adjust: 100%;
}
/* Myk rulling bare for klikk inne på siden. Klassen settes av skriptet
   etter at siden er lastet, slik at en dyplenke (/#kontakt) hopper rett
   dit i stedet for å animere seg gjennom hele siden ved ankomst. */
html.rull-mykt { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--blekk);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* leses av skjermlesere, vises ikke */
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.grid { width: min(var(--maxw), 100% - var(--pad) * 2); margin-inline: auto; }

.h1 {
  font-size: clamp(42px, 6.4vw, 96px);
  font-weight: 700; line-height: .98; letter-spacing: -.035em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(34px, 4.6vw, 66px);
  font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
  text-wrap: balance;
}
.ingress {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5; color: var(--blekk-2); max-width: 620px;
}
.overlinje {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
}
.overlinje::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }

.kap { padding: clamp(104px, 10vw, 140px) 0; }
.kap__nr {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: .14em;
  color: var(--rod); margin-bottom: 18px;
}
.kap__topp {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  margin-bottom: clamp(44px, 5vw, 72px);
}
@media (min-width: 900px) {
  .kap__topp--todelt { grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; }
  .kap__topp--todelt .ingress { padding-top: .4em; }
}


/* =====================================================================
   3. KNAPPER OG LENKER
   ===================================================================== */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 26px; border-radius: 999px;
  font-weight: 600; font-size: 17px; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.knapp:hover { transform: translateY(-1px); }
.knapp svg { width: 16px; height: 16px; flex: none; }
.knapp--hvit { background: #fff; color: var(--blekk); }
.knapp--hvit:hover { background: #f1f1f1; }
.knapp--kant { border-color: var(--hvit-linje); color: #fff; }
.knapp--kant:hover { background: rgba(255, 255, 255, .14); }
.knapp--rod { background: var(--rod); color: #fff; }
.knapp--rod:hover { background: var(--rod-dyp); }

.lenke {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 18px;
  padding-bottom: 4px; border-bottom: 1.5px solid currentColor;
}
.lenke svg { width: 18px; height: 18px; transition: transform .2s ease; }
.lenke:hover svg { transform: translateX(4px); }


/* =====================================================================
   4. HOPP-TIL-INNHOLD OG FOKUS
   ===================================================================== */

.hopp {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: #fff; color: var(--blekk); font-weight: 600;
  transform: translateY(-160%); transition: transform .18s ease;
}
.hopp:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--fokus, currentColor);
  outline-offset: 3px;
  border-radius: 4px;
}
/* på rødt og på svart er hvit fokusring det som synes */
.topp :focus-visible, .meny :focus-visible,
.kontakt :focus-visible, .metode :focus-visible,
.hero__etter :focus-visible { --fokus: #fff; }


/* =====================================================================
   5. TOPPLINJE OG MENY
   ===================================================================== */

.topp {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--topp); background: var(--rod); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--pad);
  transition: transform .28s ease;
}
.topp--skjult { transform: translateY(-100%); }
/* tabber noen inn i en skjult topplinje, skal den komme fram igjen */
.topp--skjult:focus-within { transform: none; }

.logo { display: block; width: clamp(150px, 14vw, 190px); height: auto; color: #fff; }
.topp__merke { display: flex; align-items: center; min-height: 44px; }

.topp__nav { display: flex; align-items: center; gap: 4px; }
.topp__nav > a, .ned > a, .ned__knapp {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font-weight: 600; font-size: 15px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer;
}
.topp__nav > a:hover, .ned > a:hover, .ned__knapp:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ned > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* hovedknappen: kontakt, hvit på rødt */
.topp__cta { margin-left: 8px; background: #fff !important; color: var(--blekk) !important; border-radius: 999px; padding: 0 18px !important; }
.topp__cta:hover { background: #f1f1f1 !important; text-decoration: none !important; }

/* Nedtrekk «Verktøy». Åpnes med klikk (og med musepeker på desktop),
   lukkes med Esc, klikk utenfor eller når fokus forlater det. */
.ned { position: relative; }
.ned__pil { width: 14px; height: 14px; transition: transform .18s ease; }
.ned[data-apen="ja"] .ned__pil { transform: rotate(180deg); }
.ned__panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: none; grid-template-columns: 1fr; gap: 2px; width: 340px; padding: 8px;
  background: #fff; color: var(--blekk); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 16, 20, .22);
}
.ned[data-apen="ja"] .ned__panel { display: grid; }
/* pila på panelet peker på knappen */
.ned__panel::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
  background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.ned__panel a { display: grid; gap: 2px; padding: 11px 12px; border-radius: 9px; }
.ned__panel a:hover, .ned__panel a:focus-visible { background: #f3f2ef; }
.ned__panel b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ned__panel span { font-size: 14px; color: var(--blekk-2); line-height: 1.4; }
.ned__panel a:focus-visible { outline-color: var(--blekk); }

/* menyknapp – vises bare på smale skjermer */
.meny__knapp {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px 0 16px;
  background: none; border: 1.5px solid var(--hvit-linje); border-radius: 999px;
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.meny__strek { display: block; width: 18px; height: 10px; position: relative; }
.meny__strek::before, .meny__strek::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; transition: transform .22s ease, top .22s ease;
}
.meny__strek::before { top: 0; }
.meny__strek::after { top: 8px; }
[aria-expanded="true"] .meny__strek::before { top: 4px; transform: rotate(45deg); }
[aria-expanded="true"] .meny__strek::after { top: 4px; transform: rotate(-45deg); }

.meny {
  position: fixed; inset: 0; z-index: 55;
  background: var(--rod); color: #fff;
  padding: calc(var(--topp) + 32px) var(--pad) 40px;
  display: grid; align-content: start; gap: 4px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.meny[data-apen="ja"] { opacity: 1; visibility: visible; transform: none; }
.meny a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  border-bottom: 1px solid var(--hvit-linje);
}
.meny a svg { width: 22px; height: 22px; opacity: .8; }
.meny__bunn { margin-top: 28px; display: grid; gap: 6px; font-size: 17px; font-weight: 500; }
.meny__bunn a { font-size: 17px; font-weight: 600; padding: 10px 0; border: 0; justify-content: flex-start; gap: 10px; }
/* verktøyene som egen gruppe i mobilmenyen */
.meny__tittel { display: block; margin-top: 26px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.meny__gruppe a { font-size: 20px; padding: 12px 0; }

@media (max-width: 899px) {
  .topp__nav { display: none; }
  .meny__knapp { display: inline-flex; }
}
/* når menyen er åpen låses rullingen */
body[data-meny="apen"] { overflow: hidden; }


/* =====================================================================
   6. HERO «VINDUET»
   Seksjonen er 220 skjermhøyder høy. Scenen er sticky og fyller skjermen.
   Filmen ligger under alt og maskeres av G-en (mask-image). Skriptet
   regner rulleposisjon om til --p (0–1): G-en vokser og glir mot midten,
   og den røde flaten toner bort til filmen fyller hele skjermen.
   ===================================================================== */

.hero { position: relative; height: 220vh; height: 220svh; background: var(--rod); color: #fff; }
.scene {
  --p: 0;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--rod);
}

.film {
  position: absolute; inset: 0; background: var(--blekk);
  --gw: 0px; --gx: 0px; --gy: 0px; --a: 0;
  -webkit-mask-image: var(--g-maske), linear-gradient(rgba(0, 0, 0, var(--a)), rgba(0, 0, 0, var(--a)));
  mask-image: var(--g-maske), linear-gradient(rgba(0, 0, 0, var(--a)), rgba(0, 0, 0, var(--a)));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--gw) auto, 100% 100%; mask-size: var(--gw) auto, 100% 100%;
  -webkit-mask-position: var(--gx) var(--gy), 0 0; mask-position: var(--gx) var(--gy), 0 0;
}
/* G-en fra logoen, som maske */
.film {
  --g-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='67 59 270 282'%3E%3Cpath d='M209.427 340.928C131.166 340.928 67.084 283.65 67.084 200.286C67.084 116.356 132.868 59.0781 209.427 59.0781C245.722 59.0781 278.045 70.4201 301.864 91.4028L267.271 129.966C252.527 119.758 233.245 112.386 213.396 112.386C163.491 112.386 127.197 148.68 127.197 199.719C127.197 250.759 162.357 287.053 209.994 287.053C246.289 287.053 271.24 274.01 279.181 239.417H213.963V190.646H331.353C343.829 283.65 283.717 340.928 209.427 340.928Z'/%3E%3C/svg%3E");
}

/* ved p=0 er filmen litt forstørret og skjøvet, så pult og stol ligger bak
   G-en; alt går tilbake til null før den røde flaten er borte */
.film video, .film img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: translateX(calc(clamp(0, 1 - var(--p) * 1.6, 1) * 9%)) scale(calc(1.18 - var(--p) * .18));
  transform-origin: 60% 50%;
}
/* stillbildet ligger under filmen og vises når filmen ikke spilles */
.film img { position: absolute; inset: 0; }
.film video { position: relative; z-index: 1; }
.film[data-film="av"] video { display: none; }

.film__skygge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(16, 16, 20, .64), rgba(16, 16, 20, 0) 48%);
  opacity: clamp(0, (var(--p) - .6) * 3, 1);
}

.hero__tekst {
  position: absolute; z-index: 4;
  left: var(--pad); top: calc(50% + var(--topp) / 2); width: min(40vw, 580px);
  transform: translateY(calc(-50% - clamp(0, var(--p) - .3, 1) * 140px));
  opacity: clamp(0, 1 - (var(--p) - .3) * 5, 1);
  pointer-events: none;
}
.hero__tekst .overlinje { margin-bottom: 26px; }

.hero__etter {
  position: absolute; z-index: 4;
  left: var(--pad); right: var(--pad); bottom: clamp(40px, 6vh, 72px);
  display: grid; gap: 22px; max-width: 760px;
  opacity: clamp(0, (var(--p) - .8) * 5, 1);
  transform: translateY(calc(clamp(0, 1 - (var(--p) - .8) * 5, 1) * 30px));
  pointer-events: none;
  /* usynlig = heller ikke i tab-rekkefølgen; skriptet slår på er-apen
     akkurat der opasiteten begynner å stige (p = .8) */
  visibility: hidden;
}
.scene.er-apen .hero__etter { pointer-events: auto; visibility: visible; }
.hero__stor { font-size: clamp(34px, 4.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.hero__ingress { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; font-weight: 500; max-width: 560px; text-wrap: balance; }
.hero__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.hint {
  position: absolute; z-index: 4; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: clamp(0, .9 - var(--p) * 4, 1);
  display: flex; flex-direction: column; align-items: center; gap: 10px; white-space: nowrap;
}
.hint::after {
  content: ""; width: 1px; height: 34px; background: #fff;
  transform-origin: top; animation: puls 1.8s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 899px) {
  .hero { height: 200vh; height: 200svh; }
  .film video, .film img {
    object-position: 60% 50%; transform-origin: 55% 45%;
    transform: translate(-4%, calc(clamp(0, 1 - var(--p) * 1.6, 1) * -18%)) scale(calc(1.18 - var(--p) * .18));
  }
  .hero__tekst {
    top: auto; bottom: clamp(128px, 17svh, 160px); width: calc(100% - var(--pad) * 2);
    transform: translateY(calc(clamp(0, var(--p) - .45, 1) * -80px));
  }
  .hero__etter { bottom: 28px; }
}

/* Uten JavaScript, uten maskestøtte eller med «reduser bevegelse»:
   en rolig, statisk topp der alt innholdet står stille og synlig. */
.hero--statisk { height: auto; }
.hero--statisk .scene {
  position: relative; height: auto; display: grid; gap: 40px;
  padding: calc(var(--topp) + 56px) var(--pad) 72px;
}
.hero--statisk .film {
  position: relative; inset: auto; order: 2;
  -webkit-mask-image: none; mask-image: none;
  aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; max-width: 1100px;
}
.hero--statisk .film video, .hero--statisk .film img { transform: none; }
.hero--statisk .hero__tekst, .hero--statisk .hero__etter {
  position: static; transform: none; opacity: 1; visibility: visible; width: auto; max-width: 720px; pointer-events: auto;
}
.hero--statisk .hero__tekst { order: 1; }
.hero--statisk .hero__etter { order: 3; }
.hero--statisk .hero__stor { display: none; }
.hero--statisk .hint, .hero--statisk .film__skygge { display: none; }

/* uten JavaScript får vi aldri satt --gw, så vi viser den statiske toppen */
.ikke-js .hero { height: auto; }
.ikke-js .scene {
  position: relative; height: auto; display: grid; gap: 40px;
  padding: calc(var(--topp) + 56px) var(--pad) 72px;
}
.ikke-js .film {
  position: relative; inset: auto; order: 2;
  -webkit-mask-image: none; mask-image: none;
  aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; max-width: 1100px;
}
.ikke-js .film video, .ikke-js .film img { transform: none; }
.ikke-js .hero__tekst, .ikke-js .hero__etter {
  position: static; transform: none; opacity: 1; visibility: visible; width: auto; max-width: 720px; pointer-events: auto;
}
.ikke-js .hero__tekst { order: 1; }
.ikke-js .hero__etter { order: 3; }
.ikke-js .hero__stor, .ikke-js .hint, .ikke-js .film__skygge, .ikke-js .meny__knapp { display: none; }

/* Uten JavaScript virker ikke menyknappen, og da ville smale skjermer
   stått helt uten navigasjon. Topplinja blir en vanlig blokk i stedet,
   og lenkene brekker over to linjer. */
.ikke-js .topp {
  position: static; height: auto; flex-wrap: wrap;
  row-gap: 6px; padding-block: 12px;
}
.ikke-js .topp__nav { display: flex; flex-wrap: wrap; }
.ikke-js .topp__nav > a { padding: 0 10px; }
/* uten JavaScript vises verktøyene som vanlige lenker i linja */
.ikke-js .ned__knapp { display: none; }
.ikke-js .ned__panel { position: static; transform: none; display: flex; flex-wrap: wrap; width: auto; padding: 0; background: none; box-shadow: none; color: inherit; }
.ikke-js .ned__panel::before { display: none; }
.ikke-js .ned__panel a { padding: 0 10px; min-height: 44px; align-content: center; }
.ikke-js .ned__panel span { display: none; }
.ikke-js .topp__merke { padding: 0 10px 0 0; }
.ikke-js .scene { padding-top: 48px; }
.ikke-js .underside { padding-top: 0; }


/* =====================================================================
   7. KAPITTEL 01 – TJENESTER
   ===================================================================== */

.rader { border-top: 1px solid var(--linje); }
.rad { border-bottom: 1px solid var(--linje); position: relative; }
.rad a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; align-items: baseline; }
@media (min-width: 900px) {
  .rad a { grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1fr) 40px; gap: 20px 28px; padding: 40px 0; }
}
.rad__nr { font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--rod); }
.rad__navn {
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05; transition: transform .25s ease;
}
.rad__tekst { color: var(--blekk-3); font-size: 19px; line-height: 1.45; max-width: 360px; }
.rad__pil { display: none; }
@media (min-width: 900px) {
  .rad__pil { display: block; justify-self: end; width: 26px; height: 26px; transition: transform .25s ease; }
  .rad:hover .rad__navn, .rad:focus-within .rad__navn { transform: translateX(10px); }
  .rad:hover .rad__pil, .rad:focus-within .rad__pil { transform: translateX(6px); }
}
.rad__bilde {
  /* height: auto, ellers vinner height-attributtet på <img> over aspect-ratio */
  position: absolute; right: 0; top: 50%; width: 230px; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 10px; z-index: 2; pointer-events: none; opacity: 0;
  transform: translateY(-50%) rotate(-5deg) scale(.9);
  transition: opacity .25s ease, transform .3s ease;
  box-shadow: 0 22px 50px rgba(16, 16, 20, .2);
}
@media (min-width: 900px) {
  .rad:hover .rad__bilde { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
}
@media (max-width: 899px) { .rad__bilde { display: none; } }
.rader__etter { margin-top: 40px; }


/* =====================================================================
   8. KAPITTEL 02 – ARBEIDER
   ===================================================================== */

/* Fjorten caser, i samme rekkefølge som på getonnet.no/kundecaser.
   De to første står stort i to spalter, resten i tre: 2 + 12 fyller
   radene uten hull. Seks kolonner i rutenettet gjør begge mulige. */
.caser { display: grid; gap: 40px; }
@media (min-width: 700px) { .caser { grid-template-columns: 1fr 1fr; gap: 52px 40px; } }
@media (min-width: 1000px) {
  .caser { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 32px; }
  .caser .case { grid-column: span 2; }
  .caser .case--stor { grid-column: span 3; }
}
/* plassholderen har samme varme grå som studiobunnen i casebildene, så
   kortene ikke blinker når bildene laster inn */
.case__bilde { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #E8E6E1; }
.case__bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .7s ease; }
.case a:hover .case__bilde img, .case a:focus-visible .case__bilde img { transform: scale(1.03); }
.case__meta { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linje); margin-top: 16px; }
.case__rad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.case__navn { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.case--stor .case__navn { font-size: clamp(22px, 2.4vw, 30px); }
/* hva slags arbeid det var – samme merkelapper som på kundecase-sidene */
.case__kat { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blekk-2); white-space: nowrap; }
.case__linje { font-size: 16px; color: var(--blekk-2); line-height: 1.45; }
.case--stor .case__linje { font-size: 17px; }


/* =====================================================================
   9. KAPITTEL 03 – METODE
   ===================================================================== */

.metode { background: var(--blekk); color: #fff; }
.metode .kap__nr { color: var(--rod-lys); }
.metode .ingress { color: var(--hvit-2); }
/* Nøkkelbildene: to 16:9-rammer i full bredde med pila og «8 sek» mellom.
   På brede skjermer deler de to kolonnene rader med subgrid, så pila står
   midt på bildene og ikke midt på bilde + merkelapp. Uten subgrid-støtte
   faller den til midten av hele cellen, som er godt nok. */
.ramme { display: grid; gap: 22px; }
.ramme__bilder { display: grid; gap: 28px; }
.ramme__bilde { display: grid; gap: 12px; }
.ramme__bilde img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; background: #222;
}
.ramme__merke { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hvit-2); }
.ramme__merke b { color: #fff; font-weight: 700; margin-right: 10px; }
.ramme__mellom { display: none; }
@media (min-width: 760px) {
  .ramme__bilder { grid-template-columns: 1fr 64px 1fr; grid-template-rows: auto auto; gap: 12px 16px; }
  .ramme__bilde { grid-row: 1 / span 2; grid-template-rows: subgrid; }
  .ramme__mellom {
    display: grid; grid-row: 1; align-self: center; justify-items: center; gap: 8px;
    color: var(--rod-lys);
  }
  .ramme__mellom svg { width: 30px; height: 30px; }
  .ramme__mellom span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hvit-2); }
}
.ramme figcaption { font-size: 15px; color: var(--hvit-2); line-height: 1.5; max-width: 640px; }

/* stegene: én rad, lest fra venstre mot høyre slik filmen går */
.steg {
  display: grid; gap: 32px 36px;
  margin-top: clamp(56px, 6vw, 84px); padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
@media (min-width: 640px) { .steg { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steg li { display: grid; gap: 10px; align-content: start; }
.steg__nr { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--rod-lys); }
.steg h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.steg p { color: var(--hvit-2); font-size: 16px; line-height: 1.5; }
.metode__etter { margin-top: clamp(48px, 5vw, 72px); }


/* =====================================================================
   10. KAPITTEL 04 – OM
   ===================================================================== */

.om__tekst {
  font-size: clamp(26px, 3.2vw, 44px); font-weight: 500;
  line-height: 1.2; letter-spacing: -.02em; max-width: 1040px; text-wrap: balance;
}
.om__tekst b { font-weight: 700; }
.om__etter { margin-top: 44px; }


/* =====================================================================
   11. KAPITTEL 05 – KONTAKT OG SKJEMA
   ===================================================================== */

.kontakt { background: var(--rod); color: #fff; padding: clamp(96px, 11vw, 150px) 0; position: relative; overflow: hidden; }
/* Getonnite som diskret silhuett i bakgrunnen – ren alfamaske, fargen kommer fra opacity mot det røde */
.kontakt::before { content: ""; position: absolute; right: clamp(-40px, -3vw, -16px); bottom: -4%; width: clamp(200px, 30vw, 480px); aspect-ratio: 284 / 325; background: url("../../media/getonnite-silhuett.png") center / contain no-repeat; opacity: .13; pointer-events: none; }
.kontakt > .grid { position: relative; }
.kontakt .kap__nr { color: #fff; }
.kontakt .h1 { font-size: clamp(40px, 6vw, 88px); }
.kontakt__ingress { font-size: clamp(19px, 1.7vw, 24px); max-width: 620px; margin-top: 26px; line-height: 1.45; }

.kontakt__grid { display: grid; gap: 56px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 960px) { .kontakt__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }

.direkte { display: grid; gap: 28px; align-content: start; }
.direkte__blokk { display: grid; gap: 4px; }
.direkte__merkelapp { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.direkte__verdi { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; }
a.direkte__verdi { display: inline-block; border-bottom: 2px solid var(--hvit-linje); padding-bottom: 2px; }
a.direkte__verdi:hover { border-bottom-color: #fff; }
.direkte__adresse { font-size: 18px; line-height: 1.5; font-style: normal; }

/* skjema */
.skjema { display: grid; gap: 18px; }
.felt { display: grid; gap: 7px; align-content: start; }
.felt label { font-size: 15px; font-weight: 600; }
.felt .valgfri { font-weight: 500; opacity: .8; }
.felt input, .felt textarea {
  font: inherit; font-size: 17px; width: 100%;
  padding: 14px 16px; border-radius: var(--rund); border: 1.5px solid transparent;
  background: #fff; color: var(--blekk);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.felt textarea { min-height: 132px; resize: vertical; }
.felt input::placeholder, .felt textarea::placeholder { color: rgba(16, 16, 20, .5); }
.felt input:focus-visible, .felt textarea:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.felt [aria-invalid="true"] { border-color: var(--blekk); box-shadow: 0 0 0 2px var(--blekk); }
.felt__feil { font-size: 15px; font-weight: 600; }
.felt__feil:not(:empty) { margin-top: 1px; }
/* pila hører til en faktisk feilmelding, ikke til den tomme plassholderen */
.felt__feil:not(:empty)::before { content: "↳ "; }

@media (min-width: 560px) { .skjema__par { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } }

.samtykke { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; }
.samtykke input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #fff; flex: none; }
.samtykke a { text-decoration: underline; text-underline-offset: 3px; }
.samtykke .felt__feil { grid-column: 1 / -1; }

/* honningkrukke mot roboter – skjult for folk, men ikke display:none,
   siden noen roboter hopper over det som er skrudd helt av */
.felle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skjema__bunn { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.skjema__status { font-size: 16px; font-weight: 600; line-height: 1.4; }
.skjema__status--ok { font-size: 19px; line-height: 1.45; max-width: 460px; }
.skjema[data-sendt="ja"] > *:not(.skjema__bunn) { display: none; }
.knapp[aria-busy="true"] { opacity: .75; pointer-events: none; }

.kontakt__linje {
  margin-top: clamp(56px, 7vw, 80px); padding-top: 22px;
  border-top: 1px solid var(--hvit-linje);
  display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: 15px; font-weight: 500;
}

@media (max-width: 560px) { .kontakt__knapper .knapp, .skjema__bunn .knapp { width: 100%; } }


/* =====================================================================
   12. BUNNLINJE
   ===================================================================== */

.bunn { background: var(--blekk); color: #fff; padding: clamp(56px, 7vw, 88px) 0 32px; }
.bunn__grid { display: grid; gap: 44px; }
@media (min-width: 640px) { .bunn__grid { grid-template-columns: 1fr 1fr; gap: 44px 40px; } }
@media (min-width: 1000px) { .bunn__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
.bunn__merke { display: grid; gap: 20px; align-content: start; justify-items: start; }
.bunn__merke > a { display: flex; align-items: center; min-height: 44px; }
.bunn .logo { width: 170px; }
.bunn address { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--hvit-2); }
.bunn address a { display: inline-block; padding-block: 4px; }
.bunn h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; opacity: .75; }
.bunn nav ul { display: grid; gap: 2px; }
.bunn nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 17px; color: var(--hvit-2); }
.bunn nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.sosialt { display: flex; gap: 10px; }
.sosialt a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #fff;
  transition: background-color .15s ease;
}
.sosialt a:hover { background: rgba(255, 255, 255, .14); }
.sosialt svg { width: 19px; height: 19px; }
.bunn__linje {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px;
  font-size: 15px; color: var(--hvit-2);
}
.bunn__linje a { display: inline-block; padding-block: 4px; }
.bunn__linje a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }


/* =====================================================================
   13. REDUSERT BEVEGELSE OG UTSKRIFT
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .hint::after { animation: none; }
}

@media print {
  .topp, .meny, .hint, .film, .hopp, .skjema, .sosialt { display: none !important; }
  .hero { height: auto; }
  .scene { position: static; height: auto; padding: 0 0 24px; }
  .hero__tekst, .hero__etter { position: static; opacity: 1; transform: none; width: auto; }
  .hero, .kontakt, .metode, .bunn { background: #fff !important; color: #000 !important; }
  .metode .ingress, .steg p, .bunn address, .bunn nav a, .bunn__linje { color: #000 !important; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}


/* =====================================================================
   14. UNDERSIDER (personvern, 404)
   Samme papir og blekk som forsiden, bare uten hero.
   ===================================================================== */

.underside { padding-top: var(--topp); }

.artikkel { padding: clamp(104px, 10vw, 140px) 0; }
.artikkel__topp { margin-bottom: clamp(36px, 4vw, 56px); }
.artikkel__brod { max-width: 720px; }
.artikkel__brod > * + * { margin-top: 20px; }
.artikkel__brod h2 {
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; margin-top: 52px;
}
.artikkel__brod h3 { font-size: 20px; font-weight: 700; margin-top: 32px; }
.artikkel__brod p, .artikkel__brod li { color: var(--blekk-3); line-height: 1.6; }
.artikkel__brod ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; }
.artikkel__brod li::marker { color: var(--rod); }
.artikkel__brod a { border-bottom: 1.5px solid var(--linje); }
.artikkel__brod a:hover { border-bottom-color: currentColor; }
.artikkel__brod dl { display: grid; gap: 14px; }
.artikkel__brod dt { font-weight: 700; }
.artikkel__brod dd { margin: 2px 0 0; color: var(--blekk-3); }
.artikkel__dato { font-size: 15px; color: var(--blekk-2); margin-top: 48px; }

.feilside { min-height: calc(100vh - var(--topp)); min-height: calc(100svh - var(--topp)); display: grid; align-content: center; padding: 80px 0; }
.feilside .kap__nr { margin-bottom: 18px; }
.feilside__tekst > * + * { margin-top: 14px; }
.feilside__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px !important; }
/* Getonnite ved veiskiltet: liten over teksten på smale skjermer, stor ved siden av på brede */
.feilside__grid { display: grid; gap: 32px; align-items: center; }
.feilside__bilde { order: -1; }
.feilside__bilde img { display: block; width: min(60vw, 300px); height: auto; }
@media (min-width: 900px) {
  .feilside__grid { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .feilside__bilde { order: 0; }
  .feilside__bilde img { width: min(100%, 520px); margin-inline: auto; }
}


/* =====================================================================
   15. SUPPORT (support.html)
   Skjema på hvitt papir – derfor synlige kanter og rødt i feilmeldinger,
   i motsetning til kontaktskjemaet på rødt.
   ===================================================================== */

.support { padding: clamp(104px, 10vw, 140px) 0; }
.support__grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .support__grid { grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: start; } }

/* direktekontakt på hvitt */
.support .direkte__merkelapp { color: var(--blekk-2); opacity: 1; }
.support .direkte__verdi { font-size: clamp(20px, 2vw, 26px); }
.support a.direkte__verdi { border-bottom-color: var(--linje); }
.support a.direkte__verdi:hover { border-bottom-color: currentColor; }
.direkte__tekst { font-size: 16px; color: var(--blekk-2); line-height: 1.5; margin-top: 4px; }

/* lys skjemavariant */
.skjema--lys .felt input, .skjema--lys .felt textarea { border-color: rgba(16, 16, 20, .3); }
.skjema--lys .felt input:hover, .skjema--lys .felt textarea:hover { border-color: rgba(16, 16, 20, .55); }
.skjema--lys .felt input:focus-visible, .skjema--lys .felt textarea:focus-visible { outline-color: var(--blekk); border-color: var(--blekk); }
.skjema--lys .felt [aria-invalid="true"] { border-color: var(--rod); box-shadow: 0 0 0 2px var(--rod); }
.skjema--lys .felt__feil, .skjema--lys .skjema__status--feil { color: var(--rod); }
.skjema--lys .samtykke input, .skjema--lys .haster input { accent-color: var(--rod); }
.skjema--lys .samtykke { color: var(--blekk-3); }
.skjema--lys .samtykke a { color: var(--blekk); }

/* hastesak – én avkrysning som endrer hva vi krever (telefon) og hvordan vi varsler */
.haster {
  grid-template-columns: auto 1fr; align-items: start; gap: 12px;
  padding: 16px 18px; border: 1.5px solid rgba(16, 16, 20, .3); border-radius: var(--rund);
  transition: border-color .15s ease, background-color .15s ease;
}
.haster input { width: 22px; height: 22px; margin: 2px 0 0; cursor: pointer; }
.haster label { display: grid; gap: 2px; font-size: 16px; cursor: pointer; }
.haster label b { font-weight: 700; }
.haster label span { font-size: 15px; font-weight: 500; color: var(--blekk-2); line-height: 1.45; }
.haster:has(input:checked) { border-color: var(--rod); background: rgba(214, 56, 52, .05); }

/* filfelt */
.skjema--lys .felt input[type="file"] {
  padding: 12px 14px; border-style: dashed; background: transparent; font-size: 15px; color: var(--blekk-3); cursor: pointer;
}
.skjema--lys .felt input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 15px; color: var(--blekk); background: #f1f1f1;
  border: 0; border-radius: 999px; padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
.felt__hjelp { font-size: 14px; color: var(--blekk-2); line-height: 1.45; }

/* aktiv side i menyene */
.topp__nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.meny a[aria-current="page"] svg { opacity: 1; }
/* fem lenker + telefon får ikke plass mellom 900 og 1100 px – Metode er den
   minst nødvendige, og finnes fortsatt i mobilmenyen og ved å rulle */
/* Metode er tatt ut av topplinja (16.9.2026); kapittelet finnes fortsatt på forsiden. */


/* =====================================================================
   16. VERKTØY OG ARTIKLER (verktoy.html, artikler/)
   ===================================================================== */

/* «Verktøy» er både lenke og nedtrekk: lenka går til siden, pila åpner */
.ned { display: flex; align-items: center; }
.ned > a { padding-right: 4px !important; }
.ned__knapp { padding: 0 10px 0 4px; min-width: 34px; }
.ned__alle { margin-top: 4px; border-top: 1px solid var(--linje); border-radius: 0 0 9px 9px !important; padding-top: 13px !important; }

/* tips: nummerert liste i to spalter */
.tips__liste { display: grid; gap: 36px 40px; counter-reset: none; }
@media (min-width: 760px) { .tips__liste { grid-template-columns: 1fr 1fr; } }
.tips__liste li { display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px; align-content: start; padding-top: 22px; border-top: 1px solid var(--linje); }
.tips__nr { grid-row: 1 / span 3; font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--rod); font-variant-numeric: tabular-nums; }
.tips__liste h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.tips__liste p { color: var(--blekk-3); font-size: 17px; line-height: 1.5; }
.tips__lenke { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; margin-top: 6px; border-bottom: 1.5px solid var(--linje); padding-bottom: 3px; width: fit-content; }
.tips__lenke:hover { border-bottom-color: currentColor; }
.tips__lenke svg { width: 16px; height: 16px; }

/* artikkelkort */
.artikler__liste { display: grid; gap: 40px; }
@media (min-width: 760px) { .artikler__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } }
.artikkel-kort a { display: grid; gap: 12px; align-content: start; height: 100%; padding-top: 22px; border-top: 1px solid var(--linje); }
.artikkel-kort__meta { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blekk-2); }
.artikkel-kort__tittel { font-size: clamp(22px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; transition: transform .25s ease; }
.artikkel-kort a:hover .artikkel-kort__tittel { transform: translateX(6px); }
.artikkel-kort__linje { color: var(--blekk-2); font-size: 17px; line-height: 1.5; }
.artikkel-kort .lenke { font-size: 16px; margin-top: 4px; width: fit-content; }

/* kort kontaktavslutning på undersider */
.kontakt--kort { padding: clamp(72px, 8vw, 110px) 0; }
.kontakt--kort .kontakt__knapper { margin-top: 32px; }

/* artikkelside */
.artikkel__tilbake { color: var(--rod); }
.artikkel__tilbake:hover { text-decoration: underline; text-underline-offset: 4px; }
.artikkel__meta { font-size: 15px; color: var(--blekk-2); margin-top: 16px; }
.artikkel__brod sup { font-size: .7em; line-height: 0; vertical-align: super; }
.artikkel__brod sup a { border: 0; color: var(--rod); font-weight: 600; padding: 0 2px; }
.artikkel__brod em { font-style: normal; font-weight: 600; color: var(--blekk); }
.kilder__tittel { font-size: 15px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--blekk-2); margin-top: 56px !important; }
.kilder { list-style: decimal; padding-left: 22px; display: grid; gap: 8px; }
.kilder li { font-size: 15px; color: var(--blekk-2); line-height: 1.5; }
.kilder li::marker { color: var(--rod); }
.artikkel__opphav { font-size: 15px; color: var(--blekk-2); margin-top: 40px !important; }
.nivaer { display: grid; gap: 22px; margin: 28px 0 !important; }
.nivaer dt { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--blekk); }
.nivaer dd { margin: 4px 0 0; }
.steg-liste { list-style: none; padding: 0; display: grid; gap: 22px; counter-reset: steg; margin-top: 24px !important; }
.steg-liste li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-content: start; }
.steg-liste li::before { counter-increment: steg; content: "0" counter(steg); grid-row: 1 / span 2; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--rod); padding-top: 6px; }
.steg-liste h3 { margin-top: 0 !important; font-size: 20px; }
.steg-liste p { margin-top: 0 !important; }

/* boks: verktøy-oppfordring etter artikkelen */
.boks { max-width: 720px; margin-top: clamp(48px, 6vw, 72px); padding: clamp(28px, 4vw, 44px); border-radius: 16px; background: #F3F2EF; display: grid; gap: 12px; }
.boks__tittel { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.boks p { color: var(--blekk-3); line-height: 1.55; }
.boks__lenker { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 10px; }
.boks .lenke { font-size: 16px; }

/* verktøysiden, andre versjon: kort med bilde (samme kort som kundecasene),
   to og to som på tjenestesiden, én linje tekst, og tips som én linje hver */
.verktoy__liste { display: grid; gap: 40px; }
@media (min-width: 600px) { .verktoy__liste { grid-template-columns: 1fr 1fr; gap: 44px 32px; } }
@media (min-width: 1000px) { .verktoy__liste { gap: 52px 40px; } }
.verktoy__liste .case__navn { font-size: clamp(19px, 1.6vw, 22px); }
.verktoy__liste .case__linje { font-size: 15px; }
.artikler__liste .case__navn { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; }
.artikler__liste .case__meta { gap: 8px; }
.artikler__liste .artikkel-kort__meta { font-size: 12px; }
.tips__liste { gap: 0; }
@media (min-width: 760px) { .tips__liste { gap: 0 40px; } }
.tips__liste li { display: block; padding: 0; border: 0; }
.tips__liste li a {
  display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--linje); font-size: 18px; font-weight: 500; line-height: 1.35;
}
.tips__liste li a svg { width: 20px; height: 20px; transition: transform .2s ease; }
.tips__liste li a:hover svg { transform: translateX(4px); }
.tips__liste li a:hover .tips__tekst { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linje); }
.tips__liste .tips__nr { grid-row: auto; font-size: 22px; }
@media (min-width: 760px) { .tips__liste li:nth-child(-n+2) a { border-top-color: var(--linje); } }

/* =====================================================================
   17. OM OSS (om-oss.html)
   ===================================================================== */
.tall { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-top: 28px; border-top: 1px solid var(--linje); }
@media (min-width: 760px) { .tall { grid-template-columns: repeat(4, 1fr); } }
.tall__verdi { display: block; font-size: clamp(40px, 5vw, 72px); font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.tall__navn { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blekk-2); }

.team { display: grid; gap: 36px 24px; }
@media (min-width: 560px) { .team { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; } }
/* teambildene har gjennomsiktig bunn med gradientsirkelen bak – de skal stå
   på hvitt, ikke på den grå studiobunnen casebildene bruker */
.team__bilde { aspect-ratio: 400 / 472; overflow: hidden; border-radius: 6px; background: transparent; }
.team__bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.team__meta { display: grid; gap: 3px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--linje); }
.team__navn { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.team__rolle { font-size: 15px; color: var(--blekk-2); }
.team__epost { font-size: 15px; font-weight: 600; width: fit-content; margin-top: 4px; border-bottom: 1.5px solid var(--linje); padding-bottom: 2px; }
.team__epost:hover { border-bottom-color: currentColor; }

.verdier { display: grid; gap: 0; }
@media (min-width: 760px) { .verdier { grid-template-columns: 1fr 1fr; gap: 0 40px; } }
.verdier li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linje); font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.35; }
.verdier li::before { content: ""; width: 22px; height: 2px; background: var(--rod); align-self: center; }

/* med «Om oss» i topplinja: mellom 900 og 1100 px viker både Metode og Om oss */
@media (min-width: 900px) and (max-width: 1099px) { .topp__nav a[href$="om-oss.html"] { display: none; } }


/* =====================================================================
   18. TJENESTER (tjenester.html og nettsider/apputvikling/ai/design.html)
   Samme kort som kundecasene, tre løfter på én rad, én bred bildeflate,
   plattform-/leveransemerker og korte spørsmål og svar.
   ===================================================================== */
.tjenester__liste { display: grid; gap: 40px; }
@media (min-width: 700px) { .tjenester__liste { grid-template-columns: 1fr 1fr; gap: 52px 40px; } }
.tjenester__liste .case__navn { font-size: clamp(22px, 2.4vw, 30px); }
.tjenester__liste .case__linje { font-size: 17px; }
.tjenester__liste .case__kat { color: var(--rod); }

.kap__nr a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* bred bildeflate øverst på tjenestesidene – 4:3 på mobil, panorama på brede */
.tjeneste__bilde { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #E8E6E1; }
@media (min-width: 760px) { .tjeneste__bilde { aspect-ratio: 21 / 9; } }
.tjeneste__bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* tre løfter / tre arbeidsmåter */
.punkter { display: grid; gap: 0; }
@media (min-width: 760px) { .punkter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; } }
.punkter li { display: grid; gap: 10px; align-content: start; padding: 22px 0 28px; border-top: 1px solid var(--linje); }
.punkter h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.punkter p { color: var(--blekk-3); font-size: 17px; line-height: 1.5; }
.punkter .lenke { font-size: 16px; width: fit-content; margin-top: 4px; }

/* plattformer, teknologi, leveranser */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a, .chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linje); border-radius: 999px; font-size: 16px; font-weight: 600;
}
.chips a:hover { border-color: var(--blekk); }

/* spørsmål og svar */
.faq { max-width: 800px; border-top: 1px solid var(--linje); }
.faq details { border-bottom: 1px solid var(--linje); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 20px;
  padding: 20px 0; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 24px; height: 24px; transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linje); }
.faq details p { padding: 0 44px 24px 0; color: var(--blekk-3); font-size: 17px; line-height: 1.55; max-width: 680px; }
.faq details p a { border-bottom: 1.5px solid var(--linje); font-weight: 600; }
.faq details p a:hover { border-bottom-color: currentColor; }

/* kort kontaktavslutning */
.kontakt--kort .kontakt__ingress { margin-top: 20px; }
.kontakt__knapper { display: flex; flex-wrap: wrap; gap: 12px; }

/* siden du står på, i nedtrekksmenyen */
.ned__panel a[aria-current="page"] b { color: var(--rod); }


/* =====================================================================
   19. KUNDECASER OG ARTIKLER (kundecaser.html, kundecaser/*.html,
   artikler.html, artikler/*.html)
   ===================================================================== */
/* casebildet øverst: 4:3 på mobil, 16:10 på brede – enhetene skal ikke kuttes */
.tjeneste__bilde--case { aspect-ratio: 4 / 3; }
@media (min-width: 760px) { .tjeneste__bilde--case { aspect-ratio: 16 / 10; } }

/* fakta om prosjektet: kunde, leveranse, teknologi, lenke */
.fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--linje); }
@media (min-width: 760px) { .fakta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.fakta div { display: grid; gap: 6px; align-content: start; }
.fakta dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blekk-2); }
.fakta dd { font-size: 17px; font-weight: 500; line-height: 1.4; }
.fakta dd a { border-bottom: 1.5px solid var(--linje); }
.fakta dd a:hover { border-bottom-color: currentColor; }

/* fortellingen: tre korte kapitler i én smal kolonne */
.fortelling { display: grid; gap: clamp(32px, 4vw, 48px); max-width: 720px; }
.fortelling h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; }
.fortelling p { color: var(--blekk-3); font-size: 18px; line-height: 1.55; }
.fortelling p + p { margin-top: 12px; }
@media (min-width: 900px) {
  .fortelling { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* bildegalleri: ett bilde i full bredde, to eller flere side om side */
.galleri { display: grid; gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
@media (min-width: 700px) { .galleri--to, .galleri--tre { grid-template-columns: 1fr 1fr; gap: 32px; } .galleri--tre > :first-child { grid-column: 1 / -1; } }
.galleri figure { margin: 0; overflow: hidden; border-radius: 6px; background: #E8E6E1; }
.galleri img { width: 100%; height: auto; display: block; }

/* sitat fra kunden */
.sitat { max-width: 900px; margin: 0; padding-top: 28px; border-top: 1px solid var(--linje); }
.sitat p { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.sitat p::before { content: "«"; } .sitat p::after { content: "»"; }
.sitat footer { margin-top: 18px; font-size: 15px; color: var(--blekk-2); }
.sitat footer b { font-weight: 600; color: var(--blekk); }

/* artikkelbilde øverst */
.artikkel__bilde { margin: 0 0 clamp(40px, 5vw, 64px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #E8E6E1; max-width: 1000px; }
.artikkel__bilde img { width: 100%; height: 100%; object-fit: cover; }
.artikkel__brod table { width: 100%; border-collapse: collapse; font-size: 16px; }
.artikkel__brod th, .artikkel__brod td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.artikkel__brod th { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blekk-2); }
.artikkel__brod ol { list-style: decimal; padding-left: 22px; display: grid; gap: 8px; }
.artikkel__brod ol li::marker { color: var(--rod); font-weight: 600; }

/* Norsk Tipping-casen: toppbanneret gjenskapt med CSS. Posisjonene er de
   samme som i annonsefila (1010 × 150), omregnet til prosent, og tidslinja
   er den samme: «Tenk om det» inn ved 0,3 s, «ikke er en spøk» ved 0,5 s,
   stopp ved 1,5 s. Her går den i loop på seks sekunder. */
.banner { margin: clamp(48px, 5vw, 72px) 0 0; }
.banner__flate { position: relative; aspect-ratio: 1010 / 150; background: #07a707; border-radius: 6px; overflow: hidden; container-type: inline-size; }
.banner__flate img { position: absolute; height: auto; display: block; }
.banner__tenk { left: 40.1%; top: 24.7%; width: 19.8%; }
.banner__ikke { left: 37.6%; top: 48.7%; width: 24.75%; }
.banner__logo { left: 91.1%; top: 13.3%; width: 6.93%; }
.banner__spill { left: 34.2%; top: 84.7%; width: 31.7%; }
.banner figcaption { margin-top: 12px; font-size: 14px; color: var(--blekk-2); }
.banner__tenk { animation: banner-tenk 6s ease-in-out infinite; }
.banner__ikke { animation: banner-ikke 6s ease-in-out infinite; }
@keyframes banner-tenk {
  0%, 5% { opacity: 0; transform: translateY(3.96cqw); }
  15% { opacity: 1; transform: translateY(-.5cqw); }
  18%, 80% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes banner-ikke {
  0%, 8.3% { opacity: 0; transform: translateY(3.96cqw); }
  18.3% { opacity: 1; transform: translateY(-.5cqw); }
  21.7%, 80% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .banner__tenk, .banner__ikke { animation: none; opacity: 1; transform: none; }
}

/* forsiden viser fem av fjorten caser; under 1000 px (to kolonner) fire,
   så rutenettet går opp – lenka under peker til alle */
@media (max-width: 999px) { .caser--utvalg .case:nth-child(n+5) { display: none; } }

/* små lenker som står alene (brødsmule over tittelen, tilbakelenke på
   artikler) får trykkflate på minst 24 px uten å flytte teksten */
.kap__nr a, .artikkel__tilbake { display: inline-block; padding: 5px 0; margin: -5px 0; }

/* flere lenker etter en liste (verktøysiden: «Alle artikler» og «Savner du…») */
.rader__etter { display: flex; flex-wrap: wrap; gap: 14px 36px; }


/* =====================================================================
   20. PRISER (priser.html)
   Prosjekter som rader med fra-pris, driftsavtaler som tre kort per
   tjeneste, e-post som små tabeller. Samme linjer og luft som resten.
   ===================================================================== */
.prisrader { border-top: 1px solid var(--linje); }
.prisrad { display: grid; gap: 6px 28px; padding: 22px 0; border-bottom: 1px solid var(--linje); }
@media (min-width: 760px) { .prisrad { grid-template-columns: minmax(0, .9fr) 190px minmax(0, 1.6fr); align-items: baseline; } }
.prisrad__navn { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.prisrad__pris { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prisrad__pris small { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blekk-2); margin-right: 6px; }
.prisrad__tekst { color: var(--blekk-3); font-size: 16px; line-height: 1.5; }
.prisrad__tekst a { border-bottom: 1.5px solid var(--linje); font-weight: 600; }
.prisrad__tekst a:hover { border-bottom-color: currentColor; }

.planer { display: grid; gap: 28px; }
@media (min-width: 760px) { .planer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.plan { display: grid; gap: 18px; align-content: start; padding: 28px 0 8px; border-top: 2px solid var(--blekk); }
.plan--populaer { border-top-color: var(--rod); }
.plan__topp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan__navn { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.plan__merke { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rod); }
.plan__pris { font-size: 17px; color: var(--blekk-2); }
.plan__pris b { font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--blekk); font-variant-numeric: tabular-nums; margin-right: 4px; }
.plan__liste { display: grid; gap: 0; }
.plan__liste li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--linje); font-size: 16px; line-height: 1.4; color: var(--blekk-3); }
.plan__liste li::before { content: ""; width: 16px; height: 2px; background: var(--rod); align-self: center; }
.planer__etter { margin-top: 28px; font-size: 15px; color: var(--blekk-2); }

.epost { display: grid; gap: 28px; }
@media (min-width: 760px) { .epost { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.epost__tabell { width: 100%; border-collapse: collapse; }
.epost__tabell caption { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0 0 14px; border-bottom: 2px solid var(--blekk); }
.epost__tabell th, .epost__tabell td { padding: 12px 0; border-bottom: 1px solid var(--linje); font-size: 16px; }
.epost__tabell th { text-align: left; font-weight: 500; color: var(--blekk-3); }
.epost__tabell td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* =====================================================================
   21. SIDER FLYTTET OVER 18. SEP 2026 – vilkår, Claude, vibekode, kalkulator
   ===================================================================== */
.tillit { margin-top: 22px; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.tillit span { letter-spacing: .12em; margin-right: 4px; }
.punkter--to { max-width: 900px; }
@media (min-width: 760px) { .punkter--to { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steg-liste--bred { max-width: none; margin-top: 8px !important; }
@media (min-width: 900px) { .steg-liste--bred { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; } }
.faq + .sitat { margin-top: clamp(40px, 5vw, 64px); }
.artikkel__brod--vilkar h2 { font-size: 22px; margin-top: 36px; }
/* samtale-eksempel på claude-support.html */
.prat { max-width: 720px; margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 16px; background: #F3F2EF; display: grid; gap: 14px; }
.prat p { margin: 0; padding: 14px 18px; border-radius: 12px; line-height: 1.5; font-size: 17px; max-width: 85%; }
.prat p span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; opacity: .7; }
.prat__du { background: #fff; justify-self: end; }
.prat__claude { background: var(--blekk); color: #fff; }
.prat__status { font-size: 14px; color: var(--blekk-2); padding: 0 !important; max-width: none !important; }
.prat__status::before { content: "✓ "; color: var(--rod); }
/* appkalkulator på apputvikling.html */
.kalk { display: grid; gap: 40px; }
@media (min-width: 900px) { .kalk { grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; } }
.kalk__valg { display: grid; gap: 28px; }
.kalk fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kalk legend, .kalk__glider > span { display: block; width: 100%; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.kalk fieldset label { position: relative; cursor: pointer; }
.kalk fieldset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kalk fieldset span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--linje); font-size: 15px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.kalk fieldset input:checked + span { background: var(--blekk); color: #fff; border-color: var(--blekk); }
.kalk fieldset input:focus-visible + span { outline: 2px solid var(--rod); outline-offset: 3px; }
.kalk fieldset label:hover span { border-color: var(--blekk); }
.kalk__glider { display: block; }
.kalk__glider > span { display: flex; justify-content: space-between; gap: 16px; }
.kalk__glider output { color: var(--rod); font-variant-numeric: tabular-nums; }
.kalk__glider input { width: 100%; accent-color: var(--rod); margin: 0; }
.kalk__svar { padding: clamp(24px, 3vw, 36px); border-radius: 16px; background: #F3F2EF; display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--topp) + 24px); }
.kalk__pris { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kalk__pris b { color: var(--rod); }
.kalk__svar p:not(.kalk__pris) { color: var(--blekk-3); font-size: 16px; line-height: 1.5; }
.kalk__svar .knapp { width: fit-content; margin-top: 6px; }