.hero { position: relative; background: var(--natt); }


.hero-scene {
  --f: 0;
  --b: max(100cqw, 156.1cqh);
  --h: calc(var(--b) / 1.561);
  --venstre: clamp(calc(100cqw - var(--b)), calc(60cqw - var(--b) * 0.6562), 0px);
  --topp: clamp(calc(100cqh - var(--h)), calc(var(--meny-h) + 3.5cqh - var(--h) * 0.2988), 0px);
  --origo: 65.62% 71.95%;
  --bunn-h: 4.4rem;                      
  --luft: clamp(1rem, 2.8cqh, 2.4rem);   
  position: relative; height: 100svh; min-height: 540px; overflow: hidden;
  container-type: size;
  background: var(--natt); color: var(--hvit);
}

@supports not (width: 1cqw) {
  .hero-scene {
    --b: max(100vw, 156.1svh);
    --venstre: clamp(calc(100vw - var(--b)), calc(60vw - var(--b) * 0.6562), 0px);
    --topp: clamp(calc(100svh - var(--h)), calc(var(--meny-h) + 3.5svh - var(--h) * 0.2988), 0px);
    --luft: clamp(1rem, 2.8svh, 2.4rem);
  }
}
html.js-anim .hero { height: calc(100svh * (1 + var(--hero-reise))); min-height: calc(540px * (1 + var(--hero-reise))); }
html.js-anim .hero-scene { position: sticky; top: 0; }

@media (max-height: 539px) {
  html.js-anim .hero, html.js-anim .hero-scene { min-height: 0; }
}


.hero-flate { position: absolute; left: var(--venstre); top: var(--topp); width: var(--b); height: var(--h); overflow: hidden; transform-origin: var(--origo); }
.hero-flate picture { display: block; width: 100%; height: 100%; }
.hero-foto { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--origo); }
html.js-anim .hero-foto { transform: scale(calc(1 + var(--f) * var(--hero-naer))); will-change: transform; }

html.js-anim .hero-flate { opacity: 0; }


.hero-ark { display: none; }
html.js-anim .hero-ark { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.hero-papir {
  position: absolute; left: 0; right: 0; top: 0; height: 118%;
  background: linear-gradient(to top, transparent, var(--kalk) 15.254%);
  will-change: transform;
}

.hero-strek-lag {
  position: absolute; inset: 0; will-change: opacity;
  -webkit-mask-image:
    radial-gradient(62% 72% at 0% 100%, transparent 46%, #000 100%),
    radial-gradient(34% 40% at 100% 100%, transparent 40%, #000 100%),
    linear-gradient(to top, transparent calc(var(--bunn-h) + 0.5rem), #000 calc(var(--bunn-h) + 4rem));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(62% 72% at 0% 100%, transparent 46%, #000 100%),
    radial-gradient(34% 40% at 100% 100%, transparent 40%, #000 100%),
    linear-gradient(to top, transparent calc(var(--bunn-h) + 0.5rem), #000 calc(var(--bunn-h) + 4rem));
  mask-composite: intersect;
}
.hero-strek { position: absolute; left: var(--venstre); top: var(--topp); width: var(--b); height: var(--h); overflow: hidden; }
.tegning {
  position: absolute; top: 0; left: calc(var(--b) * var(--tx, 0)); width: calc(var(--b) * var(--tw, 1)); height: auto;
  aspect-ratio: 2560 / 1916; overflow: visible; max-width: none;   
  transform-origin: 65.62% 61.59%; will-change: transform;
}
.tegning path {
  fill: none; stroke: var(--strek); stroke-width: calc(var(--sw, 2) * 1.25); stroke-linecap: butt;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
}
.tegning .t-d { stroke-width: calc(var(--sw, 2) * 0.85); opacity: 0.78; }
.tegning .t-s { stroke-width: calc(var(--sw, 2) * 0.6); opacity: 0.42; }

.tegning .t-k { stroke: var(--strek-mal); stroke-width: calc(var(--sw, 2) * 0.8); opacity: 0.55; }


html.js-anim .hero-innhold > *, html.js-anim .hero-innhold > h1 > *, html.js-anim .hero-prosjekt, html.js-anim .hero-bunn {
  transition: color 0.45s var(--mykt), text-shadow 0.45s var(--mykt), border-color 0.45s var(--mykt);
}
html.js-anim .hero-innhold > :not(.pa-foto):not(h1), html.js-anim .hero-innhold > h1 > :not(.pa-foto), html.js-anim .hero-prosjekt:not(.pa-foto) { color: var(--tekst); text-shadow: none; --fokus: var(--bla-tekst); }
html.js-anim .hero-innhold .hero-merke:not(.pa-foto), html.js-anim .hero-prosjekt:not(.pa-foto) .hero-merke { color: var(--bla-tekst); }
html.js-anim .hero-innhold > .hero-ingress:not(.pa-foto), html.js-anim .hero-prosjekt:not(.pa-foto) .hero-prosjekt-jobb { color: var(--tekst-dempet); }
html.js-anim .hero-knapper:not(.pa-foto) .knapp-omriss {
  color: var(--tekst); border-color: var(--linje-sterk); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.js-anim .hero-knapper:not(.pa-foto) .knapp-omriss:hover { background: var(--natt); color: var(--hvit); border-color: var(--natt); }
html.js-anim .hero-bunn:not(.pa-foto) { color: var(--tekst-dempet); border-top-color: var(--linje); text-shadow: none; }
html.js-anim .hero-bunn:not(.pa-foto) .hero-godkjent { color: var(--tekst); }
html.js-anim .hero-bunn:not(.pa-foto) .hero-fakta li + li::before { background: var(--linje); }
html.js-anim .hero-bunn:not(.pa-foto)::before { background: var(--natt); }


.hero-scene::before, .hero-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-scene::before { background: linear-gradient(to bottom, var(--hero-slor-topp), transparent 20%); }
.hero-scene::after {
  background:
    linear-gradient(to top, var(--hero-slor-bunn), var(--hero-slor-midt) 26%, transparent 50%),
    radial-gradient(110% 85% at 0% 100%, var(--hero-slor-hjorne), transparent 70%);
}


.hero-innhold {
  position: absolute; z-index: 3; left: var(--marg); bottom: calc(var(--bunn-h) + var(--luft));
  max-width: min(34rem, 50vw); max-width: min(34rem, 50cqw);
  text-shadow: 0 1px 18px var(--hero-skygge);
  --fokus: var(--hvit);
}
.hero-merke { color: var(--hvit); margin-bottom: clamp(0.65rem, 2svh, 1.1rem); margin-bottom: clamp(0.65rem, 2cqh, 1.1rem); }
.hero-merke::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }

:where(.hero h1) .hero-merke { display: flex; line-height: var(--linjehoyde); }   
.hero h1 .hero-tittel { display: block; }
.hero h1 {
  font-size: clamp(2.3rem, min(4.4vw, 8.2svh), 4.6rem); font-size: clamp(2.3rem, min(4.4cqw, 8.2cqh), 4.6rem);
  font-weight: var(--vekt-tittel);
  letter-spacing: var(--sporing-tittel); line-height: 1.02; color: inherit;
  max-width: 10.5em; text-wrap: balance;
}
.hero-ingress { margin-top: clamp(0.8rem, 2svh, 1.2rem); margin-top: clamp(0.8rem, 2cqh, 1.2rem); max-width: 29rem; font-size: var(--str-ingress); line-height: 1.5; color: var(--hero-tekst-dempet); }
.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.1rem, 3.2svh, 1.9rem); margin-top: clamp(1.1rem, 3.2cqh, 1.9rem); }
.hero .knapp { text-shadow: none; }
.hero .knapp-omriss {
  color: var(--hvit); border-color: var(--hero-kant); background: var(--hero-knapp-flate);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .knapp-omriss:hover { background: var(--hvit); color: var(--natt); border-color: var(--hvit); }
.hero-ring { font-variant-numeric: tabular-nums; white-space: nowrap; }


.hero-prosjekt {
  position: absolute; z-index: 3; right: var(--marg); bottom: calc(var(--bunn-h) + var(--luft));
  display: grid; justify-items: end; gap: 0.3rem; text-align: right;
  color: var(--hvit); text-decoration: none; text-shadow: 0 1px 18px var(--hero-skygge);
  --fokus: var(--hvit);
}
.hero-prosjekt .hero-merke { margin-bottom: 0.2rem; }
.hero-prosjekt-navn {
  font-size: clamp(1.35rem, 1.05rem + 0.9vw, 2rem); font-weight: var(--vekt-tittel); letter-spacing: -0.02em; line-height: 1.1;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size 0.4s var(--mykt);
}
.hero-prosjekt:hover .hero-prosjekt-navn { background-size: 100% 1px; }
.hero-prosjekt-jobb { font-size: 0.98rem; color: var(--hero-tekst-dempet); }

@media (max-height: 539px) {
  .hero-prosjekt, .hero-innhold .hero-merke { display: none; }
}


.hero-bunn {
  position: absolute; z-index: 3; left: var(--marg); right: var(--marg); bottom: 0;
  height: var(--bunn-h); display: flex; align-items: center;
  border-top: 1px solid var(--hero-linje);
  font-size: 0.95rem; font-weight: 500; color: var(--hero-tekst-dempet);
  text-shadow: 0 1px 12px var(--hero-skygge);
}
.hero-fakta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; }
.hero-fakta li { display: inline-flex; align-items: center; }
.hero-fakta li + li::before { content: ""; width: 1px; height: 1.05em; margin: 0 1.15rem; background: var(--hero-linje); }
.hero-godkjent { gap: 0.7rem; color: var(--hvit); }
.hero-godkjent img { width: 38px; height: auto; flex: none; border-radius: var(--radius); }

html.js-anim .hero-bunn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--hvit); transform-origin: left center; transform: scaleX(var(--f));
}



html.js-anim .hero-innhold > :not(h1), html.js-anim .hero-innhold > h1 > *, html.js-anim .hero-prosjekt, html.js-anim .hero-bunn { animation: hero-inn 0.9s var(--mykt) both; }
html.js-anim .hero-innhold > h1 > :nth-child(2) { animation-delay: 0.08s; }
html.js-anim .hero-innhold > :nth-child(2) { animation-delay: 0.16s; }
html.js-anim .hero-innhold > :nth-child(3) { animation-delay: 0.22s; }
html.js-anim .hero-prosjekt { animation-delay: 0.35s; }
html.js-anim .hero-bunn { animation-delay: 0.45s; }
@keyframes hero-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (min-aspect-ratio: 1001/1000) {
  
  @container (max-height: 899px) {
    .hero-ingress { display: none; }
  }
  @supports not (width: 1cqw) {
    @media (max-height: 899px) { .hero-ingress { display: none; } }
  }
}

@media (min-aspect-ratio: 1001/1000) and (max-aspect-ratio: 29/20) {
  .hero-innhold { bottom: auto; top: calc(var(--meny-h) + 1.5cqh); }
  .hero-innhold .hero-merke, .hero-ingress { display: none; }
  .hero h1 { font-size: clamp(2.1rem, min(3.8vw, 6svh), 3.2rem); font-size: clamp(2.1rem, min(3.8cqw, 6cqh), 3.2rem); }
  .hero-scene::before { background: linear-gradient(to bottom, var(--hero-slor-topp), transparent 46%); }
  .hero .knapp-omriss { background: var(--hero-knapp-himmel); }
  
  .hero-strek-lag {
    -webkit-mask-image:
      radial-gradient(58% 62% at 0% 0%, transparent 50%, #000 100%),
      linear-gradient(to top, transparent calc(var(--bunn-h) + 0.5rem), #000 calc(var(--bunn-h) + 3rem));
    mask-image:
      radial-gradient(58% 62% at 0% 0%, transparent 50%, #000 100%),
      linear-gradient(to top, transparent calc(var(--bunn-h) + 0.5rem), #000 calc(var(--bunn-h) + 3rem));
  }
  
  @supports not (width: 1cqw) {
    .hero-innhold { top: calc(var(--meny-h) + 1.5svh); }
  }
}


@media (max-aspect-ratio: 1/1) {
  .hero-scene {
    --b: 100cqw;
    --h: calc(100cqw * 1.3306);
    --venstre: 0px;
    --topp: min(0px, calc(var(--meny-h) + 8cqh - var(--h) * 0.2557));
    --origo: 50% 61.59%;
    --tx: -0.6667;                       
    --tw: 1.7778;
  }
  @supports not (width: 1cqw) {
    .hero-scene {
      --b: 100vw;
      --h: calc(100vw * 1.3306);
      --topp: min(0px, calc(var(--meny-h) + 8svh - var(--h) * 0.2557));
    }
  }
  .hero-flate::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%;
    background: linear-gradient(to top, var(--natt), transparent);
  }
  .hero-scene::after { background: linear-gradient(to top, var(--hero-slor-bunn), transparent 45%); }
  
  .hero-strek-lag {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--topp) + var(--h) * 0.62), transparent calc(var(--topp) + var(--h) * 0.97));
    mask-image: linear-gradient(to bottom, #000 calc(var(--topp) + var(--h) * 0.62), transparent calc(var(--topp) + var(--h) * 0.97));
  }
  .hero-innhold { right: var(--marg); max-width: 34rem; }
  .hero h1 { font-size: clamp(2.2rem, 9.6vw, 3.6rem); font-size: clamp(2.2rem, 9.6cqw, 3.6rem); }
  .hero-prosjekt { bottom: auto; top: calc(var(--meny-h) + 1.5cqh); }
  
  .hero-scene::before {
    background: linear-gradient(to bottom, var(--hero-slor-himmel) calc(var(--meny-h) + 1.5cqh + 3.6rem), transparent calc(var(--meny-h) + 1.5cqh + 6.2rem));
  }
  .hero-prosjekt .hero-merke { display: none; }
  .hero-prosjekt-navn { font-size: clamp(1.15rem, 4.6vw, 1.6rem); font-size: clamp(1.15rem, 4.6cqw, 1.6rem); }
  .hero-prosjekt-jobb { font-size: 0.9rem; color: var(--hvit); }
  
  @container (max-height: 799px) {
    .hero-ingress { display: none; }
  }
  @supports not (width: 1cqw) {
    .hero-prosjekt { top: calc(var(--meny-h) + 1.5svh); }
    .hero-scene::before {
      background: linear-gradient(to bottom, var(--hero-slor-himmel) calc(var(--meny-h) + 1.5svh + 3.6rem), transparent calc(var(--meny-h) + 1.5svh + 6.2rem));
    }
    @media (max-height: 799px) { .hero-ingress { display: none; } }
  }
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .hero-scene { --bunn-h: 5.6rem; --luft: 1.1rem; }
  .hero-bunn { font-size: 0.88rem; }
  .hero-fakta { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 0.45rem 1rem; width: 100%; }
  .hero-fakta li + li::before { display: none; }
  .hero-godkjent img { width: 30px; }
  .hero-knapper { flex-wrap: nowrap; gap: 0.6rem; }
  .hero-knapper .knapp { flex: 1 1 auto; padding-inline: 0.9rem; }
}

@media (max-width: 359px) {
  .hero-ring svg { display: none; }
  .hero-knapper .knapp { padding-inline: 0.6rem; }
}