/* ───────────────────────────────────────────────────────────
   Lesbart. Et merke levert av Index Development.
   Helt hvit side. Forsiden er bare verktøyet: søkefeltet midt på
   skjermen med logoene til tjenestene folk bruker svevende rundt,
   og resultatet rett under. Rødt bare for det som må rettes.
   ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Albert Sans';
  src: url(/fonter/albert-sans.woff2) format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url(/fonter/newsreader.woff2) format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url(/fonter/newsreader-kursiv.woff2) format('woff2');
  font-weight: 300 500; font-style: italic; font-display: swap;
}

:root {
  --hvit: #FFFFFF;
  --flate: #F6F6F4;
  --blekk: #0E0E0D;
  --blekk-2: #55565A;
  --blekk-3: #6B6C70;
  --rod: #C8361D;
  --rod-tekst: #B0301A;
  --brun: #8A5A00;
  --strek: rgba(14, 14, 13, .10);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bredde: 820px;
  --kant: clamp(16px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--hvit); color: var(--blekk);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blekk); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp { position: absolute; left: -9999px; top: 8px; background: var(--blekk); color: #fff; padding: 10px 16px; z-index: 10; }
.hopp:focus { left: 8px; }

.flate { width: 100%; max-width: calc(var(--bredde) + 2 * var(--kant)); margin-inline: auto; padding-inline: var(--kant); }

.lenke { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(14,14,13,.3); text-underline-offset: 4px; }
.lenke:hover { text-decoration-color: var(--blekk); }

.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--blekk); color: #fff; font: 500 1rem/1 var(--sans);
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.knapp:hover { background: #2a2a28; }
.knapp:disabled { opacity: .6; cursor: default; }

/* ── Toppen ── */
.topp { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; max-width: calc(1240px + 2 * var(--kant)); position: relative; z-index: 2; }
.merke { line-height: 0; }
.merke img { height: 26px; width: auto; }
.topp-knapp {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(14,14,13,.22); background: var(--hvit); color: var(--blekk);
  font-weight: 500; font-size: .95rem; text-decoration: none; transition: border-color .15s, background .15s;
}
.topp-knapp:hover { border-color: var(--blekk); background: var(--flate); }

/* ── Fotoet bak toppen (forsiden) ──
   Tåke over fjellrygger, Glacier nasjonalpark (NPS, offentlig eiendom).
   Toppmenyen legger seg over bildet, og teksten der blir hvit. */
.hero-foto { position: relative; isolation: isolate; overflow: hidden; background: #5E6F80; }
.hero-bilde, .hero-bilde img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bilde { z-index: -2; }
.hero-bilde img { object-fit: cover; object-position: center 45%; }
.hero-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,18,26,.62) 0%, rgba(12,18,26,.34) 30%, rgba(12,18,26,.30) 62%, rgba(12,18,26,.62) 100%); }
/* Logofeltet starter under menylinja, så ingen logo legger seg oppå den. */
.med-foto .hero-ramme { margin-top: 84px; }
.med-foto .topp { position: absolute; left: 0; right: 0; top: 0; z-index: 5; }
.merke-lys { display: none; }
.med-foto .merke-mork { display: none; }
.med-foto .merke-lys { display: block; }
.med-foto .topp-knapp { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.med-foto .topp-knapp:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.med-foto .hero { padding-top: clamp(64px, 16vh, 160px); padding-bottom: clamp(110px, 20vh, 200px); }
.med-foto.har-resultat .hero { padding-top: clamp(32px, 8vh, 72px); padding-bottom: 56px; }
.med-foto .hero h1 { color: #fff; }
.med-foto .hero-under { color: rgba(255,255,255,.88); }
.med-foto .sok-merk { color: rgba(255,255,255,.78); }
.med-foto .sjekk-status { color: #fff; background: rgba(176,48,26,.85); border-radius: 10px; padding: 10px 14px; }
.med-foto .sjekk-status a { color: #fff; }
.med-foto .sok { border-color: rgba(255,255,255,.6); box-shadow: 0 30px 70px -26px rgba(5,10,18,.55); }
.med-foto .flis { box-shadow: 0 1px 2px rgba(5,10,18,.12), 0 10px 22px -10px rgba(5,10,18,.45); }
.med-foto .resultat { padding-top: clamp(32px, 5vw, 56px); }

/* ── Søket ── */
.hero-ramme { position: relative; max-width: 1240px; margin-inline: auto; }
.hero { position: relative; z-index: 1; text-align: center; padding-top: clamp(96px, 20vh, 200px); padding-bottom: clamp(96px, 18vh, 180px); }
body.har-resultat .hero { padding-top: clamp(40px, 8vh, 80px); padding-bottom: 40px; }
body.har-resultat .svev { opacity: 0; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; max-width: 15ch; margin-inline: auto; }
.hero-under { margin-top: 18px; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--blekk-2); }

.sok {
  position: relative; display: flex; align-items: center; gap: 10px; margin: clamp(32px, 4vw, 44px) auto 0; max-width: 680px; min-height: 72px;
  background: var(--hvit); border: 1px solid rgba(14,14,13,.14); border-radius: 22px; padding: 8px 8px 8px 22px;
  box-shadow: 0 1px 2px rgba(14,14,13,.04), 0 2px 6px -2px rgba(14,14,13,.06), 0 24px 56px -24px rgba(14,14,13,.28);
  transition: border-color .2s, box-shadow .3s, transform .3s cubic-bezier(.2, .7, .2, 1);
  overflow: hidden;
}
.sok:hover { border-color: rgba(14,14,13,.24); }
.sok:focus-within { border-color: rgba(14,14,13,.5); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(14,14,13,.05), 0 0 0 5px rgba(14,14,13,.05), 0 30px 64px -26px rgba(14,14,13,.34); }
.sok.feil { border-color: var(--rod); }
.sok-ikon { width: 20px; height: 20px; flex: none; color: var(--blekk-3); }
.sok input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; font: 400 1.18rem/1.3 var(--sans); color: var(--blekk); letter-spacing: -.01em; }
.sok input::placeholder { color: #A3A4A8; }
.sok input:focus { outline: none; }
.sok .knapp { flex: none; min-height: 56px; padding: 0 26px; border-radius: 16px; gap: 10px; font-size: 1.02rem; }
.sok .pil { display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.sok .knapp:hover .pil { transform: translateX(3px); }
/* Mens siden leses: en tynn linje går langs bunnen av feltet. */
.sok::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: var(--blekk); opacity: 0; }
.sok.laster::after { opacity: 1; animation: gli 1.2s ease-in-out infinite; }
.sjekk-status { margin: 16px auto 0; max-width: 56ch; color: var(--rod-tekst); }
.sjekk-status a { color: var(--blekk); }
.sok-merk { margin-top: 16px; font-size: .92rem; color: var(--blekk-3); }
@media (max-width: 560px) {
  .sok { flex-wrap: wrap; padding: 6px 6px 6px 16px; border-radius: 18px; }
  .sok input { flex: 1 1 0; padding: 14px 4px; font-size: 1.08rem; }
  .sok .knapp { flex: 1 1 100%; margin-left: -10px; min-height: 52px; }
}

/* Logoene som svever rundt søket. Plassert i prosent av rammen,
   hver med sin egen helning, fart og forsinkelse. */
.svev { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; }
.hero-ramme { container-type: inline-size; }
/* .sted plasserer logoen og tar imot musa, fokus og sugingen inn i søket.
   .flis inni svever, kommer inn og sprer seg når man ruller. Delt i to,
   så bevegelsene ikke slåss om samme transform. */
.sted {
  position: absolute; left: var(--x); top: var(--y);
  --ax: 0px; --ay: 0px;
  transform: translate(calc(var(--ax) + var(--mx, 0) * var(--z, 1) * 1px), calc(var(--ay) + var(--my, 0) * var(--z, 1) * 1px));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, scale .7s ease;
}
/* Logofliser: kvadratiske, logoen i midten. */
.flis.flis-ikon, .cta-flis.cta-ikon { width: var(--s, 64px); height: var(--s, 64px); padding: 0; display: grid; place-items: center; border-radius: 20px; }
.flis-ikon img, .cta-ikon img { width: 46%; height: 46%; }
/* Musa over en logo: den løfter seg og viser navnet. */
.sted { pointer-events: auto; }
.flis-ikon { position: relative; transition: scale .3s cubic-bezier(.2, .7, .2, 1.4), box-shadow .3s; }
.sted:hover .flis-ikon { scale: 1.1; box-shadow: 0 1px 2px rgba(14,14,13,.06), 0 22px 40px -16px rgba(14,14,13,.35); }
.flis-ikon[data-navn]::after {
  content: attr(data-navn); position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 6px;
  background: var(--blekk); color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  padding: 5px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .25s;
}
.sted:hover .flis-ikon[data-navn]::after { opacity: 1; translate: -50% 0; }
/* Fliser på høyre side festes fra høyre kant, så navnet aldri går utenfor skjermen. */
.sted.hoyre, .cta-flis.hoyre { left: auto; right: calc(100% - var(--x)); }
.svev.fokus .sted { --ax: var(--tx); --ay: var(--ty); }
.svev.suges .sted { --ax: var(--cx); --ay: var(--cy); opacity: 0; scale: .35; transition: transform .8s cubic-bezier(.6, 0, .4, 1), opacity .5s ease .3s, scale .8s cubic-bezier(.6, 0, .4, 1); }
.flis {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .62em 1.05em; font-size: calc(var(--s, 64px) * .27); font-weight: 600; letter-spacing: -.02em; color: var(--blekk);
  background: var(--hvit); border: 1px solid rgba(14,14,13,.08);
  border-radius: 999px; box-shadow: 0 1px 2px rgba(14,14,13,.05), 0 14px 30px -14px rgba(14,14,13,.22);
  transform: rotate(var(--r, 0deg));
}
@keyframes svev {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) * -.5)); }
}
/* Mobil: færre og mindre, og bare der de ikke dekker teksten. */
@media (max-width: 760px) {
  .sted { --s: 50px !important; }
  .flis.flis-ikon { border-radius: 15px; }
  .sted.bare-stor { display: none; }
  .sted.nede { top: auto !important; bottom: 20px; }
  .hero { padding-bottom: 130px; }
  body.har-resultat .hero { padding-bottom: 32px; }
}

/* ── Resultatet ── */
.resultat { padding-bottom: 8px; position: relative; z-index: 1; }
.resultat:focus { outline: none; }
.ark { background: var(--hvit); border: 1px solid var(--strek); border-radius: 18px; padding: clamp(20px, 4vw, 40px); box-shadow: 0 1px 2px rgba(14,14,13,.03), 0 18px 48px -24px rgba(14,14,13,.16); }
.venter { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--blekk-2); }
.venter-strek { position: relative; width: 100px; height: 2px; flex: none; overflow: hidden; background: var(--strek); border-radius: 2px; }
.venter-strek::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--blekk); animation: gli 1.1s ease-in-out infinite; }
@keyframes gli { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .venter-strek::after { animation: none; width: 100%; opacity: .4; } }

.ark-topp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--strek); }
.ark-vert { font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; overflow-wrap: anywhere; }
.ark-meta { font-size: .88rem; color: var(--blekk-3); }
.ark-sum { margin-top: 16px; font-size: 1.12rem; }
.ark-topp { align-items: center; }
.score { text-align: right; }
.score-tall { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.score-tall span:not(.score-n) { font-size: .4em; color: var(--blekk-3); letter-spacing: 0; margin-left: 2px; }
.score-navn { margin-top: 6px; font-size: .85rem; font-weight: 600; }
.score-lav .score-tall, .score-lav .score-navn { color: var(--rod-tekst); }
.score-middels .score-tall, .score-middels .score-navn { color: var(--brun); }
.score-hoy .score-tall, .score-hoy .score-navn { color: #1B6E36; }

.sammen { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sammen-en { grid-template-columns: minmax(0, 1fr); }
.sammen-kol { background: var(--flate); border-radius: 14px; padding: 16px 18px; }
.sammen-kol.tom { background: #FDE9E5; }
.sammen-hode { font-size: .82rem; font-weight: 600; color: var(--blekk-2); }
.sammen-ord { margin-top: 2px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.04em; }
.sammen-utdrag { margin-top: 8px; font-size: .9rem; color: var(--blekk-2); line-height: 1.5; max-height: 6em; overflow: hidden; }
.sammen-bunn, .sammen-merk { grid-column: 1 / -1; font-size: .9rem; color: var(--blekk-3); }
@media (max-width: 560px) { .sammen { grid-template-columns: minmax(0, 1fr); } .score { text-align: left; } }
.ark-bra { background: #E3F4E8; }
.score-bar { width: 132px; height: 6px; margin: 10px 0 0 auto; border-radius: 6px; background: var(--flate); overflow: hidden; }
.score-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: currentColor; animation: fyllbar 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.score-lav .score-bar { color: var(--rod-tekst); }
.score-middels .score-bar { color: #C08A1E; }
.score-hoy .score-bar { color: #1B6E36; }
@keyframes fyllbar { from { width: 0; } }
@media (max-width: 560px) { .score-bar { margin-left: 0; } }

/* Skjermbildet mot det AI-en får */
.syn { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.syn-kol { margin: 0; }
.syn-kol figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: .88rem; }
.syn-kol figcaption b { font-weight: 600; }
.syn-kol figcaption span { color: var(--blekk-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.syn-ramme { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--strek); background: var(--hvit); box-shadow: 0 14px 34px -22px rgba(14,14,13,.35); }
.syn-ramme img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.syn-ai { background: #FBFBFA; }
.syn-tekst { margin: 0; padding: 16px 18px; font-size: .78rem; line-height: 1.55; color: var(--blekk-2); height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.syn-tom { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
.syn-tom p { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.03em; color: var(--rod-tekst); }
.syn-tom span { font-size: .88rem; color: var(--blekk-3); }
.er-tom { background: repeating-linear-gradient(45deg, #FDF3F1, #FDF3F1 10px, #FBEDEA 10px, #FBEDEA 20px); border-color: #F3D2CB; }
.syn-skann { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blekk); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .syn-skann { animation: skann 1.6s cubic-bezier(.4, 0, .2, 1) .4s 1 both; }
  @keyframes skann { 0% { top: 0; opacity: .8; } 85% { opacity: .8; } 100% { top: 100%; opacity: 0; } }
}
@media (max-width: 640px) { .syn { grid-template-columns: minmax(0, 1fr); } }

.gruppe { margin-top: 30px; }
.gruppe-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--strek); }
.gruppe-topp h3 { font-size: 1.15rem; font-weight: 600; }
.gruppe-tall { font-size: .88rem; color: var(--blekk-3); white-space: nowrap; }

.funn { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 2px 24px; padding: 16px 0; border-bottom: 1px solid var(--strek); }
.niva { font-weight: 600; font-size: .9rem; padding-top: 1px; }
.niva.feil { color: var(--rod-tekst); }
.niva.svak { color: var(--brun); }
.niva.ok { color: var(--blekk-3); font-weight: 400; }
.funn h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.funn-tekst { margin-top: 2px; color: var(--blekk-2); overflow-wrap: anywhere; }
.funn-tekst a { color: var(--blekk); }
.tiltak { margin-top: 10px; padding: 10px 14px; background: var(--flate); border-radius: 10px; }
.tiltak b { font-weight: 600; }
@media (max-width: 560px) { .funn { grid-template-columns: minmax(0, 1fr); } }

.i-orden { margin-top: 26px; border-top: 1px solid var(--strek); border-bottom: 1px solid var(--strek); }
.i-orden summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; font-weight: 600; }
.i-orden summary::-webkit-details-marker { display: none; }
.i-orden summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--blekk-2); transition: transform .2s; }
.i-orden[open] summary::after { transform: rotate(45deg); }
.i-orden .funn:last-child { border-bottom: 0; }

.ark-bunn { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 20px 22px; background: var(--flate); border-radius: 14px; }
.ark-bunn h3 { font-size: 1.15rem; font-weight: 600; }
.ark-bunn p { margin-top: 2px; color: var(--blekk-2); }
.ark-fot { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .9rem; color: var(--blekk-3); }
.lenke-knapp { background: none; border: 0; padding: 0; font: 500 .9rem var(--sans); color: var(--blekk); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(14,14,13,.3); text-underline-offset: 4px; }
@media (max-width: 560px) { .ark-bunn .knapp { width: 100%; } }

/* ── Seksjonene under søket ── */
.seksjon { padding-top: clamp(72px, 10vw, 140px); max-width: calc(1160px + 2 * var(--kant)); }
.seksjon-topp { max-width: 640px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.seksjon-topp h2, .cta h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; }
.seksjon-topp p { margin-top: 16px; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--blekk-2); max-width: 52ch; }

/* Statistikk */
.tall-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tall { background: var(--flate); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; min-height: 240px; }
.tall-stor { font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.055em; font-weight: 600; font-variant-numeric: tabular-nums; }
.tall-stor { white-space: nowrap; }
.tall-enhet { font-size: .5em; letter-spacing: -.02em; font-weight: 500; }
.tall-tekst { margin-top: 14px; font-size: 1.02rem; line-height: 1.45; }
.tall-kilde { margin-top: auto; padding-top: 18px; font-size: .82rem; color: var(--blekk-3); }
.tall-kilde a { color: inherit; text-decoration: underline; text-decoration-color: rgba(14,14,13,.25); text-underline-offset: 3px; }
.tall-kilde a:hover { color: var(--blekk); text-decoration-color: var(--blekk); }
@media (max-width: 980px) { .tall-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tall-rad { grid-template-columns: minmax(0, 1fr); } .tall { min-height: 0; } }

/* Fire fliser, hver i sin svake farge */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.flis-stor {
  position: relative; border-radius: 28px; padding: clamp(24px, 3vw, 40px); min-height: 300px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
.flis-stor:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(14,14,13,.35); }
.tone-bla { background: #EEF3FE; }
.tone-lilla { background: #F2EFFC; }
.tone-gronn { background: #ECF6EF; }
.tone-oransje { background: #FDF1E6; }
.bento-ikoner, .bento-navn { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.bento-navn span { background: var(--hvit); border-radius: 999px; padding: 7px 14px; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(14,14,13,.06), 0 10px 22px -14px rgba(14,14,13,.3); }
.bento-ikoner img, .bento-ikoner svg { width: 44px; height: 44px; padding: 10px; background: var(--hvit); border-radius: 13px; box-shadow: 0 1px 2px rgba(14,14,13,.06), 0 10px 22px -14px rgba(14,14,13,.3); }
.flis-stor h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.035em; }
.flis-stor > p { margin-top: 8px; color: var(--blekk-2); max-width: 40ch; }
.smak {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  background: var(--hvit); border-radius: 999px; padding: 8px 16px 8px 8px; font-size: .92rem;
  box-shadow: 0 1px 2px rgba(14,14,13,.05), 0 12px 26px -16px rgba(14,14,13,.3);
}
.flis-stor .smak { margin-top: 32px; }
.smak-niva { border-radius: 999px; padding: 4px 10px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.smak-niva.feil { background: #FDE9E5; color: var(--rod-tekst); }
.smak-niva.svak { background: #FDF1DC; color: var(--brun); }
.smak-niva.ok { background: #EEF0EE; color: var(--blekk-2); }
.smak-niva.rettet { background: #E3F4E8; color: #1B6E36; }
@media (max-width: 760px) { .bento { grid-template-columns: minmax(0, 1fr); } .flis-stor { min-height: 0; } }

/* Fra sjekk til rettet side */
.steg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steg-kort { background: var(--flate); border-radius: 24px; padding: 14px 14px 26px; }
.steg-bilde { background: var(--hvit); border-radius: 16px; height: 168px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(14,14,13,.04); }
.steg-kort h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; padding-inline: 12px; }
.steg-kort > p { margin-top: 6px; color: var(--blekk-2); padding-inline: 12px; }
.mini-sok { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(14,14,13,.14); border-radius: 14px; padding: 6px 6px 6px 14px; font-size: .95rem; }
.mini-tekst { min-height: 1.4em; }
.mini-tekst::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; background: var(--blekk); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mini-knapp { background: var(--blekk); color: #fff; border-radius: 10px; padding: 8px 14px; font-size: .85rem; font-weight: 500; }
.mini-funn { display: flex; align-items: center; gap: 10px; font-size: .92rem; padding: 8px 10px; border-radius: 12px; background: var(--flate); }
@media (max-width: 860px) { .steg { grid-template-columns: minmax(0, 1fr); } }

/* Spørsmål */
.sporsmal { max-width: 860px; border-top: 1px solid var(--strek); }
.sporsmal details { border-bottom: 1px solid var(--strek); }
.sporsmal summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.3; letter-spacing: -.01em; transition: color .2s; }
.sporsmal summary::-webkit-details-marker { display: none; }
/* Pil som peker ned og snur seg opp når svaret er åpent. */
.sporsmal summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--blekk-3); transition: transform .3s ease, background .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.sporsmal summary:hover::after, .sporsmal details[open] summary::after { background: var(--blekk); }
.sporsmal details[open] summary::after { transform: rotate(180deg); }
.sporsmal summary:focus-visible { outline: 2px solid var(--blekk); outline-offset: 4px; border-radius: 4px; }
.sporsmal details p { padding: 0 48px 26px 0; color: var(--blekk-2); max-width: 64ch; }
/* Svaret glir åpent der nettleseren støtter det. Ellers åpnes det bare. */
@supports (interpolate-size: allow-keywords) {
  .sporsmal { interpolate-size: allow-keywords; }
  .sporsmal details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
  .sporsmal details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sporsmal summary::after, .sporsmal details::details-content { transition: none; }
}

/* Avslutningen: lyst panel med logoene svevende rundt */
.cta-ramme { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(48px, 7vw, 96px); max-width: calc(1160px + 2 * var(--kant)); }
.cta { position: relative; overflow: hidden; background: var(--flate); border-radius: 36px; text-align: center; padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 64px); }
.cta h2 { position: relative; max-width: 14ch; margin-inline: auto; }
.cta > p { position: relative; margin: 16px auto 30px; color: var(--blekk-2); max-width: 44ch; font-size: 1.08rem; }
.cta .knapp { position: relative; min-height: 54px; padding: 0 28px; }
.cta .cta-tlf { margin: 22px auto 0; font-size: .95rem; color: var(--blekk-3); }
.cta-tlf a { color: var(--blekk); white-space: nowrap; }
.cta-svev { position: absolute; inset: 0; pointer-events: none; }
.cta-flis {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; white-space: nowrap; padding: .6em 1em; font-size: calc(var(--s) * .26); font-weight: 600; letter-spacing: -.02em;
  background: var(--hvit); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(14,14,13,.05), 0 14px 30px -14px rgba(14,14,13,.22); transform: rotate(var(--r));
}
@media (max-width: 760px) { .cta-flis { display: none; } .cta-flis:nth-child(-n+2) { display: inline-flex; --s: 50px !important; top: 5% !important; } }

/* ── Bunnlinja ── */

/* ── Undersider: kontakt, vilkår, personvern ── */
.side-topp { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(24px, 4vw, 40px); }
.side-topp h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; }
.side-topp p { margin-top: 14px; font-size: 1.08rem; color: var(--blekk-2); max-width: 46ch; }
.tekst { padding-bottom: clamp(56px, 8vw, 96px); }
.tekst section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px 40px; padding: 22px 0; border-top: 1px solid var(--strek); }
.tekst h2 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.tekst section > div > * + * { margin-top: 10px; }
.tekst p, .tekst li { color: var(--blekk-2); }
.tekst ul { margin: 0; padding-left: 20px; }
.tekst a { color: var(--blekk); }
.tekst-fot { margin-top: 24px; font-size: .88rem; color: var(--blekk-3); }
@media (max-width: 680px) { .tekst section { grid-template-columns: minmax(0, 1fr); } }

.skjema { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; padding: clamp(20px, 4vw, 36px); background: var(--hvit); border: 1px solid var(--strek); border-radius: 18px; box-shadow: 0 18px 48px -24px rgba(14,14,13,.16); }
.felt { display: grid; gap: 6px; align-content: start; }
.felt-bred { grid-column: 1 / -1; }
.felt label { font-weight: 500; font-size: .93rem; }
.felt label span { font-weight: 400; color: var(--blekk-3); }
.felt input, .felt textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--blekk); background: var(--hvit);
  border: 1px solid rgba(14,14,13,.18); border-radius: 12px; padding: 12px 14px;
}
.felt textarea { min-height: 110px; resize: vertical; }
.felt input:focus, .felt textarea:focus { outline: none; border-color: rgba(14,14,13,.5); }
.felt [aria-invalid="true"] { border-color: var(--rod); }
.skjema-bunn { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.skjema-merk { font-size: .9rem; color: var(--blekk-3); }
.skjema-status { grid-column: 1 / -1; color: var(--rod-tekst); }
.takk { padding: clamp(20px, 4vw, 36px); border: 1px solid var(--strek); border-radius: 18px; }
.takk:focus { outline: none; }
.takk h2 { font-size: 1.6rem; font-weight: 600; }
.takk p { margin-top: 8px; color: var(--blekk-2); }
.kontakt-ved { margin-top: 22px; color: var(--blekk-2); }
@media (max-width: 560px) { .skjema { grid-template-columns: minmax(0, 1fr); } .skjema-bunn .knapp { width: 100%; } }

/* ── Bevegelse ──
   Bare for dem som ikke har slått av bevegelse. Uten JavaScript, eller
   i nettlesere uten rulletidslinje, står alt stille og synlig. */
@media (prefers-reduced-motion: no-preference) {
  /* Toppen er synlig fra første stund. Bare resultatet glir inn. */
  @keyframes inn { from { opacity: 0; transform: translateY(14px); } }

  /* Logoene: kommer inn én og én, svever, og sprer seg utover når man ruller. */
  .flis { animation: svev var(--t, 7s) ease-in-out var(--d, 0s) infinite, kom .7s cubic-bezier(.2, .8, .2, 1.2) calc(.25s + var(--n, 0) * 55ms) backwards; }
  @keyframes kom { from { scale: .85; } }
  @supports (animation-timeline: scroll()) {
    .flis {
      animation: svev var(--t, 7s) ease-in-out var(--d, 0s) infinite, spre linear both, kom .7s cubic-bezier(.2, .8, .2, 1.2) calc(.25s + var(--n, 0) * 55ms) backwards;
      animation-timeline: auto, scroll(root), auto;
      animation-range: normal, 0 70vh, normal;
    }
    @keyframes spre { to { translate: var(--ux, 0) var(--uy, -80px); opacity: 0; } }
    .hero { animation: loft linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    @keyframes loft { to { opacity: .35; translate: 0 -40px; } }
    body.har-resultat .hero { animation: none; }

  }

  /* Alt med .vis glir rolig opp når det kommer inn på skjermen. */
  .js .vis { opacity: 0; transform: translateY(22px); transition: opacity .8s ease calc(var(--i, 0) * 80ms), transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 80ms); }
  .js .vis.synlig { opacity: 1; transform: none; }
  .js .flis-stor.vis.synlig:hover { transform: translateY(-4px); }
  .cta-flis { animation: svev calc(7s + var(--n) * .6s) ease-in-out calc(var(--n) * -1.3s) infinite; }

  /* Resultatet: gruppene kommer inn én og én. */
  .ark .kommer { animation: inn .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms) both; }
}

[hidden] { display: none !important; }


/* ── Typografi (Newsreader i overskrifter og tall, Albert Sans i tekst) ──
   Overskriften i toppen er sans, med «tom side?» i kursiv serif. */
.hero h1 { font-weight: 600; letter-spacing: -.035em; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.seksjon-topp h2, .cta h2, .side-topp h1, .takk h2, .ark-vert, .flis-stor h3, .steg-kort h3 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
}
.seksjon-topp h2, .cta h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.04; }
.flis-stor h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.steg-kort h3 { font-size: 1.45rem; }
.tall-stor, .score-tall, .sammen-ord, .syn-tom p { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.tall-stor { font-size: clamp(3.4rem, 6vw, 5rem); }

/* ── Logoraden nederst i bildet, som i referansen ── */
.hero-logoer { position: relative; text-align: center; padding-bottom: clamp(28px, 5vh, 48px); }
.hero-logoer p { color: rgba(255,255,255,.72); font-size: .88rem; margin-bottom: 18px; }
.hero-logoer ul { list-style: none;  margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(22px, 4vw, 44px); }
.hero-logoer img { width: 26px; height: 26px; filter: brightness(0) invert(1); opacity: .72; transition: opacity .2s; }
.hero-logoer li:hover img { opacity: 1; }
/* Mens siden leses: logoene lyser opp etter hverandre. */
@media (prefers-reduced-motion: no-preference) {
  .hero-logoer.leser img { animation: les 1.4s ease-in-out infinite; }
  .hero-logoer.leser li:nth-child(2) img { animation-delay: .12s; } .hero-logoer.leser li:nth-child(3) img { animation-delay: .24s; }
  .hero-logoer.leser li:nth-child(4) img { animation-delay: .36s; } .hero-logoer.leser li:nth-child(5) img { animation-delay: .48s; }
  .hero-logoer.leser li:nth-child(6) img { animation-delay: .6s; } .hero-logoer.leser li:nth-child(7) img { animation-delay: .72s; }
  .hero-logoer.leser li:nth-child(8) img { animation-delay: .84s; } .hero-logoer.leser li:nth-child(9) img { animation-delay: .96s; }
  @keyframes les { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
}
@media (max-width: 560px) { .hero-logoer img { width: 22px; height: 22px; } .hero-logoer ul { gap: 14px 14px; } }
.med-foto .hero { padding-bottom: clamp(56px, 10vh, 110px); }

/* ── Roligere fliser ── */
.tone-bla { background: #F1F4FA; }
.tone-lilla { background: #F4F2F9; }
.tone-gronn { background: #F0F6F2; }
.tone-oransje { background: #FAF4EE; }

/* ── Avslutningen med samme tåkebilde som toppen ── */
.cta { color: #fff; background: #4A5866 image-set(url(/bilder/fjell-900.webp) 1x, url(/bilder/fjell-1600.webp) 2x) center 60% / cover; }
.cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,26,.55), rgba(12,18,26,.45)); }
.cta > * { position: relative; }
.cta > p { color: rgba(255,255,255,.85); }
.cta .cta-tlf { color: rgba(255,255,255,.75); }
.cta-tlf a { color: #fff; }

.knapp-hvit { background: #fff; color: var(--blekk); }
.knapp-hvit:hover { background: #ECECEA; }

/* Toppen fyller hele skjermen. Overskrift og søk i midten, logoraden nederst.
   Når resultatet vises, krymper den, så resultatet kommer raskt til syne. */
.med-foto .hero-foto { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.med-foto .hero-ramme { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.med-foto.har-resultat .hero-foto { min-height: 0; }

/* ── Liv i toppen ──
   Fotoet zoomer sakte, et tåkelag driver over dalen, og bildet følger musa litt
   (--px/--py fra hero.js). Bare transform og opacity, så det koster lite. */
.hero-bilde img { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.06); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.hero-taake { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-taake::before, .hero-taake::after {
  content: ""; position: absolute; left: -50%; width: 200%; height: 46%; opacity: .5;
  background:
    radial-gradient(40% 60% at 20% 50%, rgba(226,232,240,.55), transparent 70%),
    radial-gradient(35% 55% at 55% 45%, rgba(226,232,240,.45), transparent 70%),
    radial-gradient(45% 60% at 85% 55%, rgba(226,232,240,.5), transparent 70%);
}
.hero-taake::before { top: 46%; }
.hero-taake::after { top: 58%; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .hero-bilde { animation: zoom 32s ease-in-out infinite alternate; }
  @keyframes zoom { from { scale: 1; } to { scale: 1.07; } }
  .hero-taake::before { animation: drift 46s linear infinite; }
  .hero-taake::after { animation: drift 70s linear infinite reverse; }
  @keyframes drift { from { translate: 0 0; } to { translate: 25% 0; } }
}


/* ── Logoraden som rullebånd ──
   To like lister etter hverandre glir mot venstre, så løkken ikke har noen skjøt.
   Logoene toner inn og ut mot kantene. Står stille for dem som har slått av bevegelse. */
.hero-logoer { overflow: hidden; max-width: 760px; margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.hero-logoer .band { display: flex; width: max-content; }
.hero-logoer ul { flex-wrap: nowrap; justify-content: flex-start; gap: 0 clamp(36px, 5vw, 56px); padding-right: clamp(36px, 5vw, 56px); }
@media (prefers-reduced-motion: no-preference) {
  .hero-logoer .band { animation: rull 34s linear infinite; }
  .hero-logoer:hover .band { animation-play-state: paused; }
  @keyframes rull { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logoer { -webkit-mask-image: none; mask-image: none; }
  .hero-logoer ul[aria-hidden] { display: none; }
  .hero-logoer ul { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 560px) { .hero-logoer ul { gap: 0 30px; padding-right: 30px; } }

/* ── Toppmenyen: «Blogg» som ren tekst, «Kontakt» som boble ── */
.topp-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.topp-lenke { font-weight: 500; text-decoration: none; color: var(--blekk); }
.topp-lenke:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.med-foto .topp-lenke { color: #fff; }

/* ── Bloggen ── */
.blogg-topp h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.blogg-liste { display: grid; gap: 14px; padding-bottom: clamp(56px, 8vw, 104px); max-width: calc(860px + 2 * var(--kant)); }
.blogg-kort { display: block; text-decoration: none; color: inherit; background: var(--flate); border-radius: 22px; padding: clamp(22px, 3.4vw, 36px); transition: background .2s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.blogg-kort:hover { background: #EFEFEC; transform: translateY(-2px); }
.blogg-kort h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12; letter-spacing: -.02em; margin-top: 6px; }
.blogg-kort > p:not(.blogg-meta) { margin-top: 10px; color: var(--blekk-2); max-width: 60ch; }
.blogg-meta { font-size: .88rem; color: var(--blekk-3); }
.blogg-les { display: inline-block; margin-top: 16px; font-weight: 500; }
.blogg-kort:hover .blogg-les span { display: inline-block; transform: translateX(3px); transition: transform .2s; }

.artikkel { max-width: calc(700px + 2 * var(--kant)); padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 104px); }
.artikkel-tilbake a { color: var(--blekk-2); text-decoration: none; font-size: .95rem; }
.artikkel-tilbake a:hover { color: var(--blekk); }
.artikkel-topp { margin-top: clamp(24px, 4vw, 40px); }
.artikkel-topp h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 5.4vw, 3.6rem); line-height: 1.06; letter-spacing: -.025em; margin-top: 10px; }
.artikkel-ingress { margin-top: 18px; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; color: var(--blekk-2); }
.artikkel-tekst { margin-top: clamp(32px, 5vw, 48px); font-size: 1.1rem; line-height: 1.72; }
.artikkel-tekst > * + * { margin-top: 1.1em; }
.artikkel-tekst h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; margin-top: 1.9em; }
.artikkel-tekst ul { padding-left: 1.2em; }
.artikkel-tekst li + li { margin-top: .4em; }
.artikkel-tekst a { color: var(--blekk); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(14,14,13,.3); }
.artikkel-tekst code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; background: var(--flate); padding: .12em .4em; border-radius: 6px; }
.artikkel-tekst pre { background: #0E0E0D; color: #EDEDEA; border-radius: 16px; padding: 20px 22px; overflow-x: auto; line-height: 1.6; }
.artikkel-tekst pre code { background: none; padding: 0; color: inherit; font-size: .9rem; }
.artikkel-kilder { margin-top: clamp(40px, 6vw, 64px); padding-top: 22px; border-top: 1px solid var(--strek); }
.artikkel-kilder h2 { font-size: 1rem; font-weight: 600; }
.artikkel-kilder ul { margin: 10px 0 0; padding-left: 1.1em; font-size: .95rem; color: var(--blekk-2); }
.artikkel-kilder li + li { margin-top: 6px; }
.artikkel-kilder a { color: var(--blekk-2); }
.artikkel-slutt { margin-top: clamp(32px, 5vw, 48px); background: var(--flate); border-radius: 22px; padding: clamp(22px, 3.4vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.artikkel-slutt p { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.01em; }

/* ── Kortene i «Fire ting vi sjekker»: utsnitt av samme fjellbilde som toppen ──
   Toppene, tåken, skogen og vannet. Mørk toning og hvit serif, som i toppen. */
.foto-kort { color: #fff; background: #3A4654; isolation: isolate; min-height: 340px; }
.kort-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.foto-kort::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,18,26,.30) 0%, rgba(12,18,26,.42) 45%, rgba(12,18,26,.74) 100%); }
.foto-kort:hover .kort-foto { transform: scale(1.04); }
.foto-kort > p { color: rgba(255,255,255,.86) !important; }
.foto-kort .bento-ikoner img, .foto-kort .bento-ikoner svg { background: rgba(255,255,255,.94); }
.foto-kort .smak { color: var(--blekk); }
.foto-kort:hover { box-shadow: 0 30px 60px -34px rgba(12,18,26,.6); }
/* Logoene i kortene er hvite og uten bokser, som logoraden i toppen. */
.foto-kort .bento-ikoner { gap: 18px; }
.foto-kort .bento-ikoner img, .foto-kort .bento-ikoner svg { width: 24px; height: 24px; padding: 0; background: none; box-shadow: none; border-radius: 0; filter: brightness(0) invert(1); opacity: .88; }

/* ── «Fra sjekk til rettet side»: morgensol over tåken, tekst rett på bildet ──
   «Fog Ocean Sunrise», Shenandoah nasjonalpark (NPS, offentlig eiendom), fargene dempet. */
.soloppgang { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #3B4252; margin-top: clamp(72px, 10vw, 140px); min-height: min(92vh, 880px); display: flex; align-items: flex-end; }
.soloppgang-bilde, .soloppgang-bilde img { position: absolute; inset: 0; width: 100%; height: 100%; }
.soloppgang-bilde { z-index: -2; }
.soloppgang-bilde img { object-fit: cover; object-position: center 40%; }
.soloppgang::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,16,22,.15) 0%, rgba(14,16,22,.25) 40%, rgba(14,16,22,.78) 100%); }
.soloppgang-inn { max-width: calc(1160px + 2 * var(--kant)); padding-top: clamp(140px, 22vh, 260px); padding-bottom: clamp(56px, 8vw, 96px); }
.soloppgang h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; max-width: 14ch; }
.soloppgang-steg { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); }
.steg-når { font-size: .9rem; color: rgba(255,255,255,.7); }
.soloppgang-steg h3 { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.12; letter-spacing: -.02em; }
.soloppgang-steg h3 + p { margin-top: 10px; color: rgba(255,255,255,.82); max-width: 34ch; }
@media (max-width: 860px) { .soloppgang-steg { grid-template-columns: minmax(0, 1fr); } .soloppgang { min-height: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .soloppgang-bilde { animation: zoom 36s ease-in-out infinite alternate; }
}
@media (max-width: 860px) { .soloppgang::before { background: linear-gradient(180deg, rgba(14,16,22,.35) 0%, rgba(14,16,22,.6) 35%, rgba(14,16,22,.82) 100%); } }

/* Spørsmålsdelen står midt på siden. Spørsmålene er venstrejustert inne i kolonnen. */
#sporsmal .seksjon-topp { text-align: center; margin-inline: auto; }
#sporsmal .sporsmal { margin-inline: auto; }


/* ── Bunnen ──
   Logo og en liten sjekk til venstre, tre kolonner til høyre, og «Levert av» nederst. */
.bunn { margin-top: clamp(40px, 6vw, 72px); }
.bunn-inn { max-width: calc(1160px + 2 * var(--kant)); padding-top: clamp(48px, 7vw, 80px); padding-bottom: 28px; }
.bunn-topp { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); }
.bunn-merke img { height: 24px; width: auto; display: block; }
.bunn-om p { margin-top: 16px; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; max-width: 22ch; }
.bunn-sok { margin-top: 20px; display: flex; gap: 6px; max-width: 360px; border: 1px solid rgba(14,14,13,.16); border-radius: 14px; padding: 5px 5px 5px 14px; background: var(--hvit); }
.bunn-sok:focus-within { border-color: rgba(14,14,13,.45); }
.bunn-sok input { flex: 1; min-width: 0; border: 0; background: none; font: 400 1rem var(--sans); color: var(--blekk); }
.bunn-sok input:focus { outline: none; }
.bunn-sok .knapp { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: .92rem; }
.bunn-kol h2 { font: 600 .9rem var(--sans); letter-spacing: 0; color: var(--blekk); }
.bunn-kol ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; color: var(--blekk-2); }
.bunn-kol a { color: var(--blekk-2); text-decoration: none; }
.bunn-kol a:hover { color: var(--blekk); text-decoration: underline; text-underline-offset: 4px; }
.bunn-linje { margin-top: clamp(48px, 7vw, 80px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; font-size: .9rem; color: var(--blekk-3); }
.bunn-linje nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.bunn-linje a { color: var(--blekk-2); text-decoration: none; }
.bunn-linje a:hover { color: var(--blekk); }
.bunn .levert { display: inline-flex; align-items: center; gap: 8px; color: var(--blekk-3); }
.bunn .levert img { width: 20px; height: 20px; display: block; }
@media (max-width: 900px) { .bunn-topp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bunn-om { grid-column: 1 / -1; } }
@media (max-width: 520px) { .bunn-topp { grid-template-columns: minmax(0, 1fr); } }