/* Northcase – stilark for northcase.no
   Én skrifttype (Schibsted Grotesk, lastes fra egen server). Farger fra logoen. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --marine: #14324d;     /* fra logoen: overskrifter, knapper */
  --marine-dyp: #0c2338; /* hover på knapper */
  --gronn: #3b8172;      /* fra logoen: hakene i saksmappen, små markører */
  --skifer: #283a4b;     /* brødtekst */
  --dis: #5a6b7a;        /* dempet tekst */
  --is: #eef2f6;         /* flater og bånd */
  --strek: rgba(20, 50, 77, 0.16);
  --strek-fast: #cbd5df;
  --markor: #f6de6e;     /* markeringstusj – brukes sparsomt */
  --hvit: #ffffff;

  --font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maks: 72rem;
  --tekstbredde: 40rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --seksjon: clamp(4rem, 9vw, 7rem);
}

/* ---------- Grunnlag ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--skifer);
  background: var(--hvit);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) {
  body {
    font-size: 1.125rem;
  }
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--marine);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--marine);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--markor);
  color: var(--marine);
}

:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 3px;
}

svg {
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: min(calc(100% - 2 * var(--gutter)), var(--maks));
  margin-inline: auto;
}

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

.hopp {
  position: absolute;
  left: var(--gutter);
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--marine);
  color: var(--hvit);
  font-weight: 600;
  text-decoration: none;
}

.hopp:focus {
  top: 0.75rem;
}

/* ---------- Knapper ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.3rem;
  border: 2px solid var(--marine);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.knapp--primar {
  background: var(--marine);
  color: var(--hvit);
}

.knapp--primar:hover {
  background: var(--marine-dyp);
  border-color: var(--marine-dyp);
}

.knapp--sekundar {
  background: transparent;
  color: var(--marine);
}

.knapp--sekundar:hover {
  background: var(--is);
}

.knapp--lys {
  background: var(--hvit);
  border-color: var(--hvit);
  color: var(--marine);
}

.knapp--lys:hover {
  background: var(--is);
  border-color: var(--is);
}

.knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Toppfelt og meny ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--strek);
}

@supports (backdrop-filter: blur(8px)) {
  .topp {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px) saturate(1.3);
  }
}

.topp__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
}

.logo svg {
  display: block;
  width: 12.5rem;
  height: auto;
}

@media (min-width: 60em) {
  .topp .logo svg {
    width: 14.5rem;
  }
}

@media (max-width: 23.99em) {
  .topp .logo svg {
    width: 10.25rem;
  }
}

.meny {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meny a:not(.knapp) {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--skifer);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.meny a:not(.knapp):hover,
.meny a:not(.knapp)[aria-current="page"] {
  color: var(--marine);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.meny a:not(.knapp)[aria-current="page"] {
  font-weight: 600;
}

.meny .knapp {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
}

.meny-knapp {
  display: none;
}

@media (max-width: 59.99em) {
  .js .meny-knapp {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.95rem;
    border: 1.5px solid var(--marine);
    border-radius: 10px;
    background: transparent;
    color: var(--marine);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }

  .meny-knapp svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .meny-knapp path {
    transform-box: view-box;
    transform-origin: 10px 10px;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }

  .meny-knapp[aria-expanded="true"] .strek-topp {
    transform: rotate(45deg) translateY(5px);
  }

  .meny-knapp[aria-expanded="true"] .strek-midt {
    opacity: 0;
  }

  .meny-knapp[aria-expanded="true"] .strek-bunn {
    transform: rotate(-45deg) translateY(-5px);
  }

  .js .meny {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--hvit);
    border-bottom: 1px solid var(--strek);
    box-shadow: 0 24px 40px -24px rgba(20, 50, 77, 0.35);
  }

  .js .meny.er-apen {
    display: flex;
  }

  .js .meny a:not(.knapp) {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--strek);
    font-size: 1.125rem;
  }

  .js .meny .knapp {
    width: 100%;
    min-height: 3rem;
    margin-top: 1.25rem;
  }

  /* Uten JavaScript vises menyen som en rad med lenker under logoen */
  html:not(.js) .topp__inner {
    flex-wrap: wrap;
    padding-block: 0.75rem;
  }

  html:not(.js) .meny {
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
  }
}

/* ---------- Forside: toppseksjon ---------- */

.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--seksjon);
}

.hero__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 60em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  }
}

.hero h1 {
  max-width: 16em;
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.125rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

.hero h1 .h1__dere {
  display: block;
  margin-bottom: 0.08em;
  color: var(--dis);
}

.ingress {
  max-width: 36em;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.hero .ingress {
  margin-top: 1.75rem;
}

.hero__tekst > p {
  max-width: 36em;
}

/* Saksmappen: illustrasjon av en sak underveis */

.sak {
  position: relative;
  width: 100%;
  max-width: 29rem;
  margin: 0;
  padding-top: 2.1rem;
  justify-self: center;
}

@media (min-width: 60em) {
  .sak {
    justify-self: end;
  }
}

.sak::before {
  /* baksiden av mappen */
  content: "";
  position: absolute;
  inset: 3.1rem -0.9rem -0.9rem 0.9rem;
  border-radius: 18px;
  background: var(--is);
  border: 1px solid var(--strek);
}

.sak__fane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 2.3rem;
  padding: 0.45rem 1.1rem 0;
  border: 1px solid var(--strek-fast);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--hvit);
  color: var(--dis);
  font-size: 0.875rem;
  font-weight: 600;
}

.sak__ark {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--strek-fast);
  border-radius: 0 18px 18px 18px;
  background: var(--hvit);
  box-shadow: 0 2px 6px rgba(20, 50, 77, 0.06), 0 30px 60px -30px rgba(20, 50, 77, 0.4);
}

.sak__hode {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--strek);
}

.sak__type {
  color: var(--dis);
  font-size: 0.875rem;
}

.sak__tittel {
  color: var(--marine);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.sak__steg {
  --fremdrift: 60%;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sak__steg::before {
  /* linjen mellom stegene – fylt frem til steget som pågår */
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 1.65rem;
  bottom: 1.65rem;
  width: 2px;
  background: linear-gradient(var(--gronn), var(--gronn)) top left / 100% var(--fremdrift) no-repeat, var(--strek-fast);
}

.sak__steg li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0;
  color: var(--dis);
  font-size: 1rem;
  line-height: 1.35;
}

.sak__merke {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--strek-fast);
  border-radius: 50%;
  background: var(--hvit);
  color: var(--dis);
  font-size: 0.875rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.sak__merke svg {
  width: 1rem;
  height: 1rem;
}

.sak__steg .er-ferdig {
  color: var(--skifer);
}

.sak__steg .er-ferdig .sak__merke {
  border-color: var(--gronn);
  background: var(--gronn);
  color: var(--hvit);
}

.sak__steg .er-aktiv {
  color: var(--marine);
  font-weight: 600;
}

.sak__steg .er-aktiv .sak__merke {
  border-color: var(--marine);
  color: var(--marine);
}

.sak__steg mark {
  margin: 0 -0.2em;
  padding: 0.05em 0.2em;
  border-radius: 3px;
  background-color: transparent;
  background-image: linear-gradient(var(--markor), var(--markor));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Det ene animerte øyeblikket: stegene hukes av når siden lastes */
@media (prefers-reduced-motion: no-preference) {
  .sak__steg::before {
    animation: nc-fremdrift 0.9s ease-out 0.5s both;
  }

  .sak__steg .er-ferdig .sak__merke {
    animation: nc-fyll 0.3s ease-out both;
    animation-delay: calc(0.45s + var(--i, 0) * 0.25s);
  }

  .sak__steg .er-ferdig .sak__merke svg {
    animation: nc-hake 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
    animation-delay: calc(0.5s + var(--i, 0) * 0.25s);
  }

  .sak__steg .er-aktiv mark {
    animation: nc-markor 0.55s ease-out 1.35s both;
  }
}

@keyframes nc-fremdrift {
  from {
    background-size: 100% 0%, auto;
  }
}

@keyframes nc-fyll {
  from {
    border-color: var(--strek-fast);
    background-color: var(--hvit);
  }
}

@keyframes nc-hake {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes nc-markor {
  from {
    background-size: 0% 100%;
  }
}

/* ---------- Seksjoner ---------- */

.seksjon {
  padding-block: var(--seksjon);
}

.seksjon--is {
  background: var(--is);
}

.seksjon--uten-topp,
.seksjon:not(.seksjon--is) + .seksjon:not(.seksjon--is) {
  padding-top: 0;
}

.seksjon__tittel {
  max-width: 22em;
  font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.5rem);
}

.seksjon__ingress {
  max-width: 38em;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

/* Registeret: tjenestene på forsiden */

.register {
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--strek);
}

.register li {
  display: grid;
  gap: 0.35rem 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--strek);
}

@media (min-width: 48em) {
  .register li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
}

.register h3 {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.register h3 a {
  text-decoration: none;
}

.register h3 a:hover {
  text-decoration: underline;
}

.merknad {
  max-width: 38em;
  margin-top: 2rem;
  color: var(--marine);
  font-weight: 550;
}

.lenke-videre {
  font-weight: 600;
}

/* Kontaktpanel nederst på sidene */

.cta {
  display: grid;
  gap: 1.75rem 3rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 22px;
  background: var(--marine);
  color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 48em) {
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.cta h2 {
  color: var(--hvit);
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
}

.cta p {
  max-width: 34em;
  margin-top: 0.9rem;
}

.cta :focus-visible {
  outline-color: var(--markor);
}

/* ---------- Undersider ---------- */

.sidehode {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

.sidehode h1 {
  max-width: 16em;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}

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

/* Tjenester */

.tjeneste {
  display: grid;
  gap: 1rem 3rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--strek);
  scroll-margin-top: 5.5rem;
}

@media (min-width: 60em) {
  .tjeneste {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.tjeneste:last-child {
  padding-bottom: 0;
}

.tjeneste h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.tjeneste__tekst {
  max-width: var(--tekstbredde);
}

.liste {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.liste li {
  margin-bottom: 0.35em;
  padding-left: 0.2em;
}

.liste li::marker {
  color: var(--gronn);
}

/* Slik hjelper vi – fire punkter i rekkefølge */

.punkter {
  display: grid;
  gap: 1.75rem 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: punkt;
}

@media (min-width: 40em) {
  .punkter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .punkter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.punkter li {
  padding-top: 1rem;
  border-top: 2px solid var(--marine);
  counter-increment: punkt;
}

.punkter li::before {
  content: counter(punkt);
  display: block;
  margin-bottom: 0.5rem;
  color: var(--marine);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#slik-hjelper-vi {
  scroll-margin-top: 4.5rem;
}

/* Slik fungerer det – tidslinje */

.tidslinje {
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tidslinje li {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.tidslinje li:last-child {
  padding-bottom: 0;
}

.tidslinje li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.625rem - 1px);
  top: 3.25rem;
  bottom: 0;
  width: 2px;
  background: var(--strek-fast);
}

.tidslinje__nr {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--marine);
  border-radius: 50%;
  background: var(--hvit);
  color: var(--marine);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tidslinje h2 {
  margin: 0.6rem 0 0.5rem;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
}

.tidslinje p {
  max-width: 34em;
}

.prosess {
  display: grid;
  gap: 3rem 5rem;
}

@media (min-width: 60em) {
  .prosess {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .prosess__notis {
    position: sticky;
    top: 6.5rem;
  }
}

.prosess__notis {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--strek);
  border-radius: 18px;
  background: var(--hvit);
}

.prosess__notis h2 {
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
  letter-spacing: -0.012em;
}

/* Om Northcase */

.om {
  display: grid;
  gap: 3rem 4.5rem;
}

@media (min-width: 60em) {
  .om {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.om__tekst {
  max-width: var(--tekstbredde);
}

.panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 18px;
  background: var(--is);
}

@media (min-width: 60em) {
  .panel {
    position: sticky;
    top: 6.5rem;
  }
}

.panel__tittel {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}

.fakta {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.fakta div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--strek);
}

.fakta div:first-child {
  padding-top: 0;
  border-top: 0;
}

.fakta dt {
  color: var(--marine);
  font-weight: 650;
}

.fakta dd {
  margin: 0.2rem 0 0;
}

.utsagn {
  margin: 2.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--gronn);
  color: var(--marine);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Kontakt */

.kontakt {
  display: grid;
  gap: 2.5rem 4.5rem;
}

@media (min-width: 60em) {
  .kontakt {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.kontaktkort {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--strek);
  border-radius: 18px;
  background: var(--hvit);
}

.kontaktkort__etikett {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--marine);
  font-weight: 600;
}

.kontaktkort__etikett svg {
  width: 1.4rem;
  height: 1.4rem;
}

.kontaktkort__adresse {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--marine);
  font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kontaktkort__adresse:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.kontaktkort .knapper {
  margin-top: 1.5rem;
}

.notis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
  color: var(--dis);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.notis svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  color: var(--marine);
}

.kontakt__tekst h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.selskap {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
  font-size: 0.9375rem;
}

.selskap h2 {
  margin-bottom: 0.75rem;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.oppslag {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  margin: 0;
}

.oppslag dt {
  color: var(--skifer);
  font-weight: 600;
}

.oppslag dd {
  margin: 0;
}

/* Felt som må fylles inn før publisering – markert med gult */
.fyll-inn {
  padding: 0 0.35em;
  border-radius: 4px;
  background: var(--markor);
  color: var(--marine);
  font-weight: 600;
}

/* Personvernerklæring */

.prosa {
  max-width: 44rem;
}

.prosa h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa .oppslag {
  margin-bottom: 1em;
}

.prosa .sist-oppdatert {
  margin-top: 3rem;
  color: var(--dis);
  font-size: 0.9375rem;
}

/* ---------- Bunnfelt ---------- */

.bunn {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid var(--strek);
  background: var(--is);
  font-size: 1rem;
}

.bunn__grid {
  display: grid;
  gap: 2rem 3rem;
}

@media (min-width: 48em) {
  .bunn__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.bunn .logo svg {
  width: 11rem;
}

.bunn__slagord {
  max-width: 22em;
  margin-top: 0.9rem;
  color: var(--dis);
}

.bunn__lenker {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bunn__lenker a,
.bunn__epost {
  color: var(--skifer);
  text-decoration: none;
}

.bunn__lenker a:hover,
.bunn__epost:hover {
  color: var(--marine);
  text-decoration: underline;
}

.bunn__epost {
  font-weight: 600;
}

.bunn__nederst {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
  color: var(--dis);
  font-size: 0.875rem;
}

.bunn__nederst p {
  margin: 0;
}

.bunn__nederst a {
  color: var(--dis);
}

.bunn__juridisk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}