/* Courant — kanonisk forside. Felles variabler og grunnstil ligger i
   ../felles/courant.css. */

.strom {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--natt);
  color: var(--lys-på-mørk);
}

.strom video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(9,15,13,.94) 0%, rgba(9,15,13,.87) 38%, rgba(9,15,13,.32) 72%, rgba(9,15,13,.12) 100%),
    linear-gradient(180deg, rgba(11,18,16,.58) 0%, rgba(11,18,16,.25) 44%, rgba(11,18,16,.86) 100%);
}

.strom > * { position: relative; z-index: 2; }

.topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.7rem clamp(1.25rem, 4vw, 3.5rem);
}

.topp img { display: block; width: clamp(7rem, 12vw, 10rem); height: auto; }

.hovedmeny { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.3rem); }
.hovedmeny a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(244,246,242,.82);
  font: 500 .66rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.hovedmeny a:hover { color: var(--lys-på-mørk); }

/* Heroen har to nivåer: hva kunden vil oppnå, og hvilken virksomhet Courant
   hjelper henne å bygge over tid. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 67rem;
  padding: 2rem clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 8vh, 6rem);
}

.hero h1 {
  max-width: 19ch;
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.1rem + 5.2vw, 5.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero .retning {
  position: relative;
  max-width: 27ch;
  margin: clamp(2.4rem, 6vh, 4.2rem) 0 0;
  padding-top: 1.5rem;
  color: rgba(244,246,242,.9);
  font: italic 400 clamp(1.2rem, 1.02rem + .78vw, 1.9rem)/1.28 var(--display);
  letter-spacing: -.015em;
  /* Fraunces' kursiv står som standard i det kalligrafiske kuttet. Det kler et
     bokomslag, ikke en påstand en leder skal tro på. WONK 0 tar bort svansene
     og lar formen bli igjen. Oppslagsordet beholder det uttrykksfulle kuttet:
     der er ordet et objekt som vises fram, ikke en setning som leses. */
  font-variation-settings: "WONK" 0;
}

.hero .retning::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5rem;
  height: 1px;
  background: rgba(244,246,242,.42);
}

.herofot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) 2rem;
}

.nedcue {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  min-height: 44px;
  color: rgba(244,246,242,.82);
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}

.nedcue::after {
  content: "";
  width: 5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(244,246,242,.55), transparent);
}

.nedcue:hover { color: var(--lys-på-mørk); }

.videobryter {
  min-width: 44px;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid rgba(244,246,242,.5);
  background: rgba(9,15,13,.56);
  color: rgba(244,246,242,.9);
  cursor: pointer;
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.videobryter:hover { background: rgba(9,15,13,.84); }

.ark { padding: clamp(3.8rem, 9vh, 7rem) clamp(1.25rem, 4vw, 3.5rem); }
.ark + .ark { border-top: 1px solid var(--hårstrek); }
.midt { max-width: 68rem; margin: 0 auto; }

.ark h2 {
  max-width: 21ch;
  margin: .8rem 0 1.4rem;
  font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.ark h3 { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.25; }
.ark p { max-width: 48ch; margin: 0 0 1rem; }
.ark .stor { max-width: 46ch; font-size: clamp(1.12rem, 1rem + .35vw, 1.28rem); line-height: 1.5; }


/* ============ Oppslaget ============
   Navnet forklares ikke, det slås opp. Ordboksformen gjør definisjonen til
   et funn leseren gjør selv, og den tar en firedel av plassen overskriften
   tok. Kilden står med, slik resten av flaten oppgir sine. */

.au-courant { background: var(--papir-lys); }

.au-courant > .midt {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
}

.au-courant .oppslag {
  padding: 1.3rem 0 1.2rem;
  border-top: 1px solid var(--blekk);
  border-bottom: 1px solid var(--hårstrek);
}

.au-courant .oppslagsord {
  max-width: none;
  margin: 0 0 .85rem;
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}

.au-courant .oppslagsord em { font-style: italic; color: var(--segl); }

.au-courant .oppslagsdata {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  margin: 0 0 .95rem;
}

.au-courant .oppslagsdata > div { display: flex; align-items: baseline; gap: .5rem; }

.au-courant .oppslagsdata dt {
  color: var(--dis);
  font: 500 .6rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.au-courant .oppslagsdata dd {
  margin: 0;
  font: 400 .95rem/1.4 var(--sans);
}

.au-courant .betydning {
  max-width: none;
  margin: 0 0 .85rem;
  font-size: 1.06rem;
  line-height: 1.5;
}

.au-courant .oppslagskilde {
  max-width: none;
  margin: 0;
  color: var(--dis);
  font: 400 .68rem/1.4 var(--mono);
  letter-spacing: .06em;
}

.au-courant .ambisjon {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(1.65rem, 1.15rem + 2.1vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.025em;
}

.au-courant .ambisjon em { font-style: italic; }

.au-courant-lofte { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }

.au-courant .tilbud {
  max-width: 44ch;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hårstrek);
  color: var(--dis);
  font: 400 1rem/1.6 var(--sans);
}

#innhold,
#au-courant,
#observasjonene,
#metoden,
#samarbeidet,
#kontakt { scroll-margin-block-start: 1rem; }

#innhold:focus { outline: none; }


/* ============ Observasjonene ============
   Grunnlaget står før metoden: leseren skal se hva arbeidsmåten svarer på før
   hun ser arbeidsmåten. Nasjonale tall til venstre i en smal spalte, Courants
   egne mønstre til høyre. Hver spalte oppgir sin egen kilde. */

.observasjoner { background: var(--papir); }
.observasjoner > .midt > h2 { max-width: 19ch; }

.grunnlag {
  display: grid;
  gap: clamp(2.6rem, 6vw, 4rem);
  margin-top: clamp(2.4rem, 6vw, 3.6rem);
}

.observasjoner .grunnlagsdel > h3 {
  margin: 0 0 1.3rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--blekk);
  color: var(--blekk);
  font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.observasjoner .malinger { display: grid; gap: 1.15rem; }

.observasjoner .maling {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 .8rem;
}

.observasjoner .maling .navn {
  max-width: none;
  margin: 0;
  font: 400 .92rem/1.35 var(--sans);
}

.observasjoner .maling .tall {
  max-width: none;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Feltet er talt, ikke tegnet: én strek per prosent i samme takt i sporet og i
   utslaget, slik at 81 og 10 kan sammenlignes med øyet. */
.observasjoner .stolpe {
  grid-column: 1 / -1;
  margin-top: .5rem;
  height: 20px;
  background-image: linear-gradient(90deg, var(--hårstrek) 0 1.5px, transparent 1.5px);
  background-size: 5px 100%;
}

.observasjoner .stolpe i {
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, var(--blekk) 0 1.5px, transparent 1.5px);
  background-size: 5px 100%;
}

.observasjoner .maling[data-tynn="ja"] .tall { color: var(--segl); }
.observasjoner .maling[data-tynn="ja"] .stolpe i {
  background-image: linear-gradient(90deg, var(--segl) 0 1.5px, transparent 1.5px);
}

.observasjoner .monstre {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.observasjoner .monstre li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0 1.05rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hårstrek);
}

.observasjoner .monstre li:first-child { padding-top: .1rem; }

/* Tegnene låner figurspråket resten av flaten bruker: stiplet ramme, ring,
   spor. Ingen ikonpakke, og ingen aksent — den hører til tallene til venstre. */
.observasjoner .tegn {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--blekk);
  stroke-width: 1.7;
  opacity: .85;
}

.observasjoner .tegn .fylt { fill: var(--blekk); stroke: none; }
.observasjoner .tegn .tykk { stroke-width: 3.4; }

.observasjoner .monstre h4 { margin: 0 0 .25rem; font-size: 1.04rem; font-weight: 400; }
.observasjoner .monstre p {
  max-width: none;
  margin: 0;
  color: var(--dis);
  font: 400 .92rem/1.45 var(--sans);
}

.observasjoner .samtidig {
  max-width: none;
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
  line-height: 1.45;
}

.observasjoner .kilde {
  max-width: none;
  margin: 1.1rem 0 0;
  color: var(--dis);
  font: 400 .72rem/1.5 var(--mono);
  letter-spacing: .05em;
}


/* ============ Samarbeidet ============ */

.samarbeid { background: var(--papir-lys); }

.innganger {
  display: grid;
  gap: 0;
  margin-top: 2.6rem;
  border-top: 1px solid var(--hårstrek);
}

.inngang { padding: 1.65rem 0; border-bottom: 1px solid var(--hårstrek); }
.inngang h3 {
  min-height: 2.5em;
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.55rem);
}
.inngang p {
  margin: 0 0 1rem;
  color: var(--dis);
  font: 400 .96rem/1.55 var(--sans);
}
.inngang p:last-child { margin-bottom: 0; }
.inngang b {
  display: block;
  margin-bottom: .25rem;
  color: var(--segl);
  font: 600 .67rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ============ Metoden ============
   Grønt bærer innholdet. Burgunderen ligger i et hjørne og markerer møtet
   mellom det naturlige og det teknologiske uten å vaske over hele flaten. */

.metode {
  background:
    radial-gradient(circle at 100% 100%, #3D0F1A 0%, #2B2226 20%, transparent 50%),
    linear-gradient(135deg, #16241D 0%, #1B2C23 58%, #223629 100%);
  color: var(--lys-på-mørk);
}
.metode .merkelapp { color: rgba(244,246,242,.68); }
.metode h2 { color: var(--lys-på-mørk); }

.metodeopplevelse { margin: 3rem 0 0; }

/* Figuren bærer bare geometri. Alle ord ligger i HTML, slik at ingenting
   skaleres ned sammen med viewBox-en på smal skjerm. */
.metodefigur { position: relative; }
.metodefigur svg { display: block; width: 100%; height: auto; }

.metodefigur .spor { fill: none; stroke: rgba(244,246,242,.18); stroke-width: 1.5; }
.metodefigur .spor-tegnet {
  fill: none;
  stroke: var(--segl-på-mørk);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.metodefigur .videre {
  fill: none;
  stroke: rgba(244,246,242,.24);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.metodefigur .flate { fill: url(#metodegradient); opacity: .75; }
.metodefigur .punkter circle {
  fill: var(--skog);
  stroke: var(--segl-på-mørk);
  stroke-width: 2.5;
  transition: fill .2s var(--mykt);
}
.metodefigur .punkter circle.er-uthevet { fill: var(--segl-på-mørk); }

/* Fasene ligger under figuren, én kolonne per punkt på kurven. Figuren har
   ingen egen grunnlinje: overkanten på fasekolonnene er aksen. */
.metodefaser {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.metodefaser li {
  padding: 1.2rem 1.6rem 0 0;
  border-top: 1px solid rgba(244,246,242,.22);
}

.metodefaser li:last-child { padding-right: 0; }
.fasenr {
  display: block;
  margin-bottom: .5rem;
  color: rgba(244,246,242,.62);
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .1em;
}
.metodefaser h3 { margin: 0 0 .5rem; color: var(--lys-på-mørk); font-size: 1.3rem; }
.metodefaser p { margin: 0; color: rgba(244,246,242,.78); font: 400 .97rem/1.5 var(--sans); }

/* På brede skjermer tegnes ruta gradvis mens leseren ruller inn i metoden.
   Uten JavaScript står alt ferdig. Ingen elementer er klebende, så tekst og
   figur kan ikke legge seg over hverandre. */
.js .metodeopplevelse { --metodeprogresjon: 0; }
.js .metodefigur .spor-tegnet {
  stroke-dashoffset: calc(1 - var(--metodeprogresjon));
}
.js .metodefigur .flate {
  opacity: clamp(0, calc((var(--metodeprogresjon) - .12) * 1.2), .75);
}
.js .metodefigur .punkter circle:nth-child(1),
.js .metodefaser li:nth-child(1) { opacity: clamp(0, calc((var(--metodeprogresjon) - .02) * 10), 1); }
.js .metodefigur .punkter circle:nth-child(2),
.js .metodefaser li:nth-child(2) { opacity: clamp(0, calc((var(--metodeprogresjon) - .25) * 8), 1); }
.js .metodefigur .punkter circle:nth-child(3),
.js .metodefaser li:nth-child(3) { opacity: clamp(0, calc((var(--metodeprogresjon) - .50) * 8), 1); }
.js .metodefigur .punkter circle:nth-child(4),
.js .metodefaser li:nth-child(4) { opacity: clamp(0, calc((var(--metodeprogresjon) - .75) * 8), 1); }

.eierskap {
  max-width: none;
  margin: 3rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(244,246,242,.24);
  color: rgba(244,246,242,.88);
  font-size: 1.15rem;
}

.eierskap span { display: block; max-width: 48ch; }


/* ============ Nivåene på metodefiguren ============
   Y-aksen sa «Modenhet» uten at det sto hva det betød. Nivåene gir ordet
   innhold. Stiplet framfor heltrukket, og ingen kobling fra fase til nivå:
   nivåene beskriver landskapet, kurven er ruta. */

.metodefigur .nivaalinje {
  stroke: rgba(244,246,242,.14);
  stroke-width: 1;
  stroke-dasharray: 1 6;
}

.metodefigur .startsone { fill: rgba(244,246,242,.022); }

.nivaa {
  position: absolute;
  right: 0;
  margin: 0;
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  line-height: 1.2;
}

.nivaa span {
  font: 500 .64rem/1.2 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(244,246,242,.58);
}

.nivaa b {
  font: 400 .95rem/1.2 var(--display);
  color: rgba(244,246,242,.84);
}

/* Plassert like under hver nivågrense i figuren: y = 0, 115 og 215 av 300. */
.nivaa-3 { top: 1.5%; }
.nivaa-2 { top: 40%; }
.nivaa-1 { top: 74%; }


/* ============ Spredningen ============
   Ambassadørmodellen tegnes med mennesker, ikke prikker. Aksenten følger den
   ene personen inn i teamet og slukner i virksomheten: når arbeidsmåten er
   alles, er den ikke lenger noens. */

.spredning {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: clamp(2.4rem, 6vh, 4rem);
  border-top: 1px solid var(--hårstrek);
}

.spredningstittel {
  max-width: 22ch;
  margin: 0 0 2.2rem;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 400;
}

.spredningsfigur svg { display: block; width: 100%; height: auto; }
.spredningsfigur .ring { fill: none; stroke: var(--dis); stroke-width: 1.3; opacity: .55; }
.spredningsfigur .stiplet { stroke-dasharray: 4 5; }
.spredningsfigur .klynge circle { fill: none; stroke: var(--dis); stroke-width: 1; opacity: .5; }
.spredningsfigur .lag,
.spredningsfigur .alle { fill: var(--dis); opacity: .68; }
.spredningsfigur .ambassador { fill: var(--segl); }
.spredningsfigur .pil { stroke: var(--segl); stroke-width: 1.3; }
.spredningsfigur marker path { fill: var(--segl); }

.spredningstrinn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.spredningstrinn li { padding: 1.1rem 1.2rem 0 0; border-top: 1px solid var(--hårstrek); }
.spredningstrinn h4 { margin: 0 0 .45rem; font-size: 1.12rem; font-weight: 400; }
.spredningstrinn p { margin: 0; max-width: none; color: var(--dis); font: 400 .95rem/1.5 var(--sans); }

.metode .spredning { border-color: rgba(244,246,242,.22); }
.metode .spredningstittel,
.metode .spredningstrinn h4 { color: var(--lys-på-mørk); }
.metode .spredningsfigur .ring,
.metode .spredningsfigur .klynge circle { stroke: rgba(244,246,242,.55); }
.metode .spredningsfigur .lag,
.metode .spredningsfigur .alle { fill: rgba(244,246,242,.72); opacity: 1; }
.metode .spredningsfigur .ambassador { fill: var(--segl-på-mørk); }
.metode .spredningsfigur .pil { stroke: var(--segl-på-mørk); }
.metode .spredningsfigur marker path { fill: var(--segl-på-mørk); }
.metode .spredningstrinn li { border-color: rgba(244,246,242,.22); }
.metode .spredningstrinn p { color: rgba(244,246,242,.76); }


/* ============ Kontakt og kolofon ============ */

.kontakt { background: var(--natt); color: var(--lys-på-mørk); }
.kontakt .merkelapp { color: rgba(244,246,242,.66); }
.kontakt h2 { color: var(--lys-på-mørk); }
.kontakt p { color: rgba(244,246,242,.8); }
.kontakt .vei {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 1.4rem 0 0;
  padding: .85rem 1.5rem;
  border: 2px solid rgba(244,246,242,.64);
  background: transparent;
  color: var(--lys-på-mørk);
  font: 500 1rem/1.3 var(--mono);
  letter-spacing: .02em;
  text-decoration: none;
}
.kontakt .vei:hover { border-color: var(--lys-på-mørk); background: rgba(244,246,242,.1); }

.kolofon {
  margin: 0;
  padding: 1.6rem clamp(1.25rem, 4vw, 3.5rem) 2rem;
  border-top: 1px solid var(--hårstrek);
  color: var(--dis);
  font: 400 .75rem/1.5 var(--mono);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Testporten krever 44 px trykkflate. Lenka lå på 18. */
.kolofon a {
  color: inherit;
  text-underline-offset: .2em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.kolofon a:hover { color: var(--blekk); }


/* ============ Brekk ============ */

@media (min-width: 52rem) {
  .au-courant > .midt {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 7rem);
  }

  .grunnlag {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 5.5rem);
  }

  .innganger { grid-template-columns: repeat(3, 1fr); }
  .inngang { padding: 1.7rem 2rem; border-right: 1px solid var(--hårstrek); }
  .inngang:first-child { padding-left: 0; }
  .inngang:last-child { padding-right: 0; border-right: 0; }
}

@media (max-width: 51.99rem) {
  .inngang h3 { min-height: 0; }

  /* Under brekket blir figuren en liten sparkline, og fasene stables som rader.
     Punktene kan ikke lenger flukte med kolonner som ikke finnes. */
  .metodefaser { grid-template-columns: 1fr; margin-top: 1.2rem; }
  .metodefaser li {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .6rem;
    padding: 1.1rem 0;
  }
  .fasenr {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    padding-top: .35rem;
  }
  .metodefaser h3 {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: .45rem;
    font-size: 1.2rem;
  }
  .metodefaser p { grid-column: 2; grid-row: 2; }

  /* På en smal skjerm ligger fasene under figuren. De skal være lesbare straks
     seksjonen nås; kurven og punktene beholder opptegningen. */
  .js .metodefaser li { opacity: 1; }

  .spredningstrinn { grid-template-columns: 1fr; }
  .spredningstrinn li { padding: 1rem 0; }

  /* I margen er det ikke plass. Nivåene faller under figuren som en liste, og
     order flytter dem dit — i kildekoden står de før svg-en fordi de er
     absolutt plassert over den på brede skjermer. */
  .metodefigur { display: flex; flex-direction: column; }
  .metodefigur svg { order: 1; }
  .nivaa {
    position: static;
    margin: 0;
    padding: .8rem 0;
    gap: .8rem;
    border-bottom: 1px solid rgba(244,246,242,.14);
  }
  .nivaa-3 { order: 2; margin-top: 1.4rem; border-top: 1px solid rgba(244,246,242,.14); }
  .nivaa-2 { order: 3; }
  .nivaa-1 { order: 4; }
}

@media (max-width: 44rem) {
  .topp {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding-bottom: .8rem;
  }

  .hovedmeny {
    order: 2;
    width: 100%;
    justify-content: space-between;
    gap: .5rem;
    border-top: 1px solid rgba(244,246,242,.24);
  }

  .hovedmeny a {
    font-size: .6rem;
    letter-spacing: .1em;
  }

  .hovedmeny a:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .metodeopplevelse { --metodeprogresjon: 1 !important; }
  .js .metodefigur .spor-tegnet { stroke-dashoffset: 0 !important; }
  .js .metodefigur .flate { opacity: .75 !important; }
  .js .metodefigur .punkter circle { opacity: 1 !important; }
  .js .metodefaser li { opacity: 1 !important; }
}