/* Renergi Infra: shared styles (base, buttons, menu). Section styles live in their own files. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;   /* a safety net under 320 px; clip, unlike hidden, keeps position: sticky working */
  background: var(--kalk);
  color: var(--tekst);
  font-family: var(--font);
  font-size: var(--str-tekst);
  font-weight: var(--vekt-tekst);
  line-height: var(--linjehoyde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }   /* the height attribute only reserves the shape; the width decides */
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.skjult {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hopp {
  position: fixed; left: var(--marg); top: 0.75rem; z-index: 200;
  padding: 0.7rem 1rem; background: var(--natt); color: var(--tekst-lys);
  transform: translateY(-160%); transition: transform 0.2s var(--mykt);
}
.hopp:focus { transform: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

/* a small label in capitals; .merke-energi draws a short line in the logo's gradient in front of it */
.merke {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: var(--str-merke); font-weight: var(--vekt-merke);
  letter-spacing: var(--sporing-merke); text-transform: uppercase;
}
.merke-energi::before { content: ""; width: 1.9rem; height: 2px; background: var(--energi); flex: none; }

/* ---------- buttons ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.85rem 1.5rem;
  border: 1px solid var(--natt); border-radius: var(--radius);
  background: var(--natt); color: var(--tekst-lys);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.25s var(--mykt), color 0.25s var(--mykt), border-color 0.25s var(--mykt);
}
.knapp:hover { background: var(--natt-3); border-color: var(--natt-3); }
.knapp-omriss { background: transparent; color: var(--tekst); border-color: var(--linje-sterk); }
.knapp-omriss:hover { background: var(--natt); color: var(--tekst-lys); border-color: var(--natt); }
/* the logo's red: the button that starts a conversation */
.knapp-rod { background: var(--rod-knapp); border-color: var(--rod-knapp); color: var(--hvit); }
.knapp-rod:hover { background: var(--rod-knapp-dyp); border-color: var(--rod-knapp-dyp); }
.knapp svg { width: 18px; height: 18px; flex: none; }
.knapp .pil { transition: transform 0.3s var(--mykt); }
.knapp:hover .pil { transform: translateX(3px); }

/* ---------- menu ---------- */
.meny {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--meny-h);
  display: flex; align-items: center; gap: 1.25rem; padding: 0 var(--marg);
  color: var(--tekst);
  transition: background-color 0.35s var(--mykt), box-shadow 0.35s var(--mykt), color 0.35s var(--mykt);
}
/* without JavaScript nothing sets .matt, so the bar keeps its ground from the start (the content scrolls under it) */
.meny.matt, html:not(.js) .meny {
  background: var(--meny-matt);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linje);
}
.meny-logo { display: block; flex: none; width: clamp(128px, 11vw, 162px); }
.meny-logo img { width: 100%; height: auto; }
.meny-logo .logo-lys { display: none; }
/* on the hero the bar turns white; an open phone menu lays its light ground behind it, so not then */
/* (html.js: without JavaScript the bar keeps its light ground, so it keeps its dark text too) */
html.js .meny.pa-bilde:not(.matt):not(.apen) .meny-logo .logo-mork { display: none; }
html.js .meny.pa-bilde:not(.matt):not(.apen) .meny-logo .logo-lys { display: block; }
html.js .meny.pa-bilde:not(.matt):not(.apen) { color: var(--tekst-lys); --fokus: var(--hvit); }
/* a soft veil behind the bar on a photo, so its white text keeps 4.5:1 also where the photo is bright */
.meny::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--meny-h) * 1.6); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 21, 28, 0.66), rgba(14, 21, 28, 0.5) 55%, rgba(14, 21, 28, 0));
  opacity: 0; transition: opacity 0.35s var(--mykt);
}
html.js .meny.pa-bilde:not(.matt):not(.apen)::before { opacity: 1; }

/* Facebook and LinkedIn to the left of the first menu item (Sverre 25.10.2026, Janis: «jeg vil at facebook ikonet skal være
   synlig på heroen til venstre for se alle prosjekter») */
.meny-sosial { display: none; align-items: center; gap: 0.15rem; margin-left: auto; }
.meny-sosial a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; opacity: 0.85; transition: opacity 0.2s, background-color 0.2s; }
.meny-sosial a:hover { opacity: 1; background: rgba(127, 127, 127, 0.16); }
.meny-sosial svg { width: 17px; height: 17px; }
.meny-lenker { display: none; align-items: center; gap: clamp(1rem, 1.9vw, 1.9rem); margin-left: auto; }
.meny-sosial + .meny-lenker { margin-left: clamp(0.6rem, 1.2vw, 1.2rem); }
.meny-lenker > a, .meny-ned { text-decoration: none; font-size: 0.98rem; font-weight: 500; position: relative; padding: 0.4rem 0; white-space: nowrap; }
.meny-lenker > a::after, .meny-ned span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--mykt);
}
.meny-lenker > a:hover::after, .meny-lenker > a[aria-current="page"]::after,
.meny-ned:hover span::after, .meny-ned[aria-expanded="true"] span::after, .meny-ned.her span::after { transform: scaleX(1); }

/* «Tjenester» with an arrow down: a list of all the services */
.meny-gruppe { position: relative; }
.meny-ned {
  display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: none; cursor: pointer; color: inherit;
}
.meny-ned span { position: relative; }
.meny-ned svg { width: 12px; height: 12px; transition: transform 0.3s var(--mykt); }
.meny-ned[aria-expanded="true"] svg { transform: rotate(180deg); }
.meny-panel {
  position: absolute; top: calc(100% + 0.9rem); left: -1.25rem; width: 22rem;
  padding: 0.6rem; background: var(--hvit); color: var(--tekst); border-radius: var(--radius);
  box-shadow: 0 18px 50px -12px var(--skygge), 0 0 0 1px var(--linje);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s var(--mykt), transform 0.25s var(--mykt), visibility 0s linear 0.25s;
  --fokus: var(--rod-tekst);
}
html:not(.js) .meny-gruppe:hover .meny-panel, html:not(.js) .meny-gruppe:focus-within .meny-panel { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .sprak, html:not(.js) .meny-knapp { display: none; }
.meny-gruppe.apen .meny-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--mykt), transform 0.25s var(--mykt); }
.meny-panel a { display: grid; gap: 0.1rem; padding: 0.7rem 0.8rem; text-decoration: none; border-radius: var(--radius); }
.meny-panel a:hover { background: var(--kalk); }
.meny-panel strong { font-weight: 600; font-size: 0.98rem; }
.meny-panel small { font-size: 0.86rem; line-height: 1.4; color: var(--tekst-dempet); }
.meny-panel .meny-alle { margin-top: 0.3rem; padding-top: 0.85rem; border-top: 1px solid var(--linje); border-radius: 0; }
.meny-panel .meny-alle strong { font-size: 0.92rem; }

.meny-hoyre { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
@media (min-width: 1024px) { .meny-lenker + .meny-hoyre { margin-left: clamp(0.5rem, 1.6vw, 1.5rem); } }
.sprak {
  display: inline-flex; align-items: center; gap: 0.15rem; min-height: 44px; padding: 0.45rem 0.35rem;
  border: 0; background: none; cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em;
}
.sprak span { padding-bottom: 2px; border-bottom: 1px solid transparent; opacity: 0.72; }
.sprak .skille { opacity: 0.45; border: 0; }
html[lang="nb"] .sprak [data-sprak="no"], html[lang="en"] .sprak [data-sprak="en"] { opacity: 1; border-bottom-color: currentColor; }
.meny-ring { display: none; align-items: center; gap: 0.45rem; text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meny-ring svg { width: 17px; height: 17px; }
.meny-prat { min-height: 42px; padding: 0.6rem 1.15rem; font-size: 0.95rem; white-space: nowrap; }
@media (min-width: 1180px) { .meny-sosial { display: flex; } }

.meny-knapp {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer;
}
.meny-knapp span { display: block; height: 1.5px; background: currentColor; transition: transform 0.3s var(--mykt), opacity 0.2s; }
.meny.apen .meny-knapp span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.meny.apen .meny-knapp span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.mobilmeny {
  position: fixed; inset: 0; z-index: 90; padding: calc(var(--meny-h) + 1.5rem) var(--marg) 2rem; overflow-y: auto;
  background: var(--kalk); display: flex; flex-direction: column; gap: 0.25rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--mykt), visibility 0s linear 0.3s;
}
.meny.apen ~ .mobilmeny, .mobilmeny.apen { opacity: 1; visibility: visible; transition: opacity 0.3s var(--mykt); }
.mobilmeny a { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid var(--linje); }
.mobilmeny .mobilmeny-tjenester { display: grid; gap: 0.1rem; padding: 0.3rem 0 0.6rem 1rem; border-bottom: 1px solid var(--linje); }
.mobilmeny .mobilmeny-tjenester a { font-size: 1.05rem; font-weight: 400; letter-spacing: 0; border: 0; padding: 0.3rem 0; }
.mobilmeny .mobilmeny-kontakt { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 0.75rem; }
.mobilmeny .mobilmeny-kontakt a { font-size: 1.05rem; font-weight: 500; border: 0; padding: 0; }
.mobilmeny .mobilmeny-sosial { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.mobilmeny .mobilmeny-sosial a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linje); border-radius: 50%; }
.mobilmeny .mobilmeny-sosial svg { width: 18px; height: 18px; }

/* without JavaScript the phone menu cannot open: below 1024 px its links stand under the bar instead */
@media (max-width: 1023px) {
  html:not(.js) .mobilmeny {
    position: relative; inset: auto; z-index: auto; opacity: 1; visibility: visible;
    padding: calc(var(--meny-h) + 0.5rem) var(--marg) 1.5rem;
  }
  html:not(.js) .mobilmeny a { font-size: 1.4rem; }
  html:not(.js) .mobilmeny .mobilmeny-kontakt { margin-top: 1rem; }
}
@media (min-width: 1024px) {
  .meny-lenker { display: flex; }
  .meny-knapp, .mobilmeny { display: none; }
}
@media (min-width: 1300px) {
  .meny-ring { display: inline-flex; }
}
@media (max-width: 1023px) {
  .meny-prat { display: none; }
}

/* ---------- sections ---------- */
.seksjon { position: relative; padding: var(--seksjon-luft) var(--marg); }
.ramme { max-width: var(--maks); margin: 0 auto; }

/* ---------- section grounds: two neighbours never share one ---------- */
.seksjon-kalk { background: var(--kalk); }
.seksjon-stein { background: var(--stein); }
.seksjon-hvit { background: var(--hvit); }
.seksjon-natt, .seksjon-natt-2 { background: var(--natt); color: var(--tekst-lys); --fokus: var(--hvit); }
.seksjon-natt-2 { background: var(--natt-2); }
.ramme-smal { max-width: 47.5rem; }

/* a section's head: mark, title and ingress; .delt sets the ingress beside the title on wide screens */
.seksjon-topp { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.seksjon-topp > .merke { grid-column: 1 / -1; }
.tittel-2 {
  font-size: var(--str-h2); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.06;
  text-wrap: balance;
}
.ingress { font-size: var(--str-ingress); line-height: 1.55; color: var(--tekst-dempet); max-width: 38rem; }
.seksjon-natt .ingress, .seksjon-natt-2 .ingress { color: var(--tekst-lys-dempet); }
@media (min-width: 1024px) {
  .seksjon-topp.delt { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: end; }
}
.lenke-pil {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}
.lenke-pil svg { width: 16px; height: 16px; transition: transform 0.3s var(--mykt); }
.lenke-pil:hover svg { transform: translateX(3px); }

/* ---------- running text ---------- */
.tekst { max-width: 44rem; }
.tekst > * + * { margin-top: 1em; }
.tekst h2 {
  margin-top: 2.2em; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); font-weight: var(--vekt-tittel);
  letter-spacing: var(--sporing-tittel); line-height: 1.12; text-wrap: balance;
}
.tekst h2:first-child, .tekst h3:first-child { margin-top: 0; }
.tekst .merke + h2 { margin-top: 0.6rem; }
.tekst + .skjema { margin-top: 2rem; }
.tekst h3 { margin-top: 1.8em; font-size: var(--str-h3); font-weight: 500; line-height: 1.25; }
.tekst h2 + *, .tekst h3 + * { margin-top: 0.6em; }
.tekst ul, .tekst ol { display: grid; gap: 0.5em; }
.tekst ul li { position: relative; padding-left: 1.5em; }
.tekst ul li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.8em; height: 2px; background: var(--energi); }
.tekst ol { counter-reset: punkt; }
.tekst ol li { position: relative; padding-left: 2em; counter-increment: punkt; }
.tekst ol li::before { content: counter(punkt) "."; position: absolute; left: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tekst a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tekst strong { font-weight: 600; }
.seksjon-natt .tekst, .seksjon-natt-2 .tekst { color: var(--tekst-lys-dempet); }
.seksjon-natt .tekst h2, .seksjon-natt .tekst h3, .seksjon-natt-2 .tekst h2 { color: var(--tekst-lys); }
.info-boks {
  position: relative; margin-top: 2rem; padding: 1.3rem 1.5rem 1.35rem 1.7rem;
  background: var(--hvit); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linje);
}
.info-boks::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--gul), var(--oransje), var(--rod)); border-radius: var(--radius) 0 0 var(--radius); }
.seksjon-hvit .info-boks { background: var(--kalk); }
.info-boks p + p { margin-top: 0.8rem; }

/* ---------- forms ---------- */
.skjema { display: grid; gap: 1.4rem; --fokus: var(--rod-tekst); }
.skjema-del { margin: 0; padding: 0; border: 0; display: grid; gap: 1.1rem; min-width: 0; }
.skjema-del + .skjema-del { padding-top: 1.6rem; border-top: 1px solid var(--linje); }
.skjema-del > legend {
  padding: 0; margin-bottom: 1.1rem; font-size: var(--str-h3); font-weight: 500; line-height: 1.25; float: left; width: 100%;
}
.skjema-del > legend + * { clear: both; }
.felt { display: grid; gap: 0.4rem; min-width: 0; }
.felt-rad { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .felt-rad { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.felt label, .felt-navn, .valg > legend { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.krav { color: var(--rod-tekst); }
.valgfri { font-weight: 400; color: var(--tekst-dempet); }
.felt input, .felt select, .felt textarea {
  width: 100%; min-height: 50px; padding: 0.75rem 0.9rem; font: inherit; font-size: 1rem; color: var(--tekst);
  background: var(--hvit); border: 1px solid var(--linje-felt); border-radius: var(--radius);
  transition: border-color 0.2s var(--mykt), box-shadow 0.2s var(--mykt);
}
.felt textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: var(--natt); box-shadow: 0 0 0 3px rgba(204, 51, 64, 0.22); }
.felt [aria-invalid="true"] { border-color: var(--feil); }
.valg { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.6rem; }
.valg > legend { padding: 0; margin-bottom: 0.6rem; }
.valg[aria-invalid="true"] > legend { color: var(--feil); }
/* a required radio group left empty: its question and its choices turn red until one is picked */
.valg:has([aria-invalid="true"]) > legend { color: var(--feil); }
.valg:has([aria-invalid="true"]) label { border-color: var(--feil); }
.valg-rad, .valg-rutenett { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.valg-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.valg label, .samtykke {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0.55rem 0.95rem;
  background: var(--hvit); border: 1px solid var(--linje-felt); border-radius: var(--radius); cursor: pointer;
  font-size: 0.98rem; line-height: 1.35; transition: border-color 0.2s var(--mykt), background-color 0.2s var(--mykt);
}
.valg label:hover, .samtykke:hover { border-color: var(--natt); }
.valg label:has(input:checked) { border-color: var(--natt); box-shadow: inset 0 0 0 1px var(--natt); }
.valg input, .samtykke input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--rod-knapp); }
.samtykke { display: flex; align-items: flex-start; min-height: 0; padding: 0.9rem 1rem; }
.samtykke input { margin-top: 0.15rem; }
.kontroll-felt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skjema .knapp { justify-self: start; min-width: 12rem; }
.skjema-status { min-height: 1.5em; font-weight: 500; }
p, li { text-wrap: pretty; }
h3, h4 { text-wrap: balance; }
.skjema-uten-js { padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--stein); font-weight: 500; }
.skjema-status.feil { color: var(--feil); }
.skjema.sendt .skjema-status { color: var(--tekst); }
.seksjon-hvit .felt input, .seksjon-hvit .felt select, .seksjon-hvit .felt textarea, .seksjon-hvit .valg label { background: var(--kalk); }
/* the photo field (js/skjema-bilder.js) */
.felt-bilder { gap: 0.55rem; }
.bilder-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.felt .bilder-inndata { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.bilder-knapp {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 46px; padding: 0.6rem 1rem; cursor: pointer;
  background: var(--hvit); border: 1px dashed var(--linje-felt); border-radius: var(--radius); font-weight: 500;
}
.bilder-knapp svg { width: 20px; height: 20px; }
.bilder-inndata:focus-visible + .bilder-knapp { outline: 2px solid var(--fokus); outline-offset: 3px; }
.bilder-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bilder-liste li { position: relative; width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden; background: var(--stein); }
.bilder-liste img { width: 100%; height: 100%; object-fit: cover; }
.bilder-liste button {
  position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; padding: 4px; border: 0; border-radius: 50%;
  background: rgba(14, 21, 28, 0.8); color: var(--hvit); cursor: pointer;
}
.bilder-hint { font-size: 0.9rem; color: var(--tekst-dempet); }
.bilder-melding:not(:empty)::before { content: " "; }

/* ---------- the page top of every subpage (dark, so the menu stands light on it) ---------- */
.sidetopp {
  position: relative; overflow: hidden; background: var(--natt); color: var(--tekst-lys); --fokus: var(--hvit);
  padding: calc(var(--meny-h) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem)) var(--marg) clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
.sidetopp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--energi); }
.sidetopp .ramme { position: relative; z-index: 1; }
.brodsmuler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; font-size: 0.9rem; color: var(--tekst-lys-dempet); }
.brodsmuler a { text-decoration: none; }
.brodsmuler a:hover { text-decoration: underline; }
.brodsmuler [aria-current] { color: var(--tekst-lys); }
.sidetopp h1 {
  margin-top: 1rem; max-width: 18em; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); font-weight: var(--vekt-tittel);
  letter-spacing: var(--sporing-tittel); line-height: 1.03; text-wrap: balance;
}
.sidetopp-ingress { margin-top: 1.3rem; max-width: 40rem; font-size: var(--str-ingress); line-height: 1.55; color: var(--tekst-lys-dempet); }
/* with a photo: the photo fills the right side, melting into the night where the text stands */
.sidetopp-foto { position: absolute; inset: 0 0 0 auto; width: min(56%, 60rem); }
.sidetopp-foto img { width: 100%; height: 100%; object-fit: cover; }
.sidetopp-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--natt), rgba(14, 21, 28, 0.55) 38%, rgba(14, 21, 28, 0.1)); }
@media (max-width: 899px) {
  .sidetopp-foto { inset: 0; width: 100%; opacity: 0.4; }
  .sidetopp-foto::after { background: linear-gradient(0deg, var(--natt), rgba(14, 21, 28, 0.4)); }
}

/* ---------- a band that asks for contact, at the foot of the subpages ---------- */
.ring-band { background: var(--stein); }
.ring-band .ramme { display: grid; gap: 1.5rem 3rem; align-items: center; }
.ring-band h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.08; }
.ring-band p { margin-top: 0.8rem; color: var(--tekst-dempet); max-width: 34rem; }
.ring-band .knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 900px) { .ring-band .ramme { grid-template-columns: 1fr auto; } }

/* ---------- footer ---------- */
.bunn { background: var(--natt); color: var(--tekst-lys-dempet); padding: clamp(3.5rem, 2rem + 4vw, 6rem) var(--marg) 2rem; --fokus: var(--hvit); }
.bunn a { text-decoration: none; }
.bunn a:hover { color: var(--tekst-lys); text-decoration: underline; }
.bunn-rad { display: grid; gap: 2.5rem 3rem; }
.bunn-logo { width: 190px; }
.bunn-slagord { margin-top: 1.2rem; font-size: 1.35rem; font-weight: var(--vekt-tittel); letter-spacing: -0.01em; color: var(--tekst-lys); max-width: 16em; line-height: 1.25; }
.bunn-kontakt { margin-top: 1.3rem; display: grid; gap: 0.35rem; font-style: normal; }
.bunn-kontakt a { color: var(--tekst-lys); font-weight: 500; }
.bunn h2 { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--tekst-lys); margin-bottom: 1rem; }
.bunn ul { display: grid; gap: 0.55rem; }
.bunn-sosial { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.bunn-sosial a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linje-lys); border-radius: 50%; color: var(--tekst-lys); }
.bunn-sosial a:hover { border-color: var(--tekst-lys); }
.bunn-sosial svg { width: 18px; height: 18px; }
.bunn-fot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.5rem; border-top: 1px solid var(--linje-lys); font-size: 0.9rem;
}
@media (min-width: 760px) { .bunn-rad { grid-template-columns: 1.4fr repeat(3, 1fr); } }

/* ---------- motion that comes in once (sider.js sets .synlig); hidden only when motion is allowed ---------- */
html.js-anim [data-vis] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--mykt), transform 0.9s var(--mykt); transition-delay: var(--forsink, 0s); }
html.js-anim [data-vis].synlig { opacity: 1; transform: none; }

.sidetopp-knapper { margin-top: 1.8rem; }
.sidetopp .sidetopp-omriss { color: var(--hvit); border-color: var(--hero-kant); background: var(--hero-knapp-flate); }
.sidetopp .sidetopp-omriss:hover { background: var(--hvit); color: var(--natt); border-color: var(--hvit); }