/* =====================================================================
   NORDVO · UTKAST 3 · LYST OG MIDTSTILT
   ---------------------------------------------------------------------
   Oppsettet: lys, varm grå flate,
   store og tynne titler med ett kursivt grått ord, store tynne tall,
   små versale etiketter med streker på sidene, avrundede knapper og
   mørke kort med levende strektegninger. Alt er mer midtstilt.

   Skrift: Inter (med optisk størrelse), lokalt i skrift/.
   NORDVO-navnet øverst står i Cormorant Garamond, som på dagens side.

   Alle farger og størrelser står i :root. Mørke flater (kortene,
   om-oss-bandet) bruker klassen .mork, som snur fargene der inne.
   ===================================================================== */

/* ---------- Skrifter (lokale filer i skrift/) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../skrift/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../skrift/inter-kursiv.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../skrift/cormorant.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* Farger: lys og varm grå, nesten svart tekst */
  --natt: #F5F5F3;           /* bakgrunnen (navnet er arvet fra den mørke utgaven) */
  --flate: #FFFFFF;          /* kort og skjema som løftes litt */
  --flate-2: #EDEDEA;        /* rolige felt, chips */
  --tekst: #09090B;          /* 18:1 på bakgrunnen */
  --svak: #52525B;           /* 7:1 */
  --svakere: #6A6A73;        /* 4,9:1 */
  --hvit: #000000;           /* «sterkest»: brukes ved pek */
  --morkt: #FAFAF9;          /* tekst på mørke knapper */
  --aksent: #123A72;         /* Nordvos dype blå: fokus og små markeringer */
  --strek: rgba(9, 9, 11, .09);
  --strek-sterk: rgba(9, 9, 11, .16);
  --feltkant: #8A8A92;       /* skjemafelt, 3:1 mot flaten */
  --fokus: #123A72;
  --feil: #B42318;
  /* Eldre navn som undersidene fortsatt bruker */
  --flate-3: #E6E6E2;
  --is: #09090B;
  --is-lys: #000000;
  --glans: linear-gradient(var(--tekst), var(--tekst));

  /* Skrift */
  --skrift: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --skrift-display: var(--skrift);
  --skrift-tekst: var(--skrift);
  --skrift-mono: var(--skrift);
  --skrift-merke: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;

  /* Skala */
  --t-mega: clamp(2.9rem, 1.6rem + 4.9vw, 5.4rem);
  --t-h1-side: clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem);
  --t-h2: clamp(2.1rem, 1.55rem + 2vw, 3.25rem);
  --t-h3: 1.25rem;
  --t-ingress: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-brod: 1rem;
  --t-liten: .875rem;
  --t-etikett: .75rem;
  --t-tall: clamp(3.4rem, 2.6rem + 3vw, 4.75rem);

  /* Rom og form */
  --bredde: 1200px;
  --kantluft: clamp(20px, 4.5vw, 56px);
  --seksjon: clamp(5rem, 3.4rem + 4.4vw, 8.5rem);
  --topp-hoyde: 76px;
  --radius: 14px;
  --radius-liten: 10px;
  --pille: 999px;
  --myk: cubic-bezier(.19, 1, .22, 1);
  color-scheme: light;
}

/* Mørke flater: samme navn, snudde verdier */
.mork {
  --natt: #09090B;
  --flate: #18181B;
  --flate-2: #1F1F23;
  --tekst: #F5F5F3;
  --svak: #A1A1AA;
  --svakere: #8E8E97;
  --hvit: #FFFFFF;
  --morkt: #09090B;
  --aksent: #4FC3F7;
  --strek: rgba(245, 245, 243, .10);
  --strek-sterk: rgba(245, 245, 243, .2);
  --feltkant: rgba(245, 245, 243, .45);
  --fokus: #4FC3F7;
  --feil: #F2A3A3;
  color-scheme: dark;
  background: var(--natt); color: var(--tekst);
}

/* ---------- Grunnstiler ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topp-hoyde) + 20px);
  background: var(--natt);
}
body {
  margin: 0; background: var(--natt); color: var(--tekst);
  font-family: var(--skrift); font-size: var(--t-brod); line-height: 1.6; font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--tekst); text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--strek-sterk); }
a:hover { color: var(--hvit); text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
::selection { background: var(--tekst); color: var(--morkt); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

.hopp { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--tekst); color: var(--morkt); padding: .7rem 1.1rem; border-radius: var(--pille); text-decoration: none; font-weight: 500; }
.hopp:focus, .hopp:hover { top: 12px; color: var(--morkt); }
.kunlyd { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Rester fra eldre utgaver som undersidene kan ha igjen: vises ikke */
.linjer, .rutenett-bak, .krom, .hjerne { display: none !important; }

/* ---------- Ramme og typografi ---------- */
.ramme { width: 100%; max-width: calc(var(--bredde) + var(--kantluft) * 2); margin-inline: auto; padding-inline: var(--kantluft); }
.seksjon { position: relative; padding-block: var(--seksjon); }
.strek-topp { border-top: 1px solid var(--strek); }

/* Titler: store og tynne, tett sperring. Ett ord i kursiv grått (<em>). */
.display { font-family: var(--skrift-display); font-weight: 300; letter-spacing: -.04em; line-height: 1.02; color: var(--tekst); }
.h2 { font-family: var(--skrift-display); font-size: var(--t-h2); font-weight: 300; line-height: 1.06; letter-spacing: -.035em; color: var(--tekst); }
.h3 { font-family: var(--skrift); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.display em, .h2 em, .h3 em { font-style: italic; color: var(--svak); }
.ingress { font-size: var(--t-ingress); line-height: 1.6; color: var(--svak); max-width: 36em; }
.svak { color: var(--svak); }
.fig { font-size: .875rem; color: var(--svakere); }
.fig b { font-weight: 500; color: var(--svak); }

/* Små versale etiketter med en strek på hver side («—— TJENESTER ——») */
.etikett {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: var(--t-etikett); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  color: var(--svak);
}
.etikett::before, .etikett-midt::after { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .55; }
.etikett-ren::before { content: none; }

/* Hodet på en seksjon: midtstilt etikett, tittel og ingress */
.seksjonshode { display: grid; gap: 1.15rem; max-width: 46rem; margin-bottom: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); }
.seksjonshode.midt { margin-inline: auto; justify-items: center; text-align: center; }
.seksjonshode.midt .ingress { margin-inline: auto; }

.prosa { max-width: 40em; display: grid; gap: 1.1em; color: var(--svak); }
.prosa strong { color: var(--tekst); font-weight: 600; }
.prosa h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; color: var(--tekst); margin-top: 1.2em; }
.prosa h3 { font-size: 1.125rem; font-weight: 600; color: var(--tekst); margin-top: .6em; }
.prosa ul, .prosa ol { padding-left: 1.2em; display: grid; gap: .45em; }
.prosa li::marker { color: var(--svakere); }

/* Store, tynne tall med en liten grå enhet */
.tall { display: inline-flex; align-items: baseline; gap: .12em; font-size: var(--t-tall); font-weight: 300; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums lining-nums; color: var(--tekst); white-space: nowrap; }
.tall-for, .tall-etter { font-size: .42em; font-weight: 300; letter-spacing: -.02em; color: var(--svak); }
.tall-for { margin-right: .1em; }
.tall-etter { margin-left: .12em; }

/* ---------- Knapper og lenker ----------
   Avrundede «piller»: mørk hovedknapp, lys grå variant. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: .7rem 1.35rem; border: 1px solid var(--tekst); border-radius: var(--pille);
  background: var(--tekst); color: var(--morkt);
  font-family: var(--skrift); font-size: .9375rem; font-weight: 500; line-height: 1.1; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .4s var(--myk);
}
.knapp:hover { background: var(--hvit); border-color: var(--hvit); color: var(--morkt); }
.knapp-lys, .knapp-strek, .knapp-mork { background: rgba(9, 9, 11, .06); border-color: transparent; color: var(--tekst); }
.knapp-lys:hover, .knapp-strek:hover, .knapp-mork:hover { background: rgba(9, 9, 11, .11); border-color: transparent; color: var(--tekst); }
.mork .knapp-lys, .mork .knapp-strek, .mork .knapp-mork { background: rgba(245, 245, 243, .1); }
.mork .knapp-lys:hover, .mork .knapp-strek:hover, .mork .knapp-mork:hover { background: rgba(245, 245, 243, .18); }
.knapp .pil { transition: transform .5s var(--myk); }
.knapp:hover .pil-hoyre { transform: translateX(3px); }
.knapp:hover .pil-ned { transform: translateY(2px); }
.knapperad { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.midt .knapperad, .knapperad.midt { justify-content: center; }
.tekstlenke { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--strek-sterk); color: var(--tekst); }
.tekstlenke:hover { text-decoration-color: currentColor; }
/* Piler som tegnede ikoner */
.pil { display: inline-block; width: 1em; height: 1em; flex: none; }
svg.pil { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Toppen ----------
   Menyen til venstre, NORDVO midt på, søk og kontakt til høyre. */
.topp { position: sticky; top: 0; z-index: 50; background: var(--natt); border-bottom: 1px solid transparent; transition: border-color .3s; }
.topp.rullet, .topp:has(.mobilmeny:not([hidden])) { border-bottom-color: var(--strek); }
.topp-indre { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; min-height: var(--topp-hoyde); }
.merke {
  grid-column: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: var(--skrift-merke); font-weight: 500; font-size: 1.75rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst); text-decoration: none; margin-right: -.2em; /* sperringen etter siste bokstav */
}
.merke:hover { color: var(--tekst); }
/* N-merket foran navnet (hovedlogoen i logopakken). Størrelsen følger skriften, så den passer i toppen, på mobil og i bunnen */
.merke-n { width: 1.2em; height: 1.2em; margin-right: .52em; flex: none; }
.hovedmeny { grid-column: 1; justify-self: start; }
.hovedmeny ul { list-style: none; display: flex; gap: .15rem; margin-left: -.75rem; }
.hovedmeny a, .sok-knapp {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .35rem .75rem;
  color: var(--tekst); text-decoration: none; font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; transition: color .2s;
}
.hovedmeny a:hover { color: var(--svak); }
.hovedmeny a[aria-current] { text-decoration: underline; text-decoration-color: var(--tekst); text-underline-offset: .5em; }
/* «Tjenester»-knappen ser ut som de andre menylenkene */
.meny-utvid {
  display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding: .35rem .75rem;
  border: 0; background: none; cursor: pointer; color: var(--tekst); font-size: .9375rem; font-weight: 500; letter-spacing: -.005em;
}
.meny-utvid:hover { color: var(--svak); }
.meny-utvid .vinkel { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--myk); }
.meny-utvid[aria-expanded="true"] .vinkel { transform: rotate(180deg); }
.har-meny:has(a[aria-current]) > .meny-utvid { text-decoration: underline; text-decoration-color: var(--tekst); text-underline-offset: .5em; }

/* Nedtrekksmenyen: et panel over hele bredden rett under toppen */
.nedtrekk { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--natt); border-bottom: 1px solid var(--strek); box-shadow: 0 30px 60px -40px rgba(9, 9, 11, .35); }
.nedtrekk:not([hidden]) { animation: nedtrekk-inn .3s var(--myk); }
@keyframes nedtrekk-inn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Resten av siden dempes litt mens menyen er åpen */
.nedtrekk::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(245, 245, 243, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.nedtrekk > .ramme { padding-block: 1.75rem 2.25rem; }
.nedtrekk-tittel { margin: 0 0 1rem 1.25rem; font-size: .875rem; color: var(--svak); }
.hovedmeny .nedtrekk-liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1.5rem; margin: 0 !important; }
.nedtrekk-liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; padding: 1.2rem 1.25rem 1.35rem;
  border-radius: var(--radius); color: var(--tekst); text-decoration: none; transition: background-color .25s;
}
.nedtrekk-liste a:hover, .nedtrekk-liste a:focus-visible, .nedtrekk-liste a[aria-current="page"] { background: var(--flate-2); color: var(--tekst); }
.nedtrekk-liste a:focus-visible { outline-offset: -2px; }
.nedtrekk-liste a[aria-current] { text-decoration: none; }
.nt-navn { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.nt-tekst { grid-column: 1; font-size: .875rem; line-height: 1.5; color: var(--svak); max-width: 30em; }
.nedtrekk-liste .pil { grid-column: 2; grid-row: 1; align-self: center; width: 14px; height: 14px; color: var(--svak); transition: transform .4s var(--myk), color .25s; }
.nedtrekk-liste a:hover .pil { transform: translate(2px, -2px); color: var(--tekst); }

.topp-handlinger { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .5rem; }
.sok-knapp { border: 0; border-radius: var(--pille); background: rgba(9, 9, 11, .05); cursor: pointer; padding-inline: .9rem 1rem; min-height: 40px; }
.sok-knapp:hover, .sok-knapp[aria-current] { background: rgba(9, 9, 11, .1); }
.topp .knapp[aria-current] { box-shadow: 0 0 0 2px var(--natt), 0 0 0 3.5px var(--tekst); }
.sok-knapp svg { width: 16px; height: 16px; flex: none; }
.topp .knapp { min-height: 40px; padding: .5rem 1.15rem; font-size: .875rem; }
.meny-knapp {
  display: none; align-items: center; justify-content: center; gap: .5em; min-height: 44px; min-width: 44px; padding: .4rem .9rem;
  border: 0; border-radius: var(--pille); background: rgba(9, 9, 11, .05); cursor: pointer; font-size: .875rem; font-weight: 500;
}
.meny-knapp svg { width: 17px; height: 17px; flex: none; }
.mobilmeny { border-top: 1px solid var(--strek); max-height: calc(100vh - var(--topp-hoyde)); overflow-y: auto; background: var(--natt); }
.mobilmeny ul { list-style: none; display: grid; padding-block: .5rem 1.6rem; }
.mobilmeny a {
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
  font-size: 1.9rem; font-weight: 300; letter-spacing: -.035em; line-height: 1.1;
  color: var(--tekst); text-decoration: none; border-bottom: 1px solid var(--strek);
}
.mobilmeny a .pil { width: 20px; height: 20px; color: var(--svakere); }
/* Tjenestene under «Tjenester» i mobilmenyen */
.mobil-under { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; padding: .75rem 0 1rem !important; border-bottom: 1px solid var(--strek); }
.mobil-under a { min-height: 44px; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: var(--svak); border-bottom: 0; }
.mobil-under a[aria-current="page"] { color: var(--tekst); text-decoration: underline; }
@media (max-width: 960px) {
  :root { --topp-hoyde: 64px; }
  .hovedmeny, .topp-handlinger > .knapp { display: none; }
  .meny-knapp { display: inline-flex; }
  /* Søk og meny står på hver sin side, så NORDVO alltid har luft rundt seg */
  .topp-handlinger { display: contents; }
  .merke { grid-row: 1; }
  .sok-knapp { grid-column: 1; grid-row: 1; justify-self: start; }
  .meny-knapp { grid-column: 3; grid-row: 1; justify-self: end; }
  .sok-knapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sok-knapp { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .topp-indre { gap: .5rem; }
  .merke { font-size: 1.5rem; letter-spacing: .18em; margin-right: -.18em; }
}
@media (min-width: 961px) { .mobilmeny { display: none !important; } }
@media (max-width: 420px) {
  .meny-knapp { width: 44px; padding: 0; }
  .meny-knapp .meny-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Søk (dialog over siden) ---------- */
.sok-dialog {
  width: min(680px, calc(100% - 32px)); max-height: min(78vh, 720px); margin: 10vh auto auto; padding: 0;
  border: 1px solid var(--strek); border-radius: var(--radius); color: var(--tekst); background: var(--flate);
  box-shadow: 0 30px 80px -30px rgba(9, 9, 11, .35);
}
.sok-dialog::backdrop { background: rgba(9, 9, 11, .35); }
.sok-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.sok-felt { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--strek); }
.sok-felt svg { width: 18px; height: 18px; color: var(--svak); flex: none; }
.sok-felt input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; font: inherit; font-size: 1.15rem; color: var(--tekst); }
.sok-felt input:focus { outline: none; }
.sok-felt:focus-within { box-shadow: inset 0 -2px 0 var(--tekst); }
.sok-felt input::placeholder { color: var(--svakere); }
.sok-lukk { flex: none; min-height: 40px; padding: .3rem 1rem; border: 0; border-radius: var(--pille); background: rgba(9, 9, 11, .06); cursor: pointer; font-size: .8125rem; font-weight: 500; }
.sok-lukk:hover { background: rgba(9, 9, 11, .11); }
.sok-resultater { list-style: none; overflow-y: auto; display: grid; }
.sok-resultater li + li { border-top: 1px solid var(--strek); }
.sok-resultater a { display: grid; gap: .15rem; padding: .9rem 1.1rem; text-decoration: none; color: var(--tekst); }
.sok-resultater a:hover, .sok-resultater a:focus-visible { background: rgba(9, 9, 11, .04); }
.sok-resultater a:focus-visible { outline-offset: -2px; }
.sok-resultater .sok-type { font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--svakere); }
.sok-resultater .sok-tittel { font-size: 1.05rem; font-weight: 500; }
.sok-resultater .sok-utdrag { font-size: var(--t-liten); color: var(--svak); }
.sok-resultater mark { background: rgba(18, 58, 114, .14); color: inherit; padding: 0 .1em; border-radius: 3px; }
.sok-tom { padding: 1.1rem 1.1rem 1.2rem; color: var(--svak); }
.sok-forslag { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.1rem 1.2rem; }
.sok-forslag button { min-height: 40px; padding: .3rem 1rem; border: 1px solid var(--strek-sterk); border-radius: var(--pille); background: transparent; cursor: pointer; font-size: .875rem; }
.sok-forslag button:hover { border-color: var(--tekst); }

/* ---------- Ofte stilte spørsmål ---------- */
.sporsmal { display: grid; border-top: 1px solid var(--strek); }
.sporsmal details { border-bottom: 1px solid var(--strek); }
.sporsmal summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 68px; padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.4;
}
.sporsmal summary::-webkit-details-marker { display: none; }
.sporsmal summary::after {
  content: ""; flex: none; width: 13px; height: 13px; transition: transform .4s var(--myk);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.sporsmal details[open] summary::after { transform: rotate(45deg); }
.sporsmal summary:hover { color: var(--svak); }
.sporsmal .svar { padding: 0 0 1.4rem; max-width: 44em; color: var(--svak); display: grid; gap: .8em; }

/* ---------- Skjema ---------- */
.skjema { display: grid; gap: 1.15rem; }
.skjema .rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.felt { display: grid; gap: .45rem; align-content: start; }
.felt label, .felt legend { font-size: .875rem; font-weight: 500; color: var(--tekst); }
.felt .hjelp { font-size: .8125rem; color: var(--svak); }
.felt input, .felt textarea, .felt select {
  width: 100%; min-height: 50px; padding: .75rem .95rem; border: 1px solid var(--feltkant); border-radius: var(--radius-liten);
  background: var(--flate); font: inherit; color: var(--tekst); transition: border-color .2s, box-shadow .2s;
}
.felt select option { background: var(--flate); color: var(--tekst); }
.felt textarea { min-height: 130px; resize: vertical; }
.felt input, .felt textarea, .felt select { scroll-margin-top: calc(var(--topp-hoyde) + 2.5rem); }
.felt input:hover, .felt textarea:hover { border-color: var(--svak); }
.felt input:focus, .felt textarea:focus, .felt select:focus { outline: 2px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
.felt [aria-invalid="true"] { border-color: var(--feil); }
.felt-feil { font-size: .8125rem; color: var(--feil); }
.valg { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.valg legend { margin-bottom: .6rem; }
.valg label {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.1rem;
  border: 1px solid var(--strek-sterk); border-radius: var(--pille); cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--tekst);
}
.valg label:hover { border-color: var(--tekst); }
.valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.valg label:has(input:checked) { background: var(--tekst); border-color: var(--tekst); color: var(--morkt); }
.valg label:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 3px; }
.skjema-kvittering { padding: 1rem 1.1rem; border: 1px solid var(--strek-sterk); border-radius: var(--radius-liten); color: var(--tekst); }
@media (max-width: 640px) { .skjema .rad { grid-template-columns: 1fr; } }

/* ---------- Kontakt nederst på hver side ----------
   Midtstilt hode, så e-post/telefon til venstre og skjemaet i et hvitt
   kort til høyre. */
.kontakt-seksjon { padding-block: var(--seksjon); }
.kontakt-seksjon .seksjonshode { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.kontakt-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, .5rem + 2vw, 2rem); align-items: stretch; }
.kontakt-tekst { display: grid; gap: 1.2rem; align-content: start; padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); border-radius: var(--radius); }
.kontakt-tekst > p:not(.lovnad) { color: var(--svak); max-width: 30em; }
.direkte { display: grid; gap: .25rem; }
.direkte a {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 48px; width: fit-content; max-width: 100%;
  color: var(--tekst); text-decoration: none; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.direkte a:hover { color: var(--hvit); text-decoration: underline; text-decoration-thickness: 1px; }
.direkte svg { width: 20px; height: 20px; color: var(--svak); flex: none; }
.lovnad { color: var(--svak); font-size: var(--t-liten); }
.kontakt-kort { padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); }
.kontakt-kort .h3 { margin-bottom: .25rem; }
.kontakt-kort .skjema { margin-top: 1.4rem; }
.kontakt-kort .knapp { justify-self: start; }
@media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; } }

/* ---------- Bunnteksten ---------- */
.bunn { border-top: 1px solid var(--strek); color: var(--svak); padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); font-size: .9375rem; }
.bunn-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 3rem; }
.bunn .merke { grid-column: auto; justify-content: flex-start; min-height: 0; font-size: 1.6rem; }
.bunn-merke { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.bunn-merke p { max-width: 24em; }
.bunn-tittel { font-size: var(--t-etikett); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst); margin-bottom: .8rem; }
.bunn ul { list-style: none; display: grid; }
.bunn a { color: var(--svak); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; min-height: 36px; }
.bunn a:hover { color: var(--tekst); text-decoration: underline; }
.bunn address { font-style: normal; display: grid; }
.bunn address span { padding-top: .5rem; }
.bunn .sosiale { display: flex; flex-wrap: wrap; gap: .5rem; }
.sosiale a { width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: rgba(9, 9, 11, .05); color: var(--tekst); }
.sosiale a:hover { background: rgba(9, 9, 11, .1); text-decoration: none; }
.sosiale svg { width: 17px; height: 17px; }
.bunn-linje { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1.4rem 2rem; padding-right: 96px; border-top: 1px solid var(--strek); font-size: .8125rem; color: var(--svakere); }
.bunn-linje ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
/* Linjen om personvern ved skjemaene (forsiden og kontaktsiden) */
.kk-personvern { font-size: .875rem; color: var(--svak); max-width: 24em; }
.kk-personvern a { color: var(--tekst); }
/* Selskapsopplysningene brekker mellom delene, ikke midt i dem */
.bunn-linje .selskap span { white-space: nowrap; }
@media (max-width: 420px) { .bunn-linje .selskap span { white-space: normal; } }
@media (max-width: 900px) { .bunn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bunn-merke { grid-column: 1 / -1; } }
@media (max-width: 520px) { .bunn-grid { grid-template-columns: 1fr; gap: 2rem; } .bunn-linje { padding-right: 0; padding-bottom: 80px; } }

/* ---------- Felles småbiter ---------- */
/* Ekte skjermbilde i en avrundet ramme */
.bilderamme { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--strek); background: var(--flate-2); }
.bilderamme img { width: 100%; }
/* Skjermbilde av en nettside i en enkel nettleserramme (brukes på undersidene) */
.nettleser { border: 1px solid var(--strek); border-radius: var(--radius); background: var(--flate); overflow: hidden; }
.nettleser-topp { display: flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-bottom: 1px solid var(--strek); background: var(--flate); }
.nettleser-topp > span:not(.nettleser-adresse) { width: 9px; height: 9px; border-radius: 50%; background: #DADAD6; }
.nettleser-adresse { margin-left: 10px; font-size: .75rem; color: var(--svak); }
.nettleser img { width: 100%; }
.hake-liste { list-style: none; display: grid; gap: .6rem; }
.hake-liste li { position: relative; padding-left: 1.6rem; color: var(--tekst); }
.hake-liste li::before { content: ""; position: absolute; left: .15rem; top: .5em; width: .7rem; height: .38rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
/* Små «brikker» (bransjer, merkelapper) */
.brikker { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.brikker li { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .95rem; border: 1px solid var(--strek-sterk); border-radius: var(--pille); font-size: .875rem; color: var(--tekst); background: transparent; }
.merkelapp { display: inline-flex; align-items: center; gap: .55rem; min-height: 32px; padding: .3rem .9rem; border: 1px solid var(--strek-sterk); border-radius: var(--pille); font-size: var(--t-etikett); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--svak); }
.prikk { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
@media (max-width: 480px) {
  /* Brekker den over to linjer, står den midtstilt uten prikk */
  .merkelapp { font-size: .625rem; letter-spacing: .08em; padding-inline: .9rem; border-radius: 16px; justify-content: center; text-align: center; line-height: 1.5; }
  .merkelapp .prikk { display: none; }
}
/* Eldre klasser: nå en lys flate med tynn kant */
.glass, .vindu { background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); }
.bindestrek { margin: 0; }

/* ---------- Demokort (forsiden og 3D-siden) ----------
   Skjermbilde i en avrundet ramme, liten etikett, navn og én linje.
   To og to; ett og ett på mobil. Et kort kan være en lenke eller en
   knapp (chatboten åpnes med data-apne-chat). */
.demo-kort { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1.4rem + 1.8vw, 3rem) clamp(16px, 1rem + 1vw, 28px); }
.demo-kort > li { display: grid; min-width: 0; }
.demo-kort a, .demo-kort button { display: grid; align-content: start; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--tekst); text-decoration: none; cursor: pointer; }
.demo-kort .bilderamme { aspect-ratio: 16 / 10; margin-bottom: .6rem; }
.demo-kort .bilderamme img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--myk); }
.demo-kort :is(a, button):hover .bilderamme img { transform: scale(1.03); }
.demo-kort :is(a, button):focus-visible { outline: 2px solid var(--fokus); outline-offset: 6px; border-radius: var(--radius); }
.demo-merke { font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--svak); }
.demo-navn { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.demo-navn .pil-ut { width: .7em; height: .7em; margin-left: .15em; vertical-align: .02em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-kort :is(a, button):hover .demo-navn { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.demo-tekst { color: var(--svak); font-size: .9375rem; max-width: 34em; }
@media (max-width: 600px) { .demo-kort { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   CHATBOTEN nede til høyre (js/chat.js). Hjørnet er holdt av til den.
   Rund, mørk knapp; vinduet er et hvitt kort med Nordvo i Cormorant
   øverst, grå bobler fra oss og mørke bobler fra kunden.
   ===================================================================== */
.chat-knapp {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--tekst); color: var(--morkt); cursor: pointer;
  /* Den lyse ringen synes bare over mørke bånd, der knappen ellers ville forsvunnet */
  box-shadow: 0 0 0 1px rgba(245, 245, 243, .28), 0 10px 30px -10px rgba(9, 9, 11, .55);
  transition: transform .4s var(--myk), box-shadow .4s var(--myk);
}
.chat-knapp:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(245, 245, 243, .28), 0 16px 36px -12px rgba(9, 9, 11, .6); }
.chat-knapp:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.chat-knapp svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
/* Mobilmenyen og søket ligger over alt annet; da trengs ikke knappen */
body:has(.mobilmeny:not([hidden])) .chat-knapp, body:has(.sok-dialog[open]) .chat-knapp { display: none; }

.chat-panel {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 68px); z-index: 60;
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100dvh - 120px));
  background: var(--flate); color: var(--tekst); border: 1px solid var(--strek); border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(9, 9, 11, .45), 0 2px 8px -4px rgba(9, 9, 11, .12);
  overflow: hidden; animation: chat-inn .45s var(--myk);
}
.chat-panel[hidden] { display: none; }
@keyframes chat-inn { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.chat-hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .95rem 1.35rem; border-bottom: 1px solid var(--strek); }
.chat-hode-tekst { display: grid; gap: .35rem; min-width: 0; }
.chat-tittel { margin: 0; font-family: var(--skrift-merke); font-weight: 500; font-size: 1.25rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.chat-under { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--svak); }
.chat-under a { color: var(--tekst); text-underline-offset: .2em; }
.chat-lukk { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -.3rem -.25rem 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--tekst); cursor: pointer; }
.chat-lukk:hover { background: var(--flate-2); }
.chat-lukk:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.chat-lukk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.chat-meldinger { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.1rem 1.25rem; }
.chat-meldinger:focus-visible { outline: 2px solid var(--fokus); outline-offset: -4px; }
.chat-melding { max-width: 86%; padding: .7rem .95rem; border-radius: 16px; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-melding.fra-bot { align-self: flex-start; background: var(--natt); border-bottom-left-radius: 6px; }
.chat-melding.fra-bruker { align-self: flex-end; background: var(--tekst); color: var(--morkt); border-bottom-right-radius: 6px; }
.chat-melding a { color: inherit; font-weight: 500; text-underline-offset: .2em; }
.chat-forslag { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }
.chat-forslag button { min-height: 36px; padding: .35rem .9rem; border: 1px solid var(--strek-sterk); border-radius: var(--pille); background: transparent; color: var(--tekst); font: inherit; font-size: .8125rem; cursor: pointer; transition: background .2s, border-color .2s; }
.chat-forslag button:hover { background: var(--natt); border-color: var(--feltkant); }
.chat-forslag button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.prikker { display: inline-flex; gap: 4px; padding-block: .3rem; }
.prikker i { width: 6px; height: 6px; border-radius: 50%; background: var(--svakere); animation: chat-prikk 1.2s infinite ease-in-out; }
.prikker i:nth-child(2) { animation-delay: .15s; }
.prikker i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-prikk { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-skjema { display: flex; align-items: center; gap: .5rem; padding: .75rem .8rem .8rem; border-top: 1px solid var(--strek); }
.chat-felt { flex: 1; min-width: 0; height: 46px; padding: 0 1.1rem; border: 1px solid var(--feltkant); border-radius: var(--pille); background: var(--flate); color: var(--tekst); font: inherit; font-size: 1rem; }
.chat-felt::placeholder { color: var(--svakere); }
.chat-felt:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.chat-send { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--tekst); color: var(--morkt); cursor: pointer; }
.chat-send:hover { background: var(--hvit); }
.chat-send:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.chat-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Mobil: vinduet blir et ark nederst, og knappen viker mens det er åpent */
@media (max-width: 520px) {
  .chat-panel { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; height: min(640px, calc(100dvh - 72px)); }
  .chat.apen .chat-knapp { display: none; }
}
@media print { .chat { display: none; } }

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}