/* Felles stil for alle sider på origo-tech.no. Sidene laster i tillegg sin egen fil (index.css, priser.css, dpp-utrulling.css). */
:root{
  --marine:#1D2E3C;
  --natt:#12202B;
  --mint:#43B397;
  --dypmint:#1F7A63;
  --skum:#E8F5F0;
  --papir:#F7F9F9;
  --staal:#64757F;
  --linje:#DCE4E6;
  --maks:1120px;
  --display:"Outfit",system-ui,-apple-system,sans-serif;
  --brod:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --logofont:"Quicksand","Outfit",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papir);color:var(--marine);
  font-family:var(--brod);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maks);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(25px,3.4vw,32px);line-height:1.22}
h3{font-size:18px;line-height:1.35;margin-bottom:.35em}
p{margin:0 0 1em;max-width:66ch}
.lead{font-size:19px;line-height:1.65;max-width:60ch}
.dempet{color:var(--staal)}
/* Stål (4,27:1) faller under AA-kravet på skum-bakgrunn — mørkere variant der (4,94:1). */
section.skum .dempet{color:#5A6B75}
.hopp{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--marine);color:#fff;padding:12px 20px;border-radius:0 0 4px 0;
  font-family:var(--display);font-weight:500;text-decoration:none;
}
.hopp:focus{left:0}
.mono{font-family:var(--mono);font-size:13px}
a{color:var(--dypmint)}
::selection{background:var(--mint);color:var(--natt)}
:focus-visible{outline:2px solid var(--dypmint);outline-offset:3px}
/* ---------- Pikselmarkør ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.eyebrow .pix{display:grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:3px;flex:0 0 auto}
.eyebrow .pix i{background:var(--marine);display:block}
.eyebrow .pix i:last-child{background:var(--mint)}
.eyebrow span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--staal)}
/* ---------- Knapper ---------- */
.knapp{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:500;font-size:16px;line-height:1;
  padding:15px 26px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.knapp.mint{background:var(--mint);color:var(--natt)}
.knapp.mint:hover{background:#3AA68B}
.knapp.omriss{border-color:var(--marine);color:var(--marine);background:transparent}
.knapp.omriss:hover{background:var(--marine);color:#fff}
.knapp.lys-omriss{border-color:#4A6070;color:#fff;background:transparent}
.knapp.lys-omriss:hover{border-color:#fff}
.lenke{font-weight:500;text-decoration:none;border-bottom:1px solid #A9DFCF;padding-bottom:2px}
.lenke:hover{border-color:var(--dypmint)}
/* ---------- Topplinje ---------- */
.topp{
  position:sticky;top:0;z-index:50;
  background:rgba(247,249,249,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linje);
}
.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.lokk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--marine)}
.lokk .navn{font-family:var(--logofont);font-weight:300;font-size:23px;line-height:1;letter-spacing:.02em;white-space:nowrap}
.lokk .navn b{font-weight:300;color:var(--mint)}
.toppnav{display:flex;align-items:center;gap:30px}
.toppnav a.punkt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--staal);text-decoration:none;
}
.toppnav a.punkt:hover{color:var(--dypmint)}
.topp .knapp{padding:11px 20px;font-size:14px}
@media(max-width:900px){.toppnav a.punkt{display:none}}
/* Felles meny: på smal skjerm forsvinner punktene, og en menyknapp åpner dem i et panel. */
.toppnav .meny{display:none;position:relative}
.meny summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 11px;border:1px solid var(--linje);background:#fff}
.meny summary::-webkit-details-marker{display:none}
.meny summary span{display:block;height:2px;background:var(--marine);transition:transform .2s ease,opacity .2s ease}
.meny[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.meny[open] summary span:nth-child(2){opacity:0}
.meny[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menypanel{position:absolute;right:0;top:calc(100% + 12px);width:min(300px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--linje);box-shadow:0 18px 40px -20px rgba(18,32,43,.35);
  display:flex;flex-direction:column;padding:8px 0}
.menypanel a{padding:13px 20px;text-decoration:none;color:var(--marine);font-weight:500;font-size:15px}
.menypanel a:hover,.menypanel a[aria-current="page"]{background:var(--skum);color:var(--dypmint)}
.menypanel hr{border:0;border-top:1px solid var(--linje);margin:6px 0}
.toppnav a.punkt[aria-current="page"]{color:var(--dypmint)}
@media(max-width:900px){.toppnav .meny{display:block}.toppnav{gap:12px}}
@media(max-width:600px){.wrap{padding:0 16px}.topp .knapp{padding:10px 14px}.lokk .navn{font-size:21px}}
.hero .bue{
  position:absolute;right:-340px;top:-360px;width:960px;height:960px;
  border:110px solid var(--skum);border-radius:50%;pointer-events:none;
}
.hero .handling{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px}
/* ---------- Seksjoner ---------- */
section{padding:88px 0}
section.hvit{background:#fff;border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)}
section.skum{background:var(--skum)}
section.mork{background:var(--marine);color:#fff}
section.mork h2,section.mork h3{color:#fff}
section.mork p{color:#C6D4DA}
section.mork .eyebrow span{color:#8FA6B0}
section.mork .eyebrow .pix i{background:#fff}
section.mork .eyebrow .pix i:last-child{background:var(--mint)}
section.natt{background:var(--natt);color:#fff}
@media(max-width:720px){section{padding:64px 0}}
/* ---------- Rutenett og kort ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.kort{background:#fff;border:1px solid var(--linje);padding:26px;border-radius:2px}
.kort h3{margin-top:0}
.kort p:last-child{margin-bottom:0}
.kort .ikon{display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:4px;margin-bottom:18px}
.kort .ikon i{background:var(--marine);display:block}
.kort .ikon i:last-child{background:var(--mint)}
section.mork .kort{background:var(--natt);border-color:#2C4051}
section.mork .kort p{color:#AEC0C8}
section.mork .kort .ikon i{background:#fff}
section.mork .kort .ikon i:last-child{background:var(--mint)}
/* ---------- Skann-flyt ---------- */
.flyt{display:flex;align-items:stretch;gap:0;margin-top:44px;flex-wrap:wrap}
.flyt .steg .nr{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--staal);text-transform:uppercase;display:block;margin-bottom:10px}
.flyt .steg h3{margin-bottom:6px}
.flyt .steg p{font-size:14.5px;line-height:1.6;color:var(--staal);margin:0}
.flyt .pil{flex:0 0 auto;display:flex;align-items:center;padding:0 6px}
.flyt .pil svg{width:64px;height:14px;display:block}
/* ---------- Innsiktseksjon ---------- */
.todelt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:900px){.todelt{grid-template-columns:1fr;gap:40px}}
ul.sporsmal{list-style:none;padding:0;margin:0;border-top:1px solid #2C4051}
ul.sporsmal li::before{content:"";position:absolute;left:0;top:24px;width:9px;height:9px;background:var(--mint)}
/* ---------- Sluttseksjon ---------- */
.slutt{text-align:center;padding:104px 0}
.slutt p{margin:0 auto 1em}
.slutt .handling{margin-top:36px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.slutt .merkelinje{display:flex;justify-content:center;margin-bottom:28px}
/* ---------- Bunn ---------- */
footer{background:var(--natt);color:#8FA6B0;padding:48px 0;font-size:13px;border-top:1px solid #22384A}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer .lokk .navn{color:#fff;font-size:19px}
footer a{color:#8FA6B0;text-decoration:none}
footer a:hover{color:#fff}
footer .mono{font-size:11px;letter-spacing:.14em}
/* ---------- Innsynking ved rulling ---------- */
.inn{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.inn.synlig{opacity:1;transform:none}

/* ---------- Språkveksler ----------
   Alltid to valg: landets språk og English. Byggeskriptet (bygg-sprak.mjs) skriver
   lenkene; på engelske sider uten kjent land fyller site.js inn det lokale valget. */
.sprakvalg{display:flex;align-items:center;white-space:nowrap}
.sprakvalg[hidden],.sprakvalg a[hidden]{display:none}
.sprakvalg a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--staal);text-decoration:none}
.sprakvalg a:hover{color:var(--dypmint)}
.sprakvalg a[aria-current]{color:var(--marine);font-weight:500}
.sprakvalg a:not([hidden]) ~ a::before{content:"/";display:inline-block;margin:0 9px;color:#B9C7CC;font-weight:400}
@media(max-width:900px){.toppnav > .sprakvalg{display:none}}
.menypanel .sprakvalg{padding:10px 20px 8px}
.menypanel .sprakvalg a{padding:4px 0;font-size:12px}
.menypanel .sprakvalg a:hover{background:none}

/* ---------- 404 ---------- */
.ikkefunnet{position:relative;overflow:hidden;padding:96px 0 112px}
.ikkefunnet .wrap{position:relative}
.ikkefunnet h1{font-size:clamp(34px,5vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.025em;max-width:20ch;margin-bottom:22px}
.ikkefunnet .handling{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:32px}
@media(max-width:600px){.ikkefunnet{padding:64px 0 80px}}