.sl {
  --sl-nr-b: 40px;                      
  --sl-rad-gap: clamp(18px, 2.4vw, 30px);
  --sl-svak: 0.62;                      
  --sl-reise: 2.8;                      
  --sl-vent: 56px;                      
  --sl-luft: clamp(16px, 3.6svh, 40px); 
}

.sl-topp {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.sl-flate {
  display: grid;
  gap: var(--gap-stor);
  align-items: start;
}

@media (min-width: 900px) {
  .sl-flate {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.sl-venstre {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  align-content: start;
}

.sl-fremdrift {
  display: none;
}

.sl-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sl-rad-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-steg {
  position: relative;
  display: grid;
  grid-template-columns: var(--sl-nr-b) minmax(0, 1fr);
  column-gap: clamp(14px, 1.6vw, 22px);
}

.sl-nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--sl-nr-b);
  height: var(--sl-nr-b);
  border: 1.5px solid var(--strek-sterk);
  border-radius: 50%;
  background: var(--grunn);
  color: var(--tekst);
  font-size: 0.8125rem;
  font-weight: var(--vekt-halv);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sl-nr-disk {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--mork);
}

.sl-nr-tall {
  position: relative;
  grid-area: 1 / 1;
}

.sl-nr-mork {
  opacity: 0;
}

.sl-nr-lys {
  color: var(--mork-tekst);
}

.sl-led {
  position: absolute;
  top: calc(var(--sl-nr-b) + 6px);
  bottom: calc(6px - var(--sl-rad-gap));
  left: calc(var(--sl-nr-b) / 2 - 1px);
  width: 2px;
  overflow: hidden;
  background: var(--strek);
}

.sl-led-fyll {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--aksent);
  transform-origin: 50% 0;
}

.sl-steg h3 {
  padding-top: calc((var(--sl-nr-b) - 1.2em) / 2);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
}

.sl-steg p {
  max-width: 38rem;
  margin: 0.4em 0 0;
  color: var(--tekst-dempet);
}

.sl-steg p a {
  color: var(--tekst);
  text-underline-offset: 0.18em;
}

.sl-knapper {
  padding-left: calc(var(--sl-nr-b) + clamp(14px, 1.6vw, 22px));
}

.sl-ramme {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--mork-2);
  box-shadow: 0 30px 70px -24px var(--skygge-farge), 0 1px 0 var(--strek);
  container-type: size;
}

.sl-panel {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.sl-panel:not(.sl-panel-5) {
  display: none;
}

.sl-foto-bilde {
  position: absolute;
  inset: 0;
}

.sl-foto-bilde img,
.sl-hel img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.sl-panel-2 img { object-position: 50% 58%; }
.sl-panel-5 img { object-position: 46% 52%; }

.sl-bildetekst {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  padding: 4.2em 1.3em 1.1em;
  background: var(--skygge-bunn);
  color: var(--bilde-tekst);
  font-size: clamp(13px, 2.1cqh, 16px);
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
}

.sl-bildetekst::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--gull);
}

.sl-vindu,
.sl-vindu-mot {
  position: absolute;
  inset: 0;
}

.sl-vindu {
  overflow: hidden;
}

.sl-kant,
.sl-skygge,
.sl-dekk,
.sl-markor,
.sl-laser,
.sl-laser-punkt {
  display: none;
}

.sl-papir {
  background: var(--flate);
  color: var(--tekst);
}

.sl-papir-indre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(11px, min(3.9cqw, 2.9cqh), 20px);
  line-height: 1.4;
}

.sl-band {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.85em;
  padding: 1.15em 1.5em;
  background: var(--mork);
  color: var(--mork-tekst);
}

.sl-band-logo {
  flex: none;
  width: 2.7em;
  height: 2.7em;
}

.sl-band-tekst {
  display: grid;
  gap: 0.2em;
  min-width: 0;
}

.sl-band-navn {
  color: var(--mork-dempet);
  font-size: 0.72em;
  font-weight: var(--vekt-halv);
  letter-spacing: var(--sporing-merke);
  text-transform: uppercase;
}

.sl-band-tittel {
  font-size: 1.42em;
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.012em;
  line-height: 1.15;
}

.sl-papir-kropp {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.1em;
  min-height: 0;
  padding: 1.5em 1.5em 1.2em;
}

.sl-etikett {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.82em;
  font-weight: var(--vekt-halv);
}

.sl-boks {
  position: relative;
  display: block;
  padding: 0.72em 0.9em;
  border: 1.5px solid var(--strek);
  border-radius: var(--radius);
  background: var(--flate-lys);
  line-height: 1.45;
}

.sl-velg {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sl-velg svg {
  width: 0.85em;
  height: 0.85em;
  color: var(--tekst-dempet);
}

.sl-omrade {
  min-height: 7.2em;
}

.sl-ord {
  white-space: nowrap;
}

.sl-send {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9em;
  border-radius: var(--radius);
  background: var(--knapp);
  color: var(--knapp-tekst);
  font-weight: var(--vekt-halv);
}

.sl-sendt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.92em;
  font-weight: var(--vekt-halv);
}

.sl-sendt svg {
  flex: none;
  width: 1.45em;
  height: 1.45em;
  padding: 0.28em;
  border-radius: 50%;
  background: var(--mork);
  color: var(--mork-tekst);
}

.sl-papir-fot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.5em;
  border-top: 1px solid var(--strek);
  color: var(--tekst-dempet);
  font-size: 0.9em;
}

.sl-papir-fot svg {
  width: 1.1em;
  height: 1.1em;
}

.sl-tilbud {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 1.35em 1.5em 1.3em;
}

.sl-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.66em 0;
}

.sl-q-gjelder {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 0 0.9em;
}

.sl-q-gjelder .sl-etikett {
  margin: 0;
  color: var(--tekst-dempet);
}

.sl-q-jobb {
  font-size: 1.32em;
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sl-q-strek {
  display: block;
  flex: none;
  height: 1px;
  margin: 0.3em 0;
  background: var(--strek);
  transform-origin: 0 50%;
}

.sl-q-tekst {
  min-width: 0;
  font-size: 0.95em;
}

.sl-q-verdi {
  font-size: 0.92em;
  font-weight: var(--vekt-halv);
}

.sl-q-belop {
  display: flex;
  flex: 0 0 30%;
  justify-content: flex-end;
}

.sl-q-belop i {
  display: block;
  width: calc(var(--b, 0.6) * 100%);
  height: 0.62em;
  border-radius: 0.31em;
  background: var(--strek);
  transform-origin: 0 50%;
}

.sl-q-sum .sl-q-tekst {
  font-weight: var(--vekt-halv);
}

.sl-q-sum .sl-q-belop i {
  background: var(--tekst-dempet);
}

.sl-q-sign {
  display: flex;
  align-items: flex-end;
  gap: 1.2em;
  margin-top: auto;
  padding-top: 1em;
}

.sl-q-sign .sl-etikett {
  margin: 0 0 0.35em;
  color: var(--tekst-dempet);
}

.sl-sign-flate {
  position: relative;
  flex: 1 1 auto;
  border-bottom: 1px solid var(--strek-sterk);
}

.sl-signatur {
  width: min(100%, 11em);
  height: 3em;
  fill: none;
  stroke: var(--blokk);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sl-hel {
  position: absolute;
  inset: 0;
}

.sl-fliser {
  position: absolute;
  inset: 0;
}

.sl-flis {
  position: absolute;
  left: calc(var(--c) * 100% / 3);
  top: calc(var(--r) * 25%);
  width: calc(100% / 3);
  height: 25%;
  overflow: hidden;
}

.sl-flis img {
  position: absolute;
  left: calc(var(--c) * -100%);
  top: calc(var(--r) * -100%);
  width: 300%;
  height: 400%;
  max-width: none;
  object-fit: cover;
}

.sl-panel-2 {
  --sl-lx: 57%;
  --sl-ly: 46%;
}

html.js-anim .sl.sl-styrt {
  --sl-modus: stablet;
}

html.js-anim .sl.sl-styrt {
  padding-bottom: 0;
}

html.js-anim .sl.sl-styrt .sl-spor {
  position: relative;
  height: calc(100svh + var(--sl-reise) * 100svh);
  margin-top: calc(-1 * var(--meny-h));
}

html.js-anim .sl.sl-styrt .sl-scene {
  position: sticky;
  top: 0;
  height: 100svh;
  pointer-events: none;
}

html.js-anim .sl.sl-styrt .sl-liste,
html.js-anim .sl.sl-styrt .sl-knapper,
html.js-anim .sl.sl-styrt .sl-ramme {
  pointer-events: auto;
}

html.js-anim .sl.sl-styrt .sl-panel {
  display: block;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-panel-3 {
  transform-origin: 0 100%;
}

html.js-anim .sl.sl-styrt .sl-ramme {
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-skygge {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--mork-2);
  opacity: 0;
  pointer-events: none;
}

html.js-anim .sl.sl-styrt .sl-dekk {
  position: absolute;
  inset: -1px -2px;
  display: block;
  background: var(--flate);
  transform-origin: 100% 50%;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-boks .sl-dekk {
  inset: 2px;
  background: var(--flate-lys);
}

html.js-anim .sl.sl-styrt .sl-t {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-omrade {
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-markor {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;
  height: 1.3em;
  background: var(--tekst);
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-sendt {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-papir-indre,
html.js-anim .sl.sl-styrt .sl-foto-bilde,
html.js-anim .sl.sl-styrt .sl-send,
html.js-anim .sl.sl-styrt .sl-sendt,
html.js-anim .sl.sl-styrt .sl-q-belop i,
html.js-anim .sl.sl-styrt .sl-q-strek {
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-q-belop i,
html.js-anim .sl.sl-styrt .sl-q-strek {
  transform: scaleX(0);
}

html.js-anim .sl.sl-styrt .sl-panel-2 {
  transform: translate3d(0, calc(100% + var(--sl-vent)), 0);
  box-shadow: 0 -24px 48px -18px var(--skygge-farge);
}

html.js-anim .sl.sl-styrt .sl-laser {
  position: absolute;
  display: block;
  background: var(--gull-lys);
  box-shadow: 0 0 6px 1px var(--gull), 0 0 18px 2px var(--gull);
  pointer-events: none;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-laser-h {
  left: 0;
  right: 0;
  top: var(--sl-ly);
  height: 2px;
  margin-top: -1px;
  transform: scaleX(0);
  transform-origin: var(--sl-lx) 50%;
}

html.js-anim .sl.sl-styrt .sl-laser-v {
  top: 0;
  bottom: 0;
  left: var(--sl-lx);
  width: 2px;
  margin-left: -1px;
  transform: scaleY(0);
  transform-origin: 50% var(--sl-ly);
}

html.js-anim .sl.sl-styrt .sl-laser-punkt {
  position: absolute;
  top: var(--sl-ly);
  left: var(--sl-lx);
  display: block;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--gull-lys);
  box-shadow: 0 0 0 5px var(--skygge-farge), 0 0 16px 5px var(--gull);
  opacity: 0;
  will-change: transform, opacity;
}

html.js-anim .sl.sl-styrt .sl-panel-3 {
  transform: translate3d(calc(100% + var(--sl-vent)), 0, 0);
  box-shadow: -24px 0 48px -18px var(--skygge-farge);
}

html.js-anim .sl.sl-styrt .sl-hel,
html.js-anim .sl.sl-styrt .sl-flis,
html.js-anim .sl.sl-styrt .sl-bildetekst {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-flis {
  will-change: transform, opacity;
}

html.js-anim .sl.sl-styrt .sl-vindu {
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-vindu-mot {
  transform: translate3d(100%, 0, 0);
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-kant {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 3px;
  background: var(--gull-lys);
  box-shadow: 0 0 8px 1px var(--gull), 0 0 26px 4px var(--gull);
  opacity: 0;
}

html.js-anim .sl.sl-styrt {
  --sl-bunn: calc(var(--ringelinje-h) + 14px);
}

@media (min-width: 1024px) {
  html.js-anim .sl.sl-styrt {
    --sl-bunn: 24px;
  }
}

html.js-anim .sl.sl-styrt .sl-flate {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "frem" "ramme" "liste";
  gap: 14px 0;
  align-items: stretch;
  padding: calc(var(--meny-h) + 12px) 0 var(--sl-bunn);
}

html.js-anim .sl.sl-styrt .sl-venstre {
  display: contents;
}

html.js-anim .sl.sl-styrt .sl-fremdrift {
  display: flex;
  grid-area: frem;
  align-items: center;
  gap: 14px;
}

.sl-teller {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: var(--vekt-halv);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.sl-teller-vindu {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
}

.sl-teller-rull {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.sl-teller-av {
  color: var(--tekst-dempet);
}

.sl-linje {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: var(--strek);
}

.sl-linje-fyll {
  position: absolute;
  inset: 0;
  background: var(--aksent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-ramme {
  grid-area: ramme;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

html.js-anim .sl.sl-styrt .sl-liste {
  display: grid;
  grid-area: liste;
}

html.js-anim .sl.sl-styrt .sl-steg {
  display: block;
  grid-area: 1 / 1;
  will-change: transform, opacity;
}

html.js-anim .sl.sl-styrt .sl-steg + .sl-steg {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-nr,
html.js-anim .sl.sl-styrt .sl-led,
html.js-anim .sl.sl-styrt .sl-knapper {
  display: none;
}

html.js-anim .sl.sl-styrt .sl-steg h3 {
  padding-top: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
}

html.js-anim .sl.sl-styrt .sl-steg p {
  margin-top: 0.3em;
  color: var(--tekst);
}

@media (min-width: 900px) {
  html.js-anim .sl.sl-styrt .sl-flate {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "frem frem" "liste ramme";
    column-gap: clamp(28px, 4vw, 64px);
  }

  html.js-anim .sl.sl-styrt .sl-liste {
    align-self: center;
  }
}

@media (min-width: 1024px) and (min-height: 540px) {
  html.js-anim .sl.sl-styrt:not(.sl-trang) {
    --sl-modus: pinne;
    --sl-rad-gap: clamp(12px, 2.7svh, 30px);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-flate {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "venstre ramme";
    column-gap: clamp(36px, 4.6vw, 84px);
    padding: calc(var(--meny-h) + var(--sl-luft)) 0 var(--sl-luft);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-venstre {
    display: flex;
    grid-area: venstre;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(18px, 3.6svh, 40px);
    min-height: 0;
    padding-top: 4px;
    overflow: hidden;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-fremdrift {
    display: none;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-liste {
    display: flex;
    flex: none;
    align-self: auto;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg {
    display: grid;
    grid-area: auto;
    cursor: pointer;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg + .sl-steg {
    opacity: 1;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr {
    display: grid;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-led {
    display: block;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-led-fyll {
    display: block;
    transform: scaleY(0);
    will-change: transform;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr-disk,
  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr-lys {
    opacity: 0;
    will-change: transform, opacity;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr-mork {
    opacity: 1;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg-tekst {
    will-change: opacity;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg + .sl-steg .sl-steg-tekst {
    opacity: var(--sl-svak);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg h3 {
    padding-top: calc((var(--sl-nr-b) - 1.2em) / 2);
    font-size: clamp(1.2rem, 0.55rem + 2.2svh, 1.6rem);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-knapper {
    display: flex;
  }

  html.js-anim .sl.sl-styrt.sl-uten-knapp:not(.sl-trang) .sl-knapper {
    display: none;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-ramme {
    align-self: center;
    max-height: 860px;
  }
}

.sl-ramme { cursor: pointer; }