/* St. Hanshaugen flyttebyrå AS — stilark */

/* Fargene er delt etter hva de brukes TIL, ikke etter hvordan de ser ut.
   Grunnen er mørkt tema: den grønne som fungerer som knappefyll med hvit tekst
   oppå, er altfor mørk til å lese som lenketekst på svart. Derfor har fyll og
   tekst hver sin variabel, og bare verdiene byttes lenger nede. */
:root{
  /* grønt som fyll */
  --gronn:#1e6642;
  --gronn-mork:#123f28;
  /* grønt som tekst */
  --gronn-tekst:#1e6642;
  --gronn-tittel:#123f28;
  /* flater */
  --gronn-lys:#eaf3ee;
  --ikon-topp:#f4faf6;   /* lys topp i ikonfeltene */
  --bakgrunn:#fff;
  --flate:#fff;
  --bunn:#16191c;
  --sand:#f7f8f9;
  /* tekst og streker */
  --blekk:#16191c;
  --grå:#5c6670;
  --linje:#e2e6ea;
  --gul:#e0a04a;
  /* Bydelskartet. Flatene er halvgjennomsiktige: kartet er også glass, og
     fargefeltet bak siden skal skinne gjennom land og fjord. --kart-halo er
     kanten bak stedsnavnene, og må være tett nok til å dekke det som ligger
     under bokstavene. */
  --kart-land:rgba(246,249,246,.55);
  --kart-vann:rgba(138,189,214,.92);
  --kart-vann-lys:rgba(180,216,232,.85);
  --kart-park:rgba(197,226,195,.72);
  --kart-skog:rgba(184,217,183,.82);
  --kart-parktekst:#4f7550;
  --kart-kyst:#7ba7bc;
  --kart-prikk:#93a3ad;
  --kart-rute:rgba(18,63,40,.055);
  --kart-halo:rgba(255,255,255,.92);
  --kart-glans-topp:rgba(255,255,255,.42);
  --kart-glans-midt:rgba(255,255,255,.06);
  --kart-glans-bunn:rgba(255,255,255,0);
  --kart-kantfarge:rgba(255,255,255,.75);
  --kart-glod-inn:rgba(224,160,74,.42);
  --kart-glod-ut:rgba(224,160,74,0);
  --maks:1120px;
  --radius:10px;
  /* forteller nettleseren at siden finnes i begge varianter, slik at
     datovelger, nedtrekk og rullefelt tegnes riktig av seg selv */
  color-scheme:light dark;
}

*{box-sizing:border-box;margin:0;padding:0}

/* hoppelenke for tastaturbrukere */
/* Skjules ved å skyves opp ut av skjermen, ikke ut til venstre med left:-9999px.
   Da kan den aldri bidra til vannrett rulling. Fixed, så den også dukker opp når
   du allerede har rullet et stykke ned. */
.hopp-lenke{
  position:fixed;left:0;top:0;z-index:300;
  transform:translateY(-130%);
  background:var(--gronn);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font-weight:700;font-size:15px;
}
.hopp-lenke:focus{transform:none;text-decoration:none}
/* Her sto det en gang overflow-x:hidden på html og body. Det lager en egen
   rulleboks, og da slutter position:sticky på menylinja å virke – menyen ruller
   bort, og du må helt til toppen for å bytte side. Målt på 320, 390 og 820 piksler
   stikker ingenting ut til høyre, så klippingen trengs ikke: heroen, merkeblokka
   og bildene har allerede hver sin overflow:hidden. Legger du inn noe nytt som
   stikker ut, fiks det på elementet – ikke sett overflow-x her igjen. */
html{scroll-behavior:smooth}
body{
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--blekk);
  background:var(--bakgrunn);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* <picture> pakker inn bildene som har webp-versjon. Den skal oppføre seg som
   om den ikke var der, slik at width/height på img fortsatt måles mot rammen. */
picture{display:block;height:100%}
a{color:var(--gronn-tekst);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maks);margin-inline:auto;padding-inline:22px}

/* ---------- Topplinje ---------- */
.topbar{background:var(--gronn-mork);color:#fff;font-size:14.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:6px 18px;padding-block:9px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar .apen{color:#9fdcb8}

/* ---------- Meny ---------- */
header{position:sticky;top:0;z-index:50;background:var(--flate);border-bottom:1px solid var(--linje)}
header .wrap{position:relative}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:15px}
.logo{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--blekk);line-height:1.2}
.logo img{width:48px;height:auto;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}
.logo .logo-tekst{display:block;font-size:19px;letter-spacing:-.02em;text-transform:none;color:var(--blekk)}
.logo .logo-tekst span{display:block;font-size:12px;font-weight:600;color:var(--gronn-tekst);letter-spacing:.08em;text-transform:uppercase}
.logo:hover{text-decoration:none}
nav ul{display:flex;gap:24px;list-style:none;align-items:center;flex-wrap:wrap}
nav a{color:var(--blekk);font-size:15.5px;font-weight:600}
nav a:hover,nav a[aria-current="page"]{color:var(--gronn-tekst);text-decoration:none}
nav a[aria-current="page"]{border-bottom:2px solid var(--gronn-tekst);padding-bottom:2px}

.knapp{
  display:inline-block;background:var(--gronn);color:#fff;font-weight:700;
  padding:12px 22px;border-radius:var(--radius);font-size:16px;border:none;cursor:pointer;
}
.knapp:hover{background:var(--gronn-mork);text-decoration:none;color:#fff}
.knapp-hvit{background:#fff;color:var(--gronn)}
.knapp-hvit:hover{background:var(--gronn-lys);color:var(--gronn-mork)}
.knapp-gul{background:var(--gul);color:#1d1408;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.knapp-gul:hover{background:#ecb161;color:#1d1408}
.knapp-klar{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);padding:10px 20px;
  text-shadow:0 1px 0 rgba(0,0,0,.24);box-shadow:0 3px 12px rgba(0,0,0,.14);
}
.knapp-klar:hover{background:rgba(255,255,255,.12);color:#fff}
.knapp-linje{background:transparent;color:var(--gronn-tekst);border:2px solid var(--gronn-tekst);padding:10px 20px}
.knapp-linje:hover{background:var(--gronn);color:#fff}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;padding:56px 0 84px;overflow:hidden;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(224,160,74,.20), transparent 62%),
    radial-gradient(700px 420px at 8% 92%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(160deg,var(--gronn-mork) 0%,var(--gronn) 62%,#1a5a3a 100%);
}
/* fint prikkraster som gir dybde uten å stjele oppmerksomhet */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
}
.hero .wrap{position:relative;z-index:1}

/* sentrert linje øverst i heroen */
.hero .wrap.hero-topp{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  text-align:center;margin-bottom:36px;grid-template-columns:none;
}
.hero-topp .hero-merke{margin-bottom:0}
.hero-topp .hero-merke i.hoyre{
  background:linear-gradient(90deg,var(--gul),transparent);
  transform-origin:left center;
}
@media(max-width:700px){
  .hero-topp{gap:8px;margin-bottom:24px}
  .hero-merke{font-size:11.5px;letter-spacing:.12em}
  .hero-merke i{width:24px}
}

/* liten merkelapp over overskriften */
.hero-merke{
  display:inline-flex;align-items:center;gap:13px;
  margin-bottom:18px;padding:0;background:none;border:0;backdrop-filter:none;box-shadow:none;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gul);
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}
.hero-merke i{
  display:block;width:38px;height:2px;flex:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gul));
  transform-origin:right center;
  animation:strekInn .6s cubic-bezier(.22,.61,.36,1) .25s both;
}
@keyframes strekInn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion: reduce){.hero-merke i{animation:none}}

.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-bilde{
  border-radius:16px;overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,.32);
  border:4px solid rgba(255,255,255,.92);
  transform:rotate(-1.2deg);
}
.hero-bilde img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block}
.hero h1{
  font-size:clamp(30px,4.6vw,46px);line-height:1.18;letter-spacing:-.02em;
  max-width:16ch;margin-bottom:18px;
  /* mykt fall fra hvitt til lys grønn – gir dybde uten å svekke lesbarheten */
  background:linear-gradient(162deg,#ffffff 0%,#ffffff 46%,#e3f3ea 78%,#c9e8d7 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.34)) drop-shadow(0 3px 5px rgba(0,0,0,.30));
}
/* det uthevede ordet beholder sin egen farge */
.hero h1 .uthev{-webkit-text-fill-color:var(--gul);color:var(--gul)}
/* uthevet ord med håndtegnet strek under */
.i-oslo{white-space:nowrap}
/* «i» / «in» må ha sin egen fyllfarge og ikke opacity. Overskriften er en
   gradient klippet til teksten (background-clip:text + text-fill-color:
   transparent). Opacity under 1 løfter tegnet opp i sitt eget lag, og der
   følger ikke den klippede gradienten med – på iOS ble ordet stående helt
   usynlig, mens det så riktig ut i Chrome på maskin. */
.liten-i{
  font-size:.72em;font-weight:600;margin-right:.06em;
  -webkit-text-fill-color:rgba(255,255,255,.76);color:rgba(255,255,255,.76);
}
.uthev{position:relative;display:inline-block;color:var(--gul);white-space:nowrap}
.uthev .strek{
  position:absolute;left:-2%;bottom:-.30em;width:104%;height:.34em;
  color:var(--gul);opacity:.95;overflow:visible;
}
.uthev .strek path{
  stroke-dasharray:230;stroke-dashoffset:230;
  animation:tegnStrek .85s cubic-bezier(.65,.05,.36,1) .75s forwards;
}
@keyframes tegnStrek{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion: reduce){
  .uthev .strek path{stroke-dashoffset:0;animation:none}
}
.hero p.ingress{
  font-size:19px;max-width:52ch;color:#e2f1e9;margin-bottom:28px;
  text-shadow:0 1px 0 rgba(0,0,0,.22), 0 2px 5px rgba(0,0,0,.26);
}
.hero-knapper{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.stjerner{
  display:flex;align-items:center;gap:10px;font-size:15px;color:#e2f1e9;
  text-shadow:0 1px 0 rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.24);
}
/* «★★★★★ 4,7» må holdes samlet – ellers faller tallet ned på egen linje og
   stjernene blir stående uten karakter. */
.stjerner strong{color:var(--gul);font-size:17px;white-space:nowrap}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  /* Bildet lå tidligere over overskriften (order:-1). Da havnet H1, ingressen
     og begge knappene under folden på telefon – det første man så var et bilde
     uten et eneste ord om hva siden tilbyr. Bildet følger nå DOM-rekkefølgen og
     kommer etter knappene. */
  .hero-bilde{max-width:520px;width:100%}
  .hero h1,.hero p.ingress{max-width:none}
  .hero-knapper,.stjerner{justify-content:center}
  .stjerner{flex-wrap:wrap;gap:4px 10px}
}

/* fordelskort som ligger over overgangen mellom hero og hvit seksjon */
/* Nedre halvdel må følge sidebakgrunnen, ellers blir det en lys stripe
   tvers over skjermen i mørkt tema. */
.fordeler-seksjon{padding:0;background:linear-gradient(180deg,transparent 50%,var(--bakgrunn) 50%)}
.fordeler{
  position:relative;z-index:5;
  margin-top:-62px;background:var(--flate);border:1px solid var(--linje);
  border-radius:16px;box-shadow:0 16px 44px rgba(18,63,40,.16);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.fordeler > div{
  padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.fordeler > div + div{border-left:1px solid var(--linje)}
.fordeler .ikon{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:linear-gradient(158deg,var(--ikon-topp) 0%,var(--gronn-lys) 100%);
  color:var(--gronn-tekst);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-4deg);
  box-shadow:
    0 0 0 1px rgba(30,102,66,.09),
    0 5px 14px rgba(18,63,40,.13),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.fordeler svg{width:22px;height:22px}
.fordeler strong{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:3px}
.fordeler span{display:block;font-size:14px;color:var(--grå);line-height:1.45}

@media(max-width:900px){
  .fordeler{grid-template-columns:repeat(2,1fr)}
  .fordeler > div:nth-child(3){border-left:0}
  .fordeler > div:nth-child(-n+2){border-bottom:1px solid var(--linje)}
}
@media(max-width:520px){
  .fordeler{grid-template-columns:1fr;margin-top:-34px}
  .fordeler > div{
    flex-direction:row;text-align:left;gap:14px;padding:18px 20px;
    border-left:0 !important;
  }
  .fordeler > div + div{border-top:1px solid var(--linje);border-bottom:0}
  .fordeler > div:nth-child(-n+2){border-bottom:0}
  .fordeler .ikon{width:38px;height:38px}
}

/* ---------- Seksjoner ---------- */
section{padding:62px 0}
section.sand{background:var(--sand)}
h2{font-size:clamp(25px,3.2vw,33px);line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
h3{font-size:20px;margin-bottom:8px;letter-spacing:-.01em}
.seksjon-ingress{color:var(--grå);max-width:60ch;margin-bottom:34px;font-size:17.5px}
p{margin-bottom:14px}
p:last-child{margin-bottom:0}

/* ---------- Kort ---------- */
.rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px}
.kort{
  background:var(--flate);border:1px solid var(--linje);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;
}
.kort h3{margin-bottom:9px}
.kort p{color:var(--grå);font-size:16px;flex:1}
.kort .les{margin-top:14px;font-weight:700;font-size:15.5px}
.kort-ikon{
  width:48px;height:48px;border-radius:13px;
  background:linear-gradient(158deg,var(--ikon-topp) 0%,var(--gronn-lys) 100%);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  color:var(--gronn-tekst);transform:rotate(-3deg);
  box-shadow:
    0 0 0 1px rgba(30,102,66,.09),
    0 5px 14px rgba(18,63,40,.13),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.kort:hover .kort-ikon{transform:rotate(-1deg) scale(1.02)}
.kort-ikon{transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.kort-ikon svg{width:25px;height:25px;display:block}

/* barn i rutenett/flex må kunne krympe – ellers presser innholdet siden bredere */
.spalter > *,
.rutenett > *,
.fordeler > *,
.kontakt-veier > *,
.bildegalleri > *,
.merke-blokk > *,
.skog-kort > *{min-width:0}
img,table,pre{max-width:100%}

/* ---------- Punktliste ---------- */
.hake{list-style:none;display:grid;gap:11px;margin-bottom:20px}
.hake li{padding-left:30px;position:relative;color:var(--blekk)}
.hake li::before{
  content:"";position:absolute;left:0;top:8px;width:16px;height:9px;
  border-left:2.5px solid var(--gronn-tekst);border-bottom:2.5px solid var(--gronn-tekst);
  transform:rotate(-45deg);
}

/* ---------- Tabell ---------- */
.tabellboks{
  overflow-x:auto;max-width:100%;
  border:1px solid var(--linje);border-radius:var(--radius);background:var(--flate);
  -webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;min-width:400px}
@media(max-width:430px){
  table{min-width:0}
  th,td{padding:12px 13px}
  td.pris{font-size:15px}
}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--linje)}
th{background:var(--gronn-lys);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gronn-tittel)}
td.pris{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}

/* To knapper ved siden av hverandre, som skal brekke pent på smal skjerm. */
.knapperad{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Trinn ----------
   «Slik gjør vi det» var fire like kort på rad. Det er en rekkefølge, ikke fire
   sidestilte ting, og det synes ikke når alle fire ser like ut. Nå er de
   nummererte og bundet sammen med en strek. */
.steg-rekke{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steg{position:relative;min-width:0}
.steg-nr{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;margin-bottom:15px;
  background:var(--gronn);color:#fff;font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.steg h3{margin-bottom:8px;font-size:18px}
.steg p{color:var(--grå);font-size:16px}
/* Streken går fra sirkelen og ut i mellomrommet fram til neste trinn. */
.steg::before{
  content:"";position:absolute;top:22px;left:46px;right:-26px;height:2px;
  background:var(--linje);
}
.steg:last-child::before{display:none}
@media(max-width:760px){
  /* Under hverandre snur streken seg loddrett og blir venstremargen. */
  .steg-rekke{grid-template-columns:1fr;gap:0}
  .steg{padding:0 0 26px 64px}
  .steg:last-child{padding-bottom:0}
  .steg-nr{position:absolute;left:0;top:0;margin-bottom:0}
  .steg::before{
    top:52px;left:22px;right:auto;
    width:2px;height:calc(100% - 52px);
  }
}

/* ---------- Prisregner ---------- */
.kalkulator{
  max-width:760px;margin:0 auto;
  background:var(--flate);border:1px solid var(--linje);border-radius:var(--radius);
  padding:32px 30px;
}
.kalkulator .seksjon-ingress{margin-bottom:26px}
.kalk-gruppe{border:0;padding:0;margin:0 0 20px}
.kalk-gruppe legend{
  padding:0;margin-bottom:10px;
  font-size:15px;font-weight:700;color:var(--gronn-tittel);
}
/* Svaret skal skille seg tydelig fra spørsmålene – det er det man kom for. */
.kalk-svar{
  margin-top:26px;padding:22px 24px;border-radius:var(--radius);
  background:var(--gronn-lys);border:1px solid var(--linje);
}
.kalk-linje{font-size:17px;font-weight:600;color:var(--gronn-tittel)}
.kalk-pris{
  margin-top:4px;font-size:clamp(24px,3.4vw,30px);font-weight:800;
  letter-spacing:-.02em;color:var(--gronn-tittel);
  font-variant-numeric:tabular-nums;
}
/* Svaret står ferdig utregnet i HTML-en for det som er avkrysset fra start,
   så boksen er aldri tom – heller ikke uten JavaScript. Skriptet regner om
   igjen med samme formel så snart noe endres. */
.kalk-tillegg{margin-top:6px;font-size:14.5px;font-weight:600;color:var(--gronn-mork)}
.kalk-tillegg:empty{display:none}
.kalk-forbehold{margin-top:16px;font-size:14.5px;color:var(--grå)}
.kalk-knapp{margin-top:18px}
@media(max-width:560px){
  .kalkulator{padding:24px 18px}
  .kalk-svar{padding:18px 16px}
}

/* ---------- Bydelskart ----------
   Ligger nederst på de åtte bydelssidene. Prikkene står på ekte innbyrdes
   posisjon, regnet ut fra lengde- og breddegrad i kart.py. */
/* Bredden er bundet til viewBox-en (440) med litt luft. Blir boksen bredere,
   skaleres hele SVG-en opp – og da vokser etikettene med, slik at et stedsnavn
   plutselig står like stort som en mellomtittel. */
.kartboks{
  max-width:480px;margin:0 auto;
  background:var(--flate);border:1px solid var(--linje);border-radius:var(--radius);
  padding:16px 20px;
}
.bydelskart{display:block;width:100%;height:auto}
/* Land, vann og park må ha hver sin tone, ellers leses fjorden bare som en
   grå firkant nederst i kortet. Alle tre er halvgjennomsiktige, så det rolige
   fargefeltet bak siden ligger og skinner gjennom kartet. */
.kart-land{fill:var(--kart-land)}
/* Bygdøy og Hovedøya er stanset ut av fjorden med evenodd, ikke malt oppå.
   Uten dem blir hele nedre halvdel ett blått felt, og da er kartet ikke Oslo. */
.kart-vann{fill:url(#kart-sjo);fill-rule:evenodd}
.kart-sjo-1{stop-color:var(--kart-vann-lys)}
.kart-sjo-2{stop-color:var(--kart-vann)}
.kart-park{fill:var(--kart-park)}
/* Ekebergskogen og Kongsskogen på Bygdøy er skog, ikke bypark. */
.kart-skog{fill:var(--kart-skog)}
/* Gradnettet: 0,02° i lengde og 0,01° i bredde. Så vidt synlig – det skal gi
   flata struktur, ikke leses av. */
.kart-rutenett line{stroke:var(--kart-rute);stroke-width:1}
/* Selve strandlinja tegnes én gang til som strek. Uten den ser innhakkene –
   Frognerkilen, Pipervika og Bjørvika – ut som en tilfeldig takkete kant
   i stedet for en kyst. */
.kart-kyst{stroke:var(--kart-kyst);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
/* Elva tar samme tone som strandlinja. Fyllfargen til fjorden er for mørk til
   å leses som vann når den blir en fire piksler bred strek over land. */
.kart-elv{stroke:var(--kart-kyst);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.kart-elv-liten{stroke-width:2.4;opacity:.85}
/* Lysdraget over hele flata. Samme grep som på ikonbrikkene: det er dette som
   gjør at kartet leses som et stykke glass og ikke som et bilde. */
.kart-glans{fill:url(#kart-glans);pointer-events:none}
.kart-glans-1{stop-color:var(--kart-glans-topp)}
.kart-glans-2{stop-color:var(--kart-glans-midt)}
.kart-glans-3{stop-color:var(--kart-glans-bunn)}
.kart-kant{fill:none;stroke:var(--kart-kantfarge);stroke-width:1}
.kart-node{fill:var(--kart-prikk);transition:fill .16s ease, r .16s ease}
/* Lyspunktet på prikkene. Gjør dem til små glassperler i stedet for flekker. */
.kart-node-glans{fill:rgba(255,255,255,.4);pointer-events:none}
.kart-sentrum{fill:var(--kart-prikk)}
.kart-treff{fill:transparent}
.kart-kompass-skive{fill:var(--kart-land);stroke:var(--kart-rute);stroke-width:1}
.kart-kompass-nal{fill:var(--kart-prikk)}
.kart-kompass text{fill:var(--kart-prikk);font-size:12.5px;font-weight:700;
  font-family:inherit;text-anchor:middle}
/* Målestokken er regnet ut fra kartets egen projeksjon, ikke satt på øyemål. */
.kart-skala-ramme{fill:none;stroke:var(--kart-prikk);stroke-width:1;opacity:.7}
.kart-skala-fyll{fill:var(--kart-prikk);opacity:.55}
.kart-skala text{fill:var(--kart-prikk);font-size:11.5px;font-weight:700;font-family:inherit}
.kart-etikett{
  fill:var(--grå);font-size:14px;font-weight:600;
  /* SVG arver ikke fontstakken fra body av seg selv */
  font-family:inherit;
  /* Kanten bak bokstavene gjør at navn står klart også der de ligger over en
     park eller sjøkanten. paint-order legger den bak bokstavene. */
  paint-order:stroke;stroke:var(--kart-halo);stroke-width:3.5;stroke-linejoin:round;
}
.kart-etikett-svak{font-size:12.5px;font-weight:500}
/* Steder uten egen side: skal kjennes igjen, men ikke se ut som lenker. */
.kart-etikett-sted{font-size:12px;font-weight:600;opacity:.72}
/* Parknavn skal leses som underlag, ikke konkurrere med bydelene. */
.kart-etikett-park{
  font-size:11.5px;font-weight:600;fill:var(--kart-parktekst);
  stroke:var(--kart-halo);stroke-width:2.6;
}
.bydelskart a{cursor:pointer}
.bydelskart a:hover .kart-node,.bydelskart a:focus-visible .kart-node{
  fill:var(--gronn-tekst);r:7.5;
}
.bydelskart a:hover .kart-etikett,.bydelskart a:focus-visible .kart-etikett{
  fill:var(--gronn-tekst);text-decoration:underline;
}
.bydelskart a:focus-visible{outline:3px solid var(--gul);outline-offset:2px;border-radius:6px}
/* Bydelen man står på: gul, større, med et rolig skjær rundt, og uten lenke. */
.kart-node-aktiv{fill:var(--gul)}
.kart-glod{fill:url(#kart-glodfarge);pointer-events:none}
.kart-glod-1{stop-color:var(--kart-glod-inn)}
.kart-glod-2{stop-color:var(--kart-glod-ut)}
.kart-ring{fill:none;stroke:var(--gul);stroke-width:1.6;opacity:.45}
.kart-etikett-aktiv{fill:var(--blekk);font-weight:800;font-size:15px;stroke-width:4}
/* Under 500 piksler er ikke kartet lenger i full bredde, og alt i SVG-en
   skaleres ned – også teksten. Etikettene skrus derfor opp i to trinn, slik at
   de lander mellom 13 og 15 piksler på skjermen hele veien ned til 320. */
@media(max-width:560px){
  /* Parknavnene er tilleggsopplysninger. På telefon er kartet for lite til at
     de får plass uten å krasje med bydelene, og da ryker de først. */
  .kart-etikett-park{display:none}
}
@media(max-width:500px){
  .kart-etikett{font-size:15.5px}
  .kart-etikett-aktiv{font-size:16.5px}
  .kart-etikett-svak{font-size:14px}
  .kartboks{padding:14px 12px}
}
@media(max-width:420px){
  .kart-etikett{font-size:17.5px}
  .kart-etikett-aktiv{font-size:18.5px}
  .kart-etikett-svak{font-size:16px}
  .kartboks{padding:12px 8px}
}
@media(prefers-reduced-motion: reduce){.kart-node{transition:none}}

/* ---------- Priskort ----------
   Erstatter den gamle pristabellen. Tabellen ga alle fire radene nøyaktig
   samme vekt, og prissiden er den mest leste på hele nettstedet. Nå er de tre
   mannskapene kort man kan sammenligne, og pianoraden ligger for seg selv
   fordi den ikke er en timepris. */
.prisrutenett{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.prisrutenett > *{min-width:0}
.priskort{
  position:relative;display:flex;flex-direction:column;
  background:var(--flate);border:1px solid var(--linje);border-radius:var(--radius);
  padding:26px 24px 24px;
}
.priskort h3{margin-bottom:14px;font-size:19px}
.priskort-tall{margin-bottom:18px;line-height:1.1}
.priskort-tall strong{
  display:block;font-size:clamp(26px,3.4vw,32px);letter-spacing:-.02em;
  color:var(--gronn-tittel);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.priskort-tall span{display:block;margin-top:5px;font-size:14.5px;color:var(--grå)}
.priskort .hake{margin-bottom:18px}
.priskort .hake li{font-size:15.5px}
/* Regneeksempelet skyves ned til bunnen, slik at de tre kortene får samme
   høyde og eksempellinjene står på linje selv om listene er ulike. */
.priskort-eks{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--linje);
  font-size:15px;color:var(--grå);
}
.priskort-eks span{
  display:block;margin-bottom:4px;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--gronn-tekst);
}
.priskort-merk{margin-top:12px;font-size:14.5px;color:var(--grå)}

/* Det midterste kortet er det folk faktisk ender på, og skal se sånn ut. */
.priskort-valgt{
  border:2px solid var(--gronn);
  box-shadow:0 10px 30px rgba(18,63,40,.13);
}
.merkelapp{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--gronn);color:#fff;white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
}
.priskort-valgt h3{margin-top:6px}

/* Pianoraden: ikke en timepris, og hører derfor ikke hjemme i rutenettet. */
.prisrad{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:20px;padding:20px 24px;
  background:var(--flate);border:1px solid var(--linje);border-radius:var(--radius);
}
.prisrad strong{display:block;font-size:17px;margin-bottom:3px}
.prisrad span{font-size:15px;color:var(--grå)}
.prisrad-tall{
  font-size:21px;font-weight:800;white-space:nowrap;
  color:var(--gronn-tittel);font-variant-numeric:tabular-nums;
}
@media(max-width:880px){
  .prisrutenett{grid-template-columns:1fr;gap:26px}
  /* Merkelappen henger halvt utenfor kortet, så kortene trenger litt luft
     mellom seg når de legger seg under hverandre. */
  .priskort-valgt{margin-top:6px}
}

/* ---------- To spalter ---------- */
.spalter{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
@media(max-width:820px){.spalter{grid-template-columns:1fr;gap:34px}}

/* ---------- Faktaboks ---------- */
.faktaboks{background:var(--gronn-lys);border-radius:var(--radius);padding:26px 24px}
/* Variant uten grønn tone. Sto tidligere som background:#fff rett i HTML-en,
   og ble derfor stående hvit i mørkt tema uansett hva stilarket sa. */
.faktaboks-hvit{background:var(--flate);border:1px solid var(--linje)}
.faktaboks h3{color:var(--gronn-tittel)}
.faktaboks dl{display:grid;gap:11px;margin-top:12px}
.faktaboks dt{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gronn-tekst);font-weight:700}
.faktaboks dd{margin-bottom:9px}

/* ---------- Anmeldelser ---------- */
.omtale{background:var(--flate);border:1px solid var(--linje);border-radius:var(--radius);padding:24px}
.omtale .stj{color:var(--gul);letter-spacing:2px;margin-bottom:9px}
.omtale p{font-size:16.5px;margin-bottom:12px}
.omtale cite{font-style:normal;font-weight:700;font-size:15px;color:var(--grå)}

/* ---------- Anmeldelsesblokk ---------- */
.omtale-blokk{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:stretch}
.omtale-blokk .omtale{margin:0}
.omtale-snitt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--gronn-lys);border:1px solid rgba(30,102,66,.14);
  border-radius:var(--radius);padding:26px 22px;text-align:center;
}
.omtale-snitt b{font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--gronn-tittel);font-variant-numeric:tabular-nums}
.omtale-snitt .stj{color:var(--gul);letter-spacing:2px;font-size:17px}
.omtale-snitt .antall{font-size:14.5px;color:var(--grå);margin-bottom:12px}
/* To korte sitater ved siden av snittboksen. Brukes til Mittanbud, der
   omtalene er vesentlig kortere enn dem vi har fra Google. */
.omtale-blokk.to-sitater{grid-template-columns:1fr 1fr .9fr;margin-top:22px}
@media(max-width:940px){
  /* Snittboksen får ikke plass som tredje kolonne lenger, og skal da legge seg
     på tvers under sitatene i stedet for å stå alene i venstre kolonne. */
  .omtale-blokk.to-sitater{grid-template-columns:1fr 1fr}
  .omtale-blokk.to-sitater .omtale-snitt{grid-column:1 / -1}
}
@media(max-width:700px){
  .omtale-blokk{grid-template-columns:1fr;gap:14px}
  .omtale-blokk.to-sitater{grid-template-columns:1fr}
  .omtale-snitt{padding:20px 18px}
  .omtale-snitt b{font-size:38px}
}

/* ---------- CTA-band ---------- */
.band{background:var(--gronn);color:#fff;text-align:center;padding:56px 0}
.band h2{margin-bottom:12px}
.band p{color:#dbeee3;max-width:48ch;margin-inline:auto;margin-bottom:24px;font-size:18px}
.band .hero-knapper{justify-content:center;margin-bottom:0}

/* ---------- Skjema ---------- */
form{display:grid;gap:16px;max-width:520px}
label{font-weight:700;font-size:15px;display:block;margin-bottom:6px}
input:not([type="radio"]):not([type="checkbox"]),select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--linje);border-radius:8px;
  font:inherit;font-size:16px;background:var(--flate);color:var(--blekk);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gronn);border-color:var(--gronn-tekst)}
textarea{min-height:120px;resize:vertical}
.skjema-hjelp{font-size:14px;color:var(--grå)}

/* ---------- Brødsmuler ---------- */
.smuler{font-size:14px;color:var(--grå);padding-top:20px}
.smuler a{color:var(--grå)}

/* ---------- Bunn ---------- */
footer{background:var(--bunn);color:#c3c9cf;padding:52px 0 26px;font-size:15.5px}
footer h4{color:#fff;font-size:15px;margin-bottom:13px;letter-spacing:.03em}
footer a{color:#c3c9cf}
footer a:hover{color:#fff}
.bunn-rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;margin-bottom:34px}
.bunn-liste{list-style:none;display:grid;gap:8px}
.bunn-under{border-top:1px solid #2c3238;padding-top:20px;font-size:14px;color:#8b939b;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* to kort i bredden på mobil – mindre å bla gjennom */
@media(max-width:700px){
  .rutenett{grid-template-columns:1fr 1fr;gap:12px}
  .rutenett.brede{grid-template-columns:1fr;gap:14px}

  .kort{padding:17px 15px;border-radius:12px}
  .kort-ikon{width:38px;height:38px;border-radius:10px;margin-bottom:11px}
  .kort-ikon svg{width:20px;height:20px}
  .kort h3{font-size:15.5px;margin-bottom:6px;line-height:1.25}
  .kort p{
    font-size:13.5px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .kort .les{margin-top:11px;font-size:13.5px}
  .seksjon-ingress{margin-bottom:24px}
}
@media(max-width:360px){
  .rutenett{grid-template-columns:1fr}
}

/* ---------- Menyknapp ---------- */
.meny-knapp{
  display:none;position:relative;z-index:60;
  width:44px;height:40px;padding:0;border:0;border-radius:10px;
  background:transparent;cursor:pointer;flex:none;
}
.meny-knapp span{
  display:block;width:22px;height:2px;margin:0 auto;border-radius:2px;
  background:var(--blekk);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.meny-knapp span + span{margin-top:5px}
.meny-knapp[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.meny-knapp[aria-expanded="true"] span:nth-child(2){opacity:0}
.meny-knapp[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.meny-knapp:hover{background:var(--gronn-lys)}
.meny-knapp:focus-visible{outline:2px solid var(--gronn);outline-offset:2px}
.meny-ring{display:none}

/* Språkbytte i menyen: diskret, men lett å finne for den som leter etter engelsk */
.meny-sprak a{
  font-size:14px;font-weight:700;letter-spacing:.02em;
  /* grønn, ikke grå: på glassmenyen over den grønne toppen ble grå så svak at
     knappen så avslått ut */
  color:var(--gronn-tekst);
  border:1px solid rgba(30,102,66,.28);border-radius:999px;
  padding:5px 13px;
}
.meny-sprak a:hover{
  color:var(--gronn-tekst);border-color:rgba(30,102,66,.35);
  background:var(--gronn-lys);text-decoration:none;
}

/* ---------- Kompakt topp på mobil ---------- */
@media(max-width:780px){
  /* topplinjen: bare telefonnummeret, sentrert */
  .topbar .wrap{justify-content:center;gap:0}
  .topbar .topp-epost,.topbar .apen{display:none}
  .topbar .topp-tlf{font-size:15px;font-weight:700}

  /* logo og meny skal få plass på hver sin linje */
  header .wrap{gap:10px;padding-block:11px}
  .logo{gap:9px}
  .logo img{width:38px}
  .logo .logo-tekst{font-size:15px;white-space:nowrap;line-height:1.15}
  .logo .logo-tekst span{font-size:9.5px;letter-spacing:.05em}
  /* menyen legger seg i en panel under toppen */
  .har-menyknapp .meny-knapp{display:block}
  .har-menyknapp #hovedmeny{
    position:absolute;left:0;right:0;top:100%;
    background:var(--flate);border-bottom:1px solid var(--linje);
    box-shadow:0 14px 30px rgba(18,63,40,.13);
    max-height:0;overflow:hidden;
    transition:max-height .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
    opacity:0;
  }
  .har-menyknapp #hovedmeny.apen{max-height:420px;opacity:1}
  .har-menyknapp #hovedmeny ul{
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 22px 16px;
  }
  .har-menyknapp #hovedmeny li{border-top:1px solid var(--linje)}
  .har-menyknapp #hovedmeny li:first-child{border-top:0}
  .har-menyknapp #hovedmeny a{
    display:block;padding:15px 2px;font-size:16.5px;
  }
  .har-menyknapp #hovedmeny a[aria-current="page"]{border-bottom:0;color:var(--gronn-tekst)}
  /* i mobilpanelet blir språkbytte en vanlig menyrad, ikke en pille */
  .har-menyknapp .meny-sprak a{
    border:0;border-radius:0;padding:15px 2px;font-size:16.5px;
    color:var(--gronn-tekst);background:none;
  }
  .har-menyknapp .meny-ring{display:block;border-top:1px solid var(--linje);margin-top:6px;padding-top:6px}
  .har-menyknapp .meny-ring a{
    background:var(--gronn);color:#fff;border-radius:10px;
    text-align:center;font-weight:800;padding:14px;margin-top:8px;
  }
  .har-menyknapp .meny-ring a:hover{background:var(--gronn-mork);text-decoration:none}
  body.meny-apen{overflow:hidden}

  /* uten JS: menyen vises som vanlig rad */
  nav ul{gap:14px;flex-wrap:wrap}
  nav a{font-size:14px;white-space:nowrap}
}
@media(max-width:420px){
  .logo .logo-tekst{font-size:13.5px}
  .logo .logo-tekst span{font-size:9px}
  .logo img{width:34px}
}

/* ---------- Ringeknapp mobil ---------- */
.ring-mobil{display:none}
@media(max-width:700px){
  section{padding:34px 0}
  .band{padding:40px 0}
  .side-topp{padding:38px 0 42px}
  .side-topp.med-kort{padding-bottom:78px}
  .side-topp + section{padding-top:34px}
  .side-topp + section.sand{padding-top:34px}
  h2{margin-bottom:10px}
  .seksjon-ingress{margin-bottom:20px;font-size:16.5px}
  .spalter{gap:26px}
  .faktaboks{padding:20px 18px}
  .skjema-kort{padding:22px 20px}
  .fordeler > div{padding:20px 16px}
  .band p{margin-bottom:18px}
  .hero{padding:34px 0 44px}
  nav ul{gap:15px;font-size:14.5px}
  nav li.skjul-mobil{display:none}
  .ring-mobil{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--gronn);color:#fff;font-weight:800;font-size:17px;
    align-items:center;justify-content:center;gap:9px;padding:15px;
    box-shadow:0 -2px 14px rgba(0,0,0,.16);
  }
  .ring-mobil:hover{color:#fff;text-decoration:none}
  body{padding-bottom:60px}
}

/* ---------- Grønn sidetopp ---------- */
.side-topp.med-kort{padding-bottom:96px}
.side-topp + section{padding-top:48px}
.side-topp + section.sand{padding-top:52px}
.side-topp{
  position:relative;overflow:hidden;color:#fff;padding:52px 0 58px;
  background:
    radial-gradient(760px 400px at 80% 10%, rgba(224,160,74,.20), transparent 62%),
    linear-gradient(160deg,var(--gronn-mork) 0%,var(--gronn) 66%,#1a5a3a 100%);
}
.side-topp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.side-topp .wrap{position:relative;z-index:1}
.side-topp h1{
  font-size:clamp(30px,4.4vw,44px);line-height:1.15;letter-spacing:-.02em;
  max-width:16ch;margin-bottom:14px;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.30)) drop-shadow(0 3px 5px rgba(0,0,0,.26));
}
.side-topp p{
  font-size:19px;max-width:54ch;color:#e2f1e9;margin:0;
  text-shadow:0 1px 0 rgba(0,0,0,.22), 0 2px 5px rgba(0,0,0,.24);
}
.side-topp .smuler{padding-top:0;margin-bottom:16px;color:#a9d3ba}
.side-topp .smuler a{color:#a9d3ba}
.side-topp .smuler a:hover{color:#fff}

/* ---------- Kontaktside ---------- */
.kontakt-veier{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:38px;
  margin-top:-64px;position:relative;z-index:5;
}
.kontakt-vei{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--flate);border:1px solid var(--linje);border-radius:14px;padding:22px 22px;
  box-shadow:0 14px 34px rgba(18,63,40,.14);
  transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, border-color .34s ease;
}
a.kontakt-vei:hover{
  transform:translateY(-2px);text-decoration:none;
  border-color:rgba(30,102,66,.15);box-shadow:0 6px 16px rgba(18,63,40,.07);
}
.kontakt-vei .ikon{
  width:46px;height:46px;border-radius:13px;flex:none;
  background:linear-gradient(158deg,var(--ikon-topp) 0%,var(--gronn-lys) 100%);
  color:var(--gronn-tekst);display:flex;align-items:center;justify-content:center;
  transform:rotate(-3deg);
  box-shadow:0 0 0 1px rgba(30,102,66,.09),
             0 5px 14px rgba(18,63,40,.13), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .34s cubic-bezier(.34,1.32,.64,1);
}
.kontakt-vei:hover .ikon{transform:rotate(-1deg) scale(1.03)}
.kontakt-vei .ikon svg{width:23px;height:23px}
.kontakt-vei b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gronn-tekst);margin-bottom:5px}
.kontakt-vei .verdi{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--blekk)}
.kontakt-vei small{display:block;font-size:14px;color:var(--grå);margin-top:4px}
@media(max-width:820px){.kontakt-veier{grid-template-columns:1fr;margin-top:-52px}}

.skjema-kort{
  background:var(--flate);border:1px solid var(--linje);border-radius:16px;
  padding:30px 32px;box-shadow:0 10px 30px rgba(18,63,40,.07);
}
.skjema-kort h2{margin-bottom:6px}
.skjema-kort > p{color:var(--grå);margin-bottom:22px}
.skjema-kort form{max-width:none}
.felt-par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.felt-par{grid-template-columns:1fr}}
/* Radioknappene i tilbudsskjemaet hører sammen som én gruppe. Uten
   fieldset/legend leser skjermlesere bare de seks knappene, aldri spørsmålet
   de svarer på. Legenden skal se ut nøyaktig som label-ene rundt seg, ellers
   ser skjemaet uryddig ut – derfor nulles nettleserens egen fieldset-ramme. */
.felt-gruppe{border:0;padding:0;margin:0}
.felt-gruppe legend{padding:0;margin-bottom:6px;font-weight:700;font-size:15px}

.valg-rad{display:flex;flex-wrap:wrap;gap:9px}
.valg-rad input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0;
}
.valg-rad label{
  display:inline-block;margin:0;padding:9px 15px;border-radius:100px;cursor:pointer;
  border:1px solid var(--linje);background:var(--flate);font-size:14.5px;font-weight:600;color:var(--blekk);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.valg-rad label:hover{border-color:rgba(30,102,66,.35)}
.valg-rad input:checked + label{background:var(--gronn);border-color:var(--gronn-tekst);color:#fff}
.valg-rad input:focus-visible + label{outline:2px solid var(--gronn);outline-offset:2px}

/* ---------- Regnskogkort (om oss) ---------- */
.skog-kort{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:linear-gradient(140deg,var(--ikon-topp) 0%,var(--gronn-lys) 100%);
  border:1px solid rgba(30,102,66,.16);border-radius:16px;
  padding:28px 32px;margin-top:26px;
}
/* svakt bladmønster i hjørnet */
.skog-kort::after{
  content:"";position:absolute;right:-30px;bottom:-40px;width:190px;height:190px;
  background:radial-gradient(circle at 30% 30%, rgba(30,102,66,.10), transparent 68%);
  border-radius:50%;pointer-events:none;
}
.skog-tall{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:124px;padding:14px 10px;border-radius:14px;background:var(--flate);
  box-shadow:0 0 0 3px var(--flate), 0 0 0 4px rgba(30,102,66,.13), 0 5px 14px rgba(18,63,40,.16);
}
.skog-tall b{
  font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--gronn-tittel);
  font-variant-numeric:tabular-nums;
}
.skog-tall span{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gronn-tekst);font-weight:700;margin-top:6px;text-align:center;
}
.skog-tekst{position:relative;z-index:1}
.skog-tekst h3{color:var(--gronn-tittel);margin-bottom:8px}
.skog-tekst p{font-size:16.5px;line-height:1.62;margin-bottom:11px;max-width:74ch}
.skog-tekst p:last-child{margin-bottom:0}
.skog-kilde{font-size:14px;color:var(--grå)}
@media(max-width:640px){
  .skog-kort{grid-template-columns:1fr;justify-items:start;gap:18px;padding:24px 22px}
}

/* ---------- Merkeblokk med logo ---------- */
.merke-blokk{
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  background:
    radial-gradient(520px 300px at 22% 18%, rgba(224,160,74,.22), transparent 62%),
    linear-gradient(155deg,var(--gronn-mork) 0%,var(--gronn) 70%,#1a5a3a 100%);
  color:#fff;border-radius:18px;padding:40px 44px;position:relative;overflow:hidden;
}
.merke-blokk::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent);
  -webkit-mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent);
}
.merke-blokk > *{position:relative;z-index:1}
/* Logoen skal se ut som et klistremerke som ligger oppå den grønne flaten:
   litt på skrå, med en tett skygge rett under og en myk skygge lenger ned. */
.merke-logo{
  position:relative;display:block;
  width:210px;flex:none;
  transform:rotate(-3deg);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.32)) drop-shadow(0 18px 30px rgba(0,0,0,.38));
  transition:transform .4s cubic-bezier(.34,1.32,.64,1);
}
.merke-logo img{width:100%;height:auto;display:block}

/* Glansen. Den ligger som et eget lag oppå, men klippes til logoens egen form
   med mask-image – ellers ville lyset ligget som en firkant over hjørnene.
   Masken bruker webp-fila, altså samme bilde nettleseren nettopp lastet ned. */
.merke-logo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,
    transparent 43%,
    rgba(255,255,255,.30) 47%,
    transparent 51%,
    transparent 53%,
    rgba(255,255,255,.13) 55.5%,
    transparent 58%);
  background-size:240% 100%;
  background-position:36% 0;
  -webkit-mask:url(../bilder/logo-klistremerke.webp) center/100% 100% no-repeat;
  mask:url(../bilder/logo-klistremerke.webp) center/100% 100% no-repeat;
}
.merke-blokk:hover .merke-logo{transform:rotate(0deg) scale(1.03)}
/* et kort glimt når man peker på blokka, som når lyset treffer vinyl */
.merke-blokk:hover .merke-logo::after{animation:klistreGlans 1.15s cubic-bezier(.4,0,.2,1)}
@keyframes klistreGlans{
  from{background-position:120% 0}
  to{background-position:-24% 0}
}
.merke-blokk h1{
  font-size:clamp(27px,3.6vw,36px);line-height:1.15;letter-spacing:-.02em;margin-bottom:12px;
}
.merke-blokk p{color:#c9e5d5;font-size:16px;max-width:52ch;line-height:1.6}
.merke-blokk .merke-ingress{color:#fff;font-size:18.5px;margin-bottom:14px}
.merke-blokk{padding:44px 46px}
@media(max-width:760px){
  .merke-blokk{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;padding:34px 26px}
  .merke-logo{width:170px}
  .merke-blokk p{max-width:none}
}

/* ---------- Bilder i innhold ---------- */
.bilde-ramme{
  border-radius:14px;overflow:hidden;border:1px solid var(--linje);
  box-shadow:0 10px 28px rgba(18,63,40,.12);background:var(--sand);
}
.bilde-ramme img{width:100%;height:100%;object-fit:cover;display:block}
.bilde-tekst{font-size:14px;color:var(--grå);margin-top:10px}

.bildegalleri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bildegalleri .bilde-ramme img{aspect-ratio:4/3}
@media(max-width:760px){.bildegalleri{grid-template-columns:1fr;gap:14px}}

/* Engelsk oversettelse under en norsk kundeomtale. Originalen står øverst, så
   det er tydelig at anmeldelsen faktisk ble skrevet på norsk. */
.omtale-oversatt{
  font-size:15px;color:var(--grå);font-style:normal;
  padding-top:10px;margin-top:10px;
  border-top:1px solid var(--linje);
}

/* ---------- Glass ----------
   Frostet glass på de elementene som faktisk ligger oppå noe annet: menylinja,
   fordelskortet på overgangen mellom hero og hvit flate, ringeknappen på mobil
   og samtykkeboksen. Tabeller, tjenestekort og brødtekst blir stående helt
   ugjennomsiktige – der ville glass bare gjort teksten vanskeligere å lese.

   Alt ligger bak @supports. Nettlesere uten backdrop-filter beholder den
   ugjennomsiktige bakgrunnen de hadde før, og mister ingenting annet enn pynt. */
:root{
  --glass-blur:22px;
  --glass-metning:180%;
  --glass-hvit:rgba(255,255,255,.72);
  --glass-kant:rgba(255,255,255,.55);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

  /* Menylinja. Innholdet glir under den, og blir uskarpt i det det passerer. */
  header{
    background:var(--glass-hvit);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-metning));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-metning));
    border-bottom-color:rgba(226,230,234,.7);
  }

  /* Fordelskortet ligger halvt oppå det grønne heroet og halvt på hvitt.
     Derfor blir venstre og høyre halvdel ulikt tonet – det er selve poenget. */
  .fordeler{
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:blur(26px) saturate(var(--glass-metning));
    backdrop-filter:blur(26px) saturate(var(--glass-metning));
    border-color:rgba(255,255,255,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),   /* lysstripe langs overkanten */
      inset 0 -1px 0 rgba(255,255,255,.28),
      0 16px 44px rgba(18,63,40,.18);
  }
  .fordeler > div + div{border-left-color:rgba(18,63,40,.10)}

  /* Ringeknappen på mobil. Den er hovedhandlingen på siden, så den holder høy
     dekkevne – glass skal ikke gå ut over at nummeret er lett å lese. */
  @media(max-width:700px){
    .ring-mobil{
      background:rgba(30,102,66,.86);
      -webkit-backdrop-filter:blur(18px) saturate(160%);
      backdrop-filter:blur(18px) saturate(160%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 -2px 18px rgba(0,0,0,.20);
    }
  }

  /* Samtykkeboksen svever over innholdet allerede. */
  #samtykke{
    background:rgba(255,255,255,.80);
    -webkit-backdrop-filter:blur(24px) saturate(var(--glass-metning));
    backdrop-filter:blur(24px) saturate(var(--glass-metning));
    border-color:var(--glass-kant);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 12px 40px rgba(0,0,0,.20);
  }

  /* Den lyse knappen i heroen: fra ren omriss til et lite glassfelt. */
  .knapp-klar{
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    backdrop-filter:blur(10px) saturate(140%);
    border-color:rgba(255,255,255,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(0,0,0,.14);
  }
  .knapp-klar:hover{background:rgba(255,255,255,.26)}

  /* ----- Underlaget -----
     Glass viser det som ligger bak. Bak et hvitt kort på hvit side er det bare
     mer hvitt, og da skjer det ingenting. Derfor legges det et rolig fargefelt
     bakerst, som blir liggende stille mens innholdet ruller forbi. Fargene er
     husets egne, grønt og gult, holdt så svake at brødtekst ikke merker dem. */
  html{
    background:
      radial-gradient(820px 620px at 10%  4%, rgba(30,102,66,.15), transparent 60%),
      radial-gradient(700px 520px at 92% 16%, rgba(224,160,74,.16), transparent 62%),
      radial-gradient(900px 640px at 76% 52%, rgba(30,102,66,.12), transparent 62%),
      radial-gradient(640px 500px at  6% 72%, rgba(224,160,74,.11), transparent 62%),
      radial-gradient(860px 620px at 54% 96%, rgba(30,102,66,.13), transparent 64%),
      #fafbfa;
    background-attachment:fixed;
  }
  body{background:transparent}
  /* sandseksjonene blir et lett slør i stedet for en flate */
  section.sand{background:rgba(247,248,249,.5)}

  /* ----- Hvite flater ----- */
  .kort,.omtale,.tabellboks,.kontakt-vei,.skjema-kort,.priskort,.prisrad,.kartboks,.kalkulator{
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(18px) saturate(170%);
    backdrop-filter:blur(18px) saturate(170%);
    border-color:rgba(255,255,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 22px rgba(18,63,40,.07);
  }
  .kort:hover{
    background:rgba(255,255,255,.72);
    border-color:rgba(30,102,66,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(18,63,40,.10);
  }
  /* Glassregelen over setter border-color på alle kortene, og ville ellers
     vasket bort den grønne rammen som peker ut det midterste priskortet. */
  .priskort-valgt{
    border-color:var(--gronn);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 30px rgba(18,63,40,.15);
  }
  /* Tabellhodet ligger oppå glasset og må slippe lyset gjennom det også. */
  th{background:rgba(234,243,238,.62)}
  tbody tr:hover{background:rgba(255,255,255,.42)}
  th,td{border-bottom-color:rgba(18,63,40,.09)}

  /* ----- Grønntonede flater ----- */
  .faktaboks,.omtale-snitt,.regnskog-boks{
    background:rgba(234,243,238,.55);
    -webkit-backdrop-filter:blur(20px) saturate(175%);
    backdrop-filter:blur(20px) saturate(175%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 6px 22px rgba(18,63,40,.07);
  }
  .skog-kort{
    background:linear-gradient(140deg, rgba(242,249,244,.62) 0%, rgba(234,243,238,.5) 100%);
    -webkit-backdrop-filter:blur(20px) saturate(175%);
    backdrop-filter:blur(20px) saturate(175%);
    border-color:rgba(255,255,255,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 6px 22px rgba(18,63,40,.07);
  }

  /* ----- Ikonfeltene -----
     Tjenestekortene, fordelene og kontaktveiene har alle en liten flate bak
     symbolet. Den var en flat grønn firkant. Nå er den en glassbrikke:
     fargefeltet bak siden slipper gjennom og blir uskarpt, overkanten fanger
     lys, og bunnen er tonet mørkere slik at brikken ser ut til å ha tykkelse.

     Rekkefølgen på lagene, nedenfra: bakgrunnen (glasset selv), ::before
     (lyspunkt oppe til venstre og en grønn refleks i bunnen), ::after
     (sveipet), og øverst symbolet, som løftes med z-index. */
  .kort-ikon,.fordeler .ikon,.kontakt-vei .ikon{
    position:relative;overflow:hidden;isolation:isolate;
    background:
      linear-gradient(152deg,
        rgba(255,255,255,.78) 0%,
        rgba(234,243,238,.46) 42%,
        rgba(30,102,66,.32) 100%);
    -webkit-backdrop-filter:blur(12px) saturate(190%);
    backdrop-filter:blur(12px) saturate(190%);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),          /* lysstripe langs overkanten */
      inset 3px 0 8px -6px rgba(255,255,255,.9),    /* lys inn fra venstre kant */
      inset 0 -9px 16px -8px rgba(18,63,40,.60),    /* tykkelsen i bunnen */
      inset 0 0 0 1px rgba(30,102,66,.10),          /* svakt grønt omriss */
      0 6px 16px rgba(18,63,40,.18),
      0 1px 3px rgba(18,63,40,.12);
  }
  .kort-ikon::before,.fordeler .ikon::before,.kontakt-vei .ikon::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:
      radial-gradient(105% 72% at 24% 2%, rgba(255,255,255,.92), rgba(255,255,255,0) 60%),
      radial-gradient(84% 62% at 86% 108%, rgba(30,102,66,.30), rgba(30,102,66,0) 62%);
  }
  /* Refleksen som går over glasset når du peker på kortet. Den ligger utenfor
     brikken i utgangspunktet, og klippes av overflow:hidden på vei forbi. */
  .kort-ikon::after,.fordeler .ikon::after,.kontakt-vei .ikon::after{
    content:"";position:absolute;top:-40%;bottom:-40%;left:-75%;width:58%;
    pointer-events:none;opacity:0;
    background:linear-gradient(90deg,
      rgba(255,255,255,0), rgba(255,255,255,.88), rgba(255,255,255,0));
    transform:rotate(18deg);
    transition:transform .62s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  }
  .kort:hover .kort-ikon::after,
  .fordeler > div:hover .ikon::after,
  .kontakt-vei:hover .ikon::after{
    transform:translateX(330%) rotate(18deg);opacity:1;
  }
  .kort-ikon svg,.fordeler .ikon svg,.kontakt-vei .ikon svg{
    position:relative;z-index:1;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
  }

  /* Regnskogmerket følger samme oppskrift, men beholder de to ringene sine. */
  .regnskog-ikon{
    position:relative;overflow:hidden;
    background:linear-gradient(152deg,
      rgba(255,255,255,.82) 0%, rgba(255,255,255,.4) 46%, rgba(30,102,66,.18) 100%);
    -webkit-backdrop-filter:blur(12px) saturate(190%);
    backdrop-filter:blur(12px) saturate(190%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -7px 14px -8px rgba(18,63,40,.45),
      0 0 0 3px rgba(255,255,255,.55),
      0 0 0 4px rgba(30,102,66,.13),
      0 3px 10px rgba(18,63,40,.18);
  }
  .regnskog-ikon::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(105% 72% at 24% 2%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  }
  .regnskog-ikon svg{position:relative;z-index:1}

  /* ----- Spørsmålslista -----
     Den har ingen egen boks, så her blir det linjene som mykner. */
  .sporsmal{border-top-color:rgba(18,63,40,.12)}
  .sporsmal details{border-bottom-color:rgba(18,63,40,.12)}

  /* Bildene beholder sin egen ramme, men skyggen dempes litt så de ikke
     blir tyngre enn glasset rundt. */
  .bilde-ramme{border-color:rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(18,63,40,.10)}
}

/* ---------- Ofte stilte spørsmål ---------- */
.sporsmal{max-width:820px;border-top:1px solid var(--linje)}
.sporsmal details{border-bottom:1px solid var(--linje)}
.sporsmal summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 4px;
  font-weight:600;font-size:18px;line-height:1.45;color:var(--blekk);
  transition:color .2s ease;
}
.sporsmal summary::-webkit-details-marker{display:none}
.sporsmal summary:hover{color:var(--gronn-tekst)}
/* pluss-tegnet til høyre: den loddrette streken krymper bort når svaret åpnes,
   så tegnet blir til et minus */
.sporsmal summary::after{
  content:"";flex:none;margin-left:auto;position:relative;top:6px;
  width:14px;height:14px;
  background:
    linear-gradient(var(--gronn),var(--gronn)) center/14px 2px no-repeat,
    linear-gradient(var(--gronn),var(--gronn)) center/2px 14px no-repeat;
  transition:background-size .28s cubic-bezier(.22,.61,.36,1);
}
.sporsmal details[open] summary{color:var(--gronn-tekst)}
.sporsmal details[open] summary::after{background-size:14px 2px, 2px 0}
.sporsmal .svar{padding:0 42px 22px 4px}
.sporsmal .svar p{color:var(--grå);line-height:1.65;margin:0}
.sporsmal .svar p + p{margin-top:12px}
@media(max-width:560px){
  .sporsmal summary{font-size:17px;padding:17px 2px;gap:12px}
  .sporsmal .svar{padding:0 30px 19px 2px}
}

/* ---------- Regnskogfondet ---------- */
.regnskog-boks{
  display:flex;align-items:center;gap:16px;
  background:var(--gronn-lys);border:1px solid rgba(30,102,66,.14);
  border-radius:var(--radius);padding:20px 24px;
}
.regnskog-boks p{font-size:16px;line-height:1.55;color:var(--blekk);margin:0}
.regnskog-boks strong{display:block;color:var(--gronn-tittel)}
.regnskog-ikon{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--flate);color:var(--gronn-tekst);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px var(--flate), 0 0 0 4px rgba(30,102,66,.13), 0 3px 8px rgba(18,63,40,.16);
}
.regnskog-ikon svg{width:22px;height:22px}
@media(max-width:560px){
  .regnskog-boks{flex-direction:column;align-items:flex-start;gap:13px;padding:18px 20px}
  .regnskog-boks p{font-size:15.5px}
}

/* ---------- Samtykke for informasjonskapsler ---------- */
#samtykke{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:var(--flate);border:1px solid var(--linje);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.20);
  max-width:560px;margin-inline:auto;
}
.samtykke-innhold{padding:20px 22px}
.samtykke-innhold p{font-size:15px;line-height:1.55;color:var(--blekk);margin-bottom:16px}
.samtykke-knapper{display:flex;gap:10px;flex-wrap:wrap}
.samtykke-knapper .knapp{font-size:15px;padding:10px 18px}
@media(max-width:700px){
  #samtykke{bottom:72px}                 /* over den faste ringeknappen */
  .samtykke-knapper .knapp{flex:1;text-align:center}
}

/* ============ Bevegelse ============ */

/* Inntoning ved rulling – legges bare på når JS har slått det på */
.animer .inn{opacity:0;transform:translateY(16px)}
.animer .inn.synlig{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}

/* Heroen tones inn med en gang siden, uten å vente på rulling */
@keyframes heroInn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-merke{animation:heroInn .5s cubic-bezier(.22,.61,.36,1) both}
.hero h1{animation:heroInn .55s cubic-bezier(.22,.61,.36,1) .06s both}
.hero p.ingress{animation:heroInn .55s cubic-bezier(.22,.61,.36,1) .12s both}
.hero-knapper{animation:heroInn .55s cubic-bezier(.22,.61,.36,1) .18s both}
.stjerner{animation:heroInn .55s cubic-bezier(.22,.61,.36,1) .24s both}

@keyframes bildeInn{
  from{opacity:0;transform:rotate(-1.2deg) translateY(18px) scale(.97)}
  to{opacity:1;transform:rotate(-1.2deg) translateY(0) scale(1)}
}
.hero-bilde{animation:bildeInn .75s cubic-bezier(.22,.61,.36,1) .1s both}

/* Kort løfter seg litt når du peker på dem */
.kort{transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, border-color .34s ease}
.kort:hover{
  transform:translateY(-2px);
  border-color:rgba(30,102,66,.15);
  box-shadow:0 6px 16px rgba(18,63,40,.07);
}

/* «Les mer →» – pilen sklir fremover */
.kort .les{display:inline-flex;align-items:center;gap:6px;transition:gap .2s ease}
.kort:hover .les{gap:11px}

/* Knapper */
.knapp{transition:background .18s ease, transform .14s ease, box-shadow .18s ease, color .18s ease}
.knapp:hover{transform:translateY(-2px)}
.knapp:active{transform:translateY(0)}
.knapp-gul:hover{box-shadow:0 10px 22px rgba(0,0,0,.26)}

/* Meny og lenker */
nav a{transition:color .18s ease}
footer a{transition:color .18s ease}
.omtale{transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease}
.omtale:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,63,40,.06)}

/* Tabellrader */
tbody tr{transition:background .3s ease}
tbody tr:hover{background:var(--sand)}

/* Fordelskortet: ikonet retter seg opp når du peker på feltet */
.fordeler .ikon{transition:transform .22s cubic-bezier(.34,1.32,.64,1), box-shadow .22s ease}
.fordeler > div:hover .ikon{transform:rotate(-1deg) scale(1.03)}

/* Logoen i menyen */
.logo img{transition:transform .22s cubic-bezier(.34,1.32,.64,1)}
.logo:hover img{transform:rotate(-4deg) scale(1.06)}

/* Samtykkeboksen glir opp */
@keyframes samtykkeInn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#samtykke{animation:samtykkeInn .4s cubic-bezier(.22,.61,.36,1) .5s both}

/* Skjemafelt */
input,select,textarea{transition:border-color .16s ease, box-shadow .16s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(30,102,66,.12)}

/* Ingen bevegelse for dem som har bedt om det */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .kort:hover,.omtale:hover,.knapp:hover{transform:none}
  /* Refleksen over ikonbrikkene ville ellers hoppe tvers over på et millisekund
     i stedet for å gli. Da er det bedre å la den være. */
  .kort-ikon::after,.fordeler .ikon::after,.kontakt-vei .ikon::after{display:none}
}

/* ---------- Finpuss ---------- */

/* tydelig fokusmarkering for tastaturbruk */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--gronn);outline-offset:3px;border-radius:4px;
}
.hero a:focus-visible,.band a:focus-visible,.side-topp a:focus-visible,
.merke-blokk a:focus-visible,.topbar a:focus-visible{outline-color:#fff}

/* aldri ordbrudd midt i lange e-postadresser */
.topp-epost a,.kontakt-vei .verdi{overflow-wrap:anywhere}

/* jevn tekstflyt i ingresser */
.seksjon-ingress,.hero p.ingress,.side-topp p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* bilder skal ikke hoppe før de er lastet */
img{background:var(--sand)}
.bilde-ramme img,.hero-bilde img{background:none}
/* Logoene er gjennomsiktige PNG-er. Får de plassholderfargen bak seg, lyser den
   gjennom der logoen er gjennomsiktig, og motivet ser ut til å ligge på en firkant. */
.logo img,.merke-logo img{background:none}

/* ---------- Mørkt tema ----------
   Følger innstillingen i telefonen eller maskinen, og slår seg på av seg selv.
   Ingen bryter på siden: da måtte valget lagres og huskes, og folk forventer
   uansett at nettsider retter seg etter systemet.

   De fullfargede feltene – heroen, den grønne toppen, CTA-båndet, bunnfeltet –
   blir stående. De er husets farger, og et flyttebyrå skal se likt ut uansett
   hvilken innstilling du har. Det som snus er flatene rundt dem. */
@media (prefers-color-scheme: dark){
  :root{
    /* grønt som fyll: lysnet litt, ellers drukner knappene i den mørke flaten.
       Mettet så langt det går uten at hvit tekst faller under kravet: målt
       kontrast mot hvitt er 4,7:1, og går fyllet lysere ryker den grensa. */
    --gronn:#218455;
    --gronn-mork:#14603f;
    /* grønt som tekst: må være lyst nok til å leses på mørk flate */
    --gronn-tekst:#5ed6a0;
    --gronn-tittel:#93e8be;
    /* Flatene er ikke nøytralt grå, men trukket mot grønt. Nøytralt grått blir
       flatt og litt trist ved siden av det grønne merket; en anelse grønt i
       selve flaten gjør at hele siden henger sammen med logoen. */
    --gronn-lys:#143024;
    --ikon-topp:#1e3a2c;
    --bakgrunn:#0c1412;
    --flate:#151e1b;
    --bunn:#070e0c;
    --sand:#101a17;
    /* tekst og streker: løftet et hakk, brødteksten lå litt for lavt mot
       den mørke flaten */
    --blekk:#f0f5f2;
    --grå:#a6b5ae;
    --linje:#2b3a34;
    --gul:#f0b96c;
    /* bydelskartet: fjorden må være mørkere enn landet, ikke lysere */
    --kart-land:rgba(255,255,255,.05);
    --kart-vann:rgba(8,38,52,.92);
    --kart-vann-lys:rgba(22,72,94,.85);
    --kart-park:rgba(48,104,68,.42);
    --kart-skog:rgba(44,96,64,.55);
    --kart-parktekst:#82b492;
    --kart-kyst:#2f6f8a;
    --kart-prikk:#6d8279;
    --kart-rute:rgba(255,255,255,.035);
    --kart-halo:rgba(9,17,14,.8);
    --kart-glans-topp:rgba(255,255,255,.15);
    --kart-glans-midt:rgba(255,255,255,.03);
    --kart-glans-bunn:rgba(255,255,255,0);
    --kart-kantfarge:rgba(255,255,255,.14);
    --kart-glod-inn:rgba(240,185,108,.42);
    --kart-glod-ut:rgba(240,185,108,0);
  }

  /* Ikonfeltene hadde en hard, ugjennomsiktig ring rundt seg. Den er byttet
     mot en tynn kant og en myk skygge – her uten den lyse innerstripa, som
     bare ville lyst på mørk flate. */
  .kort-ikon,.fordeler .ikon,.kontakt-vei .ikon{
    box-shadow:
      0 0 0 1px rgba(94,214,160,.18),
      0 5px 14px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  /* Hvite ringer rundt tallet og regnskogikonet var hardkodet hvite. */
  .skog-tall{box-shadow:0 0 0 3px var(--flate), 0 0 0 4px rgba(94,214,160,.20), 0 5px 14px rgba(0,0,0,.4)}
  .regnskog-ikon{box-shadow:0 0 0 3px var(--flate), 0 0 0 4px rgba(94,214,160,.20), 0 3px 8px rgba(0,0,0,.4)}
  .skog-kort{background:linear-gradient(140deg,#17281f 0%,var(--gronn-lys) 100%);border-color:rgba(94,214,160,.18)}

  /* Den hvite rammen rundt herobildet dempes, ellers lyser den for hardt. */
  .hero-bilde{border-color:rgba(255,255,255,.72)}

  /* Skygger må være svartere for å synes i det hele tatt. */
  .kort,.omtale,.tabellboks,.kontakt-vei,.skjema-kort,.priskort,.prisrad,.kartboks,.kalkulator{box-shadow:0 6px 22px rgba(0,0,0,.34)}
  .fordeler{box-shadow:0 16px 44px rgba(0,0,0,.45)}
  .bilde-ramme{box-shadow:0 10px 28px rgba(0,0,0,.4)}

  /* --gronn er fyllgrønn og altfor mørk til å synes som ramme mot svart.
     Rammen rundt det valgte priskortet må derfor bruke tekstgrønnen. */
  .priskort-valgt{border-color:var(--gronn-tekst);box-shadow:0 8px 26px rgba(0,0,0,.45)}
  .omtale-snitt{border-color:rgba(94,214,160,.18)}
  .regnskog-boks{border-color:rgba(94,214,160,.18)}
  .meny-sprak a{border-color:rgba(94,214,160,.32)}
  .valg-rad input:checked + label{color:#0c1412;background:var(--gronn-tekst);border-color:var(--gronn-tekst)}
  /* felt uten tydelig kant forsvinner i den mørke flaten */
  input:not([type="radio"]):not([type="checkbox"]),select,textarea{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);
  }
  .valg-rad label{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
  ::placeholder{color:#7a8a82}
  input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(94,214,160,.20)}

  /* Bildeplassholderen skal ikke lyse opp før bildet er lastet. */
  img{background:var(--sand)}

  /* ----- Glasset i mørkt ----- */
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    /* Samme fargefelt som i lyst tema, men mettet og mørkt, slik at glasset
       fortsatt har noe å bryte lyset i. Feltene er sterkere her enn før:
       alt glasset under henter fargen sin herfra, og er underlaget grått blir
       glasset grått. */
    html{
      background:
        radial-gradient(820px 620px at 10%  4%, rgba(38,150,98,.38), transparent 60%),
        radial-gradient(700px 520px at 92% 16%, rgba(226,158,70,.20), transparent 62%),
        radial-gradient(900px 640px at 76% 52%, rgba(38,150,98,.30), transparent 62%),
        radial-gradient(640px 500px at  6% 72%, rgba(226,158,70,.15), transparent 62%),
        radial-gradient(860px 620px at 54% 96%, rgba(38,150,98,.33), transparent 64%),
        #0c1412;
      background-attachment:fixed;
    }
    section.sand{background:rgba(16,26,23,.5)}

    /* Metningen er skrudd opp på alle glassflatene i mørkt tema. Blur alene
       gir bare en grå tåke; det er saturate som henter fram grønnfargen fra
       feltet bak, og brightness som gjør at flaten løfter seg fra bakgrunnen
       uten at vi maler hvitt oppå. */
    header{
      background:rgba(21,30,27,.68);border-bottom-color:rgba(44,58,52,.85);
      -webkit-backdrop-filter:blur(24px) saturate(210%);
      backdrop-filter:blur(24px) saturate(210%);
    }

    .fordeler{
      background:rgba(21,30,27,.58);
      -webkit-backdrop-filter:blur(26px) saturate(215%) brightness(1.08);
      backdrop-filter:blur(26px) saturate(215%) brightness(1.08);
      border-color:rgba(255,255,255,.11);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(255,255,255,.05),
        0 16px 44px rgba(0,0,0,.5);
    }
    .fordeler > div + div{border-left-color:rgba(255,255,255,.09)}

    .kort,.omtale,.tabellboks,.kontakt-vei,.skjema-kort,.priskort,.prisrad,.kartboks,.kalkulator{
      background:rgba(21,30,27,.52);
      -webkit-backdrop-filter:blur(20px) saturate(210%) brightness(1.06);
      backdrop-filter:blur(20px) saturate(210%) brightness(1.06);
      border-color:rgba(255,255,255,.10);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 22px rgba(0,0,0,.36);
    }
    .kort:hover{
      background:rgba(26,38,33,.64);
      border-color:rgba(94,214,160,.30);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.46);
    }
    /* Må stå etter glassregelen over, ellers vasker den bort rammen som
       peker ut det valgte priskortet. Samme felle som i lyst tema. */
    .priskort-valgt{
      border-color:var(--gronn-tekst);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.45);
    }
    th{background:rgba(24,54,40,.62)}
    tbody tr:hover{background:rgba(94,214,160,.07)}
    th,td{border-bottom-color:rgba(255,255,255,.09)}

    .faktaboks,.omtale-snitt,.regnskog-boks{
      background:rgba(24,54,40,.5);
      -webkit-backdrop-filter:blur(22px) saturate(215%) brightness(1.06);
      backdrop-filter:blur(22px) saturate(215%) brightness(1.06);
      border-color:rgba(94,214,160,.14);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 22px rgba(0,0,0,.36);
    }
    .skog-kort{
      background:linear-gradient(140deg, rgba(26,48,36,.62) 0%, rgba(24,54,40,.5) 100%);
      -webkit-backdrop-filter:blur(22px) saturate(215%) brightness(1.06);
      backdrop-filter:blur(22px) saturate(215%) brightness(1.06);
      border-color:rgba(94,214,160,.14);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 22px rgba(0,0,0,.36);
    }

    .sporsmal{border-top-color:rgba(255,255,255,.13)}
    .sporsmal details{border-bottom-color:rgba(255,255,255,.13)}
    .bilde-ramme{border-color:rgba(255,255,255,.12)}

    #samtykke{
      background:rgba(21,30,27,.82);
      border-color:rgba(255,255,255,.13);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 40px rgba(0,0,0,.6);
    }

    /* ----- Ikonbrikkene i mørkt -----
       Lyset må snus. Hvitt fyll blir en lampe mot svart, så fyllet er nesten
       borte. I stedet er det brightness i backdrop-filter som gjør jobben:
       brikken forsterker fargefeltet som allerede ligger bak siden, i stedet
       for å få malt et lyst lag oppå. Da ser den ut som et stykke glass som
       samler lys, ikke som en grå firkant.

       Skyggene er delt i to: --ikon-innskygge er selve glasset og er lik i
       ro og ved peking, mens den ytre skyggen byttes på hover. Slipper å
       skrive hele stabelen to ganger og få dem til å gli fra hverandre.
       Må stå her, etter box-shadow-regelen lenger oppe i det mørke temaet. */
    .kort-ikon,.fordeler .ikon,.kontakt-vei .ikon{
      --ikon-innskygge:
        inset 0 1px 0 rgba(255,255,255,.40),          /* lyskant på toppen */
        inset 3px 0 9px -6px rgba(255,255,255,.28),   /* lys inn fra venstre */
        inset 0 -1px 0 rgba(255,255,255,.08),         /* svak lyskant i bunnen */
        inset 0 -10px 18px -10px rgba(0,0,0,.85),     /* tykkelsen */
        inset 0 0 0 1px rgba(94,214,160,.12);         /* grønt omriss innenfor kanten */
      background:
        linear-gradient(152deg,
          rgba(255,255,255,.13) 0%,
          rgba(255,255,255,.03) 44%,
          rgba(94,214,160,.18) 100%);
      -webkit-backdrop-filter:blur(14px) saturate(230%) brightness(1.5);
      backdrop-filter:blur(14px) saturate(230%) brightness(1.5);
      border-color:rgba(255,255,255,.17);
      box-shadow:var(--ikon-innskygge), 0 6px 18px rgba(0,0,0,.5);
    }
    /* Skjæret må tone inn, ikke slå på. Hver av de tre beholder sin egen
       fart på selve vippingen – fordelsikonet spretter fortere enn de andre,
       og det skal det fortsette å gjøre. */
    .kort-ikon{transition:transform .34s cubic-bezier(.22,.61,.36,1),
                          box-shadow .3s ease, border-color .3s ease}
    .fordeler .ikon{transition:transform .22s cubic-bezier(.34,1.32,.64,1),
                               box-shadow .3s ease, border-color .3s ease}
    .kontakt-vei .ikon{transition:transform .34s cubic-bezier(.34,1.32,.64,1),
                                  box-shadow .3s ease, border-color .3s ease}
    .kort:hover .kort-ikon,
    .fordeler > div:hover .ikon,
    .kontakt-vei:hover .ikon{
      border-color:rgba(94,214,160,.38);
      box-shadow:var(--ikon-innskygge),
                 0 8px 22px rgba(0,0,0,.55),
                 0 0 24px -4px rgba(94,214,160,.45);  /* grønt skjær rundt brikka */
    }
    .kort-ikon::before,.fordeler .ikon::before,.kontakt-vei .ikon::before{
      background:
        radial-gradient(105% 72% at 24% 2%, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        radial-gradient(84% 62% at 86% 108%, rgba(94,214,160,.26), rgba(94,214,160,0) 60%),
        radial-gradient(130% 92% at 50% 132%, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
    }
    .kort-ikon::after,.fordeler .ikon::after,.kontakt-vei .ikon::after{
      background:linear-gradient(90deg,
        rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    }
    /* Den hvite kanten under symbolet er til for lys flate og ville bare
       skitne til strekene her. Her får symbolet i stedet et svakt skjær i
       sin egen farge, slik at det ser ut til å ligge og lyse i glasset. */
    .kort-ikon svg,.fordeler .ikon svg,.kontakt-vei .ikon svg{
      filter:drop-shadow(0 0 6px rgba(94,214,160,.30));
    }

    .regnskog-ikon{
      background:linear-gradient(152deg,
        rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 44%, rgba(94,214,160,.18) 100%);
      -webkit-backdrop-filter:blur(14px) saturate(230%) brightness(1.5);
      backdrop-filter:blur(14px) saturate(230%) brightness(1.5);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(255,255,255,.08),
        inset 0 -10px 18px -10px rgba(0,0,0,.8),
        0 0 0 3px rgba(21,30,27,.7),
        0 0 0 4px rgba(94,214,160,.24),
        0 3px 12px rgba(0,0,0,.5);
    }
    .regnskog-ikon::before{
      background:
        radial-gradient(105% 72% at 24% 2%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
        radial-gradient(84% 62% at 86% 108%, rgba(94,214,160,.24), rgba(94,214,160,0) 60%);
    }
    .regnskog-ikon svg{filter:drop-shadow(0 0 6px rgba(94,214,160,.30))}

    @media(max-width:700px){
      .ring-mobil{background:rgba(33,132,85,.9)}
    }
    @media(max-width:780px){
      .har-menyknapp #hovedmeny{
        background:rgba(19,28,25,.95);
        border-bottom-color:rgba(255,255,255,.10);
        box-shadow:0 14px 30px rgba(0,0,0,.5);
      }
    }
  }
}

/* utskrift: spar blekk, ta bort pynt */
@media print{
  .topbar,.meny-knapp,nav,.ring-mobil,#samtykke,.band,.hopp-lenke{display:none !important}
  .hero,.side-topp,.merke-blokk{background:#fff !important;color:#000 !important}
  /* .liten-i har egen fyllfarge, og !important på h1 arves ikke ned dit. */
  .hero h1,.side-topp h1,.hero h1 .liten-i{color:#000 !important;-webkit-text-fill-color:#000 !important;filter:none !important}
  .hero p.ingress,.side-topp p,.merke-blokk p{color:#333 !important;text-shadow:none !important}
  .kort,.omtale,.faktaboks{break-inside:avoid;box-shadow:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#666}
  body{padding-bottom:0}
}