/* ==========================================================
   NORDVO — felles stilark
   Alle farger og skrifter styres herfra. Endrer du noe under
   ":root", endres det på hele nettsiden.
   ========================================================== */

:root {
  /* --- Blekk: dyp, blåtonet mørke. Ikke helsvart — det blir hardt. --- */
  --blekk:    #050C18;
  --blekk-2:  #0A1526;
  --blekk-3:  #122038;

  /* --- Is: den lyseblå som løfter fram det viktige --- */
  --is:       #4FC3F7;
  --is-lys:   #9AE4FF;
  --is-dyp:   #1B7FB5;

  /* --- Varme: det er disse som gjør flatene innbydende i stedet for
         kalde. Gull brukes på priser og små detaljer, sand på brødtekst. --- */
  --gull:     #D0A868;
  --gull-lys: #E8C68C;

  /* --- Tekst --- */
  --sno:      #FBF9F6;   /* overskrifter — varm nær-hvit, ikke blåhvit */
  --dis:      #D3C9BA;   /* brødtekst — sand, ikke kaldt blågrått */
  --dis-svak: rgba(211, 201, 186, 0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Merk: ingen overflow-x her. Overflow på rotelementet smitter over på
     hele vinduet, og da slutter scroll-hendelsene å fyre — alt som drives
     av scroll ville frosset. Hver seksjon klipper seg selv i stedet. */
}

body {
  margin: 0;
  background: var(--blekk);
  color: var(--sno);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section, footer { max-width: 100vw; overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--is); color: var(--blekk); }

/* ==========================================================
   TYPOGRAFI
   ========================================================== */

/* Den store, lette serifen — det er denne som bærer hele uttrykket */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.display em { font-style: normal; color: var(--is); }

/* Liten versal-etikett over overskriftene */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--is);
  margin: 0;
}

.eyebrow-strek { display: flex; align-items: center; gap: 0.85rem; }
.eyebrow-strek::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--is);
  flex-shrink: 0;
}

/* Tall skal stå i kolonne, ikke danse */
.tall { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.ingress {
  color: var(--dis);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 34rem;
}

/* ==========================================================
   FLATER
   ========================================================== */

.edge {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) { .edge { padding-inline: 3rem; } }

/* Fin-kornet støy. Tar bort det flate «CSS-preget» og gir dybde. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blå lysglød — får elementer til å «sveve» */
.glod {
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
              rgba(79, 195, 247, 0.42) 0%, transparent 70%);
  pointer-events: none;
}

/* Felles perspektiv for 3D-scenene */
.scene { perspective: 1400px; perspective-origin: 50% 45%; }
.layer { transform-style: preserve-3d; will-change: transform, opacity; }

@media (max-width: 767px) { .scene { perspective: 900px; } }

/* ==========================================================
   KNAPPER
   ========================================================== */

.knapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              border-color 0.4s, color 0.4s;
}

.knapp:hover { transform: translateY(-2px); }

.knapp-fyll { background: var(--is); color: var(--blekk); font-weight: 600; }
.knapp-fyll:hover { box-shadow: 0 12px 40px -8px rgba(79, 195, 247, 0.6); }

.knapp-linje { border-color: rgba(211, 201, 186, 0.28); color: var(--sno); }
.knapp-linje:hover { border-color: var(--is); color: var(--is-lys); }

/* ==========================================================
   TOPPMENY
   ========================================================== */

.fremdrift {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--is-dyp), var(--is-lys));
  z-index: 100;
}

.topp {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: 1.15rem 0;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}

/* Menyen er gjennomsiktig over hero, og legger seg først når du scroller */
.topp.festet {
  background: rgba(5, 12, 24, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(211, 201, 186, 0.1);
}

.topp-innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--sno);
  white-space: nowrap;
}

.logo span { color: var(--is); }

.meny { display: flex; align-items: center; gap: 2rem; }

.meny a {
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.75);
  padding: 0.3rem 0;
  position: relative;
  transition: color 0.35s;
}

.meny a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--is);
  transition: width 0.45s var(--ease);
}

.meny a:hover { color: var(--sno); }
.meny a:hover::after, .meny a.aktiv::after { width: 100%; }
.meny a.aktiv { color: var(--sno); }

@media (max-width: 700px) {
  .meny { gap: 1.1rem; }
  .meny a { font-size: 0.68rem; letter-spacing: 0.08em; }
  .logo { font-size: 0.8rem; letter-spacing: 0.22em; }
}

/* Under ~430px er det ikke plass til logo + fire menypunkter med den brede
   sperringen — «Kontakt» ble kuttet av på høyre side. Vi strammer inn
   bokstavavstanden i stedet for å skjule noe. */
@media (max-width: 430px) {
  .edge { padding-inline: 1.1rem; }
  .topp-innhold { gap: 0.7rem; }
  .logo { font-size: 0.72rem; letter-spacing: 0.14em; }
  .meny { gap: 0.78rem; }
  .meny a { font-size: 0.6rem; letter-spacing: 0.03em; }
}

/* ==========================================================
   HERO — fjellandskap i lag
   ========================================================== */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Hvert lag ligger oppå hverandre og flyttes i ulik takt ved scroll.
   Det er forskjellen i fart som skaper dybden. */
.fjell-lag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}

.fjell-lag svg { width: 100%; height: 100%; display: block; }

/* --- Fjellbildet ---
   Renderet er i gråtoner. Det er en fordel: da kan vi farge det selv i
   stedet for å kjempe mot fargene i et ferdig foto. Tre lag oppå
   hverandre gir dybden i lyset — kald blå i skyggene, varm glød der sola
   treffer toppen. Det er kontrasten mellom kaldt og varmt som gjør at et
   landskap føles innbydende og ikke klinisk. */
.fjell-foto-bilde {
  position: absolute;
  inset: -4%;
  background: url("bilder/fjell.png") 38% 46% / cover no-repeat;
  filter: contrast(1.16) brightness(0.6);
}

/* Blåtoningen legger seg bare på fargen, ikke på lysheten, så alle
   detaljene i fjellet overlever. */
.fjell-foto-tone {
  position: absolute;
  inset: -4%;
  background: linear-gradient(180deg, #14314F 0%, #0D2138 52%, #050C18 100%);
  mix-blend-mode: color;
  opacity: 0.92;
}

/* Varm glød bak toppen — det er denne som tar bort kuldefølelsen */
.fjell-foto-varme {
  position: absolute;
  inset: -4%;
  background:
    radial-gradient(ellipse 46% 38% at 56% 42%, rgba(240, 186, 112, 0.58), transparent 70%),
    radial-gradient(ellipse 80% 30% at 52% 66%, rgba(214, 168, 104, 0.30), transparent 74%),
    radial-gradient(ellipse 34% 22% at 30% 30%, rgba(255, 214, 150, 0.22), transparent 72%);
  mix-blend-mode: screen;
}

/* Nærmeste lag: lav tåke som driver raskt forbi og gir nærfelt-dybde */
.hero-take {
  position: absolute;
  inset: auto -10% -14% -10%;
  height: 58%;
  background:
    radial-gradient(ellipse 60% 100% at 22% 100%, rgba(18, 40, 66, 0.85), transparent 70%),
    radial-gradient(ellipse 70% 100% at 78% 100%, rgba(12, 30, 52, 0.9), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(5, 12, 24, 0.92) 78%);
  pointer-events: none;
}

/* Himmelen bakerst */
.hero-himmel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 88%, rgba(27, 127, 181, 0.30), transparent 68%),
    radial-gradient(ellipse 70% 50% at 78% 18%, rgba(79, 195, 247, 0.14), transparent 70%),
    linear-gradient(180deg, #030812 0%, #071227 46%, #0C2039 100%);
}

/* Nordlys-slør som driver langsomt over himmelen */
.nordlys {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  opacity: 0.5;
  background:
    radial-gradient(ellipse 40% 60% at 25% 40%, rgba(79, 195, 247, 0.30), transparent 70%),
    radial-gradient(ellipse 35% 55% at 62% 30%, rgba(154, 228, 255, 0.22), transparent 72%),
    radial-gradient(ellipse 30% 50% at 85% 45%, rgba(27, 127, 181, 0.26), transparent 70%);
  filter: blur(6px);
  animation: nordlys-drift 26s ease-in-out infinite alternate;
}

@keyframes nordlys-drift {
  from { transform: translate3d(-3%, 0, 0) scaleY(1); opacity: 0.4; }
  to   { transform: translate3d(4%, -4%, 0) scaleY(1.14); opacity: 0.62; }
}

/* Stjerner lengst bak */
.stjerner { position: absolute; inset: 0; opacity: 0.55; }

/* Mørkt slør nederst så teksten alltid har kontrast */
.hero-slor {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,12,24,.78) 0%, rgba(5,12,24,.12) 38%, rgba(5,12,24,.82) 100%),
    linear-gradient(90deg, rgba(5,12,24,.9) 0%, rgba(5,12,24,.35) 46%, transparent 72%);
  pointer-events: none;
}

.hero-innhold {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-bottom: 2rem;
}

/* Overskriftslinjene skyves opp bak en maske ved innlasting */
.linje-maske { display: block; overflow: hidden; padding-bottom: 0.08em; }

.linje-maske > span {
  display: block;
  transform: translateY(115%);
}

.js .linje-maske > span { transition: transform 1.1s var(--ease); }
.js .lastet .linje-maske > span { transform: translateY(0); }

/* Uten JavaScript skal teksten bare stå der */
html:not(.js) .linje-maske > span { transform: none; }

.hero h1 {
  font-size: clamp(3rem, 10vw, 7.5rem);
  margin: 0.6rem 0 0;
  color: var(--sno);
}

.hero .ingress { margin-top: 2rem; }
.hero-knapper { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Innhold som tones inn i rekkefølge ved innlasting */
.js .last-inn { opacity: 0; transform: translateY(20px); }
.js .lastet .last-inn {
  opacity: 1; transform: none;
  transition: opacity 0.9s ease var(--vent, 0s), transform 0.9s var(--ease) var(--vent, 0s);
}

/* Scroll-hint nederst */
.scroll-hint {
  position: absolute;
  bottom: 1.9rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.scroll-hint span:first-child {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.5);
}

.scroll-spor {
  position: relative;
  height: 3rem; width: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
}

.scroll-spor i {
  position: absolute;
  inset-inline: 0;
  height: 50%;
  background: var(--is);
  animation: scroll-ned 2s ease-in-out infinite;
}

@keyframes scroll-ned {
  from { transform: translateY(-100%); }
  to   { transform: translateY(200%); }
}

@media (max-width: 767px) { .scroll-hint { display: none; } }

/* ==========================================================
   SEKSJONER
   ========================================================== */

.seksjon { position: relative; padding: 7rem 0; overflow: hidden; }
.seksjon-2 { background: var(--blekk-2); }

@media (min-width: 768px) { .seksjon { padding: 10rem 0; } }

.seksjon h2 {
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  margin: 1.4rem 0 0;
  color: var(--sno);
  max-width: 24ch;
}

.seksjon-topp { max-width: 42rem; margin-bottom: 4rem; }
.seksjon-topp .ingress { margin-top: 1.6rem; }

@media (min-width: 768px) { .seksjon-topp { margin-bottom: 6rem; } }

/* Inntoning når elementet kommer i syne */
.js .frem { opacity: 0; transform: translateY(38px); }
.js .frem.synlig {
  opacity: 1; transform: none;
  transition: opacity 0.85s ease var(--vent, 0s), transform 0.9s var(--ease) var(--vent, 0s);
}

/* ==========================================================
   MANIFEST — ordene tennes ett for ett mens du scroller
   ========================================================== */

/* Manifestet er kort — to linjer. For mye luft rundt gjør at det leses som
   et tomrom i stedet for et pust. */
.manifest { padding: 6rem 0; position: relative; overflow: hidden; }

@media (min-width: 768px) { .manifest { padding: 8.5rem 0; } }

.manifest-glod {
  position: absolute;
  bottom: -50%; left: 50%;
  transform: translateX(-50%);
  height: 60vh; width: 120vw;
  opacity: 0.13;
}

.manifest p.setning {
  font-size: clamp(1.9rem, 5.2vw, 3.9rem);
  line-height: 1.15;
  max-width: 56rem;
  margin: 2.5rem 0 0;
  color: var(--sno);
}

/* Hvert ord starter nesten usynlig og tennes når det er din tur */
.manifest .ord {
  display: inline-block;
  opacity: 0.13;
  transform: translateY(8px);
  transition: opacity 0.1s linear, transform 0.1s linear;
}

/* Uten JS vises hele setningen med en gang */
html:not(.js) .manifest .ord { opacity: 1; transform: none; }

/* ==========================================================
   PROBLEMSTILLING
   ========================================================== */

.problem-rad {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(211, 201, 186, 0.14);
}

.problem-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid rgba(211, 201, 186, 0.14);
  align-items: start;
}

@media (min-width: 768px) {
  .problem-punkt { grid-template-columns: 5rem 1fr 1fr; gap: 3rem; padding: 3rem 0; }
}

.problem-nr {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--is);
  opacity: 0.7;
}

.problem-punkt h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  margin: 0;
  color: var(--sno);
}

.problem-punkt p { margin: 0; color: var(--dis); font-size: 0.95rem; }

@media (max-width: 767px) {
  .problem-punkt p { grid-column: 2; margin-top: 0.7rem; }
}

/* ==========================================================
   TJENESTEVELGER
   ========================================================== */

.velger-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.velger-merke {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.4);
}

@media (max-width: 767px) { .velger-merke { display: none; } }

.velger-oppsett {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .velger-oppsett { grid-template-columns: 1fr 1.05fr; gap: 4rem; }
}

/* Scenen der tjeneste-illustrasjonen svever */
.velger-scene {
  position: relative;
  height: 34vh;
  min-height: 230px;
  order: 1;
}

@media (min-width: 1024px) { .velger-scene { order: 2; height: 48vh; } }

.velger-glod {
  position: absolute;
  inset: 4% -6%;
  opacity: 0.5;
}

/* Forsøk nummer to på denne feilen: den forrige rettelsen (backface-visibility
   + fjerne 3D-vipping) løste den IKKE på ekte iPhone. I stedet for å stole på
   at opasitet skjuler de inaktive figurene — som tydeligvis kan svikte i
   mobil-WebKit — fjernes de nå helt fra gjengivelsen (display:none) når de
   ikke er aktive. Da er det fysisk umulig for flere å vises samtidig,
   uansett hvordan nettleseren komponerer laget. Prisen er at nedtoningen av
   den forrige figuren er borte — kun den nye toner inn — men det er verdt
   det for å faktisk bli kvitt feilen. */
.velger-figur {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.velger-figur svg { width: min(92%, 440px); height: auto; overflow: visible; }

.velger-figur.aktiv {
  display: flex;
  pointer-events: auto;
  animation: figur-inn 0.5s var(--ease);
}

@keyframes figur-inn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.velger-tekst { order: 2; }
@media (min-width: 1024px) { .velger-tekst { order: 1; } }

.velger-blokk { display: none; }
.velger-blokk.aktiv { display: block; }

.js .velger-blokk.aktiv { animation: blokk-inn 0.34s var(--ease); }

@keyframes blokk-inn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.velger-blokk h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.7rem 0 0;
  color: var(--sno);
}

.velger-kallenavn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(154, 228, 255, 0.8);
  margin: 0.35rem 0 0;
}

.velger-blokk > p.beskrivelse {
  margin: 1.4rem 0 0;
  max-width: 30rem;
  color: var(--dis);
  font-size: 0.95rem;
}

.spesifikasjon {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  margin: 2rem 0 0;
}

.spesifikasjon dt {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.45);
}

.spesifikasjon dd { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--sno); }

.pris-rad {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(211, 201, 186, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
}

.pris-merke {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.45);
}

/* Prisen står i gull, ikke blått. Det varme tallet leses som en verdi,
   det kalde som enda en teknisk detalj.
   Merk: ingen tabular-nums her. Cormorants tabellsiffer er svært brede, og
   «kr 5 000» falt fra hverandre til «5 0 0 0». Proporsjonale siffer holder
   tallet samlet. */
.pris-tall {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gull);
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

.pris-etter { font-size: 0.85rem; color: rgba(211, 201, 186, 0.6); }

/* Fanene under */
.velger-faner {
  margin-top: 2.8rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}

.velger-faner::-webkit-scrollbar { display: none; }

@media (min-width: 768px) { .velger-faner { margin-inline: 0; padding-inline: 0; } }

.velger-faner div { display: flex; gap: 0.65rem; min-width: max-content; }

.fane {
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  padding: 0.65rem 1.1rem;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(211, 201, 186, 0.6);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.fane:hover { color: var(--sno); border-color: rgba(255, 255, 255, 0.3); }

.fane[aria-selected="true"] {
  border-color: var(--is);
  background: rgba(79, 195, 247, 0.12);
  color: var(--is);
}

/* ==========================================================
   REFERANSER
   ========================================================== */

.referanse {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-bottom: 5rem;
}

@media (min-width: 1024px) {
  .referanse { grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 7rem; }
  .referanse.speilet .referanse-bilde { order: 2; }
}

.referanse:last-child { margin-bottom: 0; }

.referanse-bilde {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.referanse-bilde img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.referanse-bilde:hover img { transform: scale(1.05); }

.referanse-bilde::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 12, 24, 0.6), transparent);
  pointer-events: none;
}

/* --- Nettside-ramme ---
   Ekte skjermbilde av siden vi leverte, vist i en nettleser-ramme.
   Skjermbildene er tatt med Edge i headless-modus, ikke hentet fra
   kundenes bildearkiv — det er vårt eget arbeid som vises. */
.nettside-ramme {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(211, 201, 186, 0.14);
  background: #0B1119;
  display: flex;
  flex-direction: column;
  transition: transform 1.1s var(--ease), border-color 0.5s, box-shadow 0.6s;
}

.referanse:hover .nettside-ramme {
  transform: translateY(-6px);
  border-color: rgba(79, 195, 247, 0.38);
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.75);
}

/* Nettleserlinja på toppen */
.nettside-topp {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.nettside-topp i {
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.nettside-url {
  margin-left: 0.45rem;
  flex: 1;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: rgba(211, 201, 186, 0.45);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 100px;
  padding: 0.16rem 0.6rem;
  white-space: nowrap;
  overflow: hidden;
}

/* Selve skjermbildet. Toppstilt, slik at nettsidens hero alltid er synlig
   også når høydeforholdet må beskjæres. */
.nettside-skjerm {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #0B1119;
}

.nettside-skjerm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.6s var(--ease);
}

.referanse:hover .nettside-skjerm img { transform: scale(1.04); }

.referanse h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.8rem 0 0;
  color: var(--sno);
}

.referanse p { color: var(--dis); font-size: 0.95rem; max-width: 30rem; }

.referanse-merkelapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding: 0;
  list-style: none;
}

.referanse-merkelapper li {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
}

/* ==========================================================
   SITAT
   ========================================================== */

.sitat-blokk {
  border-left: 2px solid var(--is);
  padding-left: 1.8rem;
  margin: 2.5rem 0 0;
}

.sitat-blokk p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.8vw, 1.8rem);
  line-height: 1.3;
  color: var(--sno);
  margin: 0;
}

.sitat-kilde {
  display: block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.5);
}

/* ==========================================================
   GRUNNER
   ========================================================== */

.grunn-rutenett { display: grid; gap: 0; }

.grunn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid rgba(211, 201, 186, 0.14);
  align-items: start;
}

.grunn:first-child { border-top: 1px solid rgba(211, 201, 186, 0.14); }

@media (min-width: 768px) {
  .grunn { grid-template-columns: 5rem 1fr 1.1fr; gap: 3rem; padding: 2.8rem 0; }
}

.grunn-nr {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--is);
  opacity: 0.65;
}

.grunn h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  margin: 0;
  color: var(--sno);
}

.grunn p { margin: 0; color: var(--dis); font-size: 0.95rem; }

@media (max-width: 767px) {
  .grunn p { grid-column: 2; margin-top: 0.7rem; }
}

/* ==========================================================
   AVSLUTNING
   ========================================================== */

.avslutning {
  position: relative;
  text-align: center;
  padding: 8rem 0;
  overflow: hidden;
}

@media (min-width: 768px) { .avslutning { padding: 11rem 0; } }

.avslutning-glod {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw; height: 55vh;
  opacity: 0.2;
}

.avslutning h2 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  margin: 1.5rem auto 0;
  max-width: 18ch;
  color: var(--sno);
}

.avslutning .ingress { margin: 2rem auto 0; }
.avslutning .knapperad {
  margin-top: 2.8rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.avslutning .eyebrow { display: flex; justify-content: center; }

/* ==========================================================
   BUNN
   ========================================================== */

.bunn {
  border-top: 1px solid rgba(211, 201, 186, 0.12);
  padding: 4rem 0 3rem;
  background: var(--blekk);
}

.bunn-topp {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.bunn-slagord {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.15;
  margin: 1.2rem 0 0;
  max-width: 18rem;
  color: var(--sno);
}

.bunn-slagord em { font-style: normal; color: var(--is); }

.bunn-lenker { display: flex; gap: 1.6rem; flex-wrap: wrap; }

.bunn-lenker a {
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.7);
  transition: color 0.3s;
}

.bunn-lenker a:hover { color: var(--is); }

.bunn-under {
  border-top: 1px solid rgba(211, 201, 186, 0.1);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: rgba(211, 201, 186, 0.5);
}

/* ==========================================================
   UNDERSIDER
   ========================================================== */

.sidehode {
  position: relative;
  padding: 11rem 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(27, 127, 181, 0.28), transparent 66%),
    var(--blekk);
}

.sidehode h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin: 1.4rem 0 0;
  color: var(--sno);
  max-width: 18ch;
}

.sidehode .ingress { margin-top: 1.8rem; }

/* Tjenesteliste på undersiden */
.tjeneste {
  padding: 3rem 0;
  border-bottom: 1px solid rgba(211, 201, 186, 0.14);
}

.tjeneste:first-of-type { border-top: 1px solid rgba(211, 201, 186, 0.14); }

.tjeneste-topp {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tjeneste h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  margin: 0;
  color: var(--sno);
}

.tjeneste p { color: var(--dis); margin: 0; max-width: 40rem; font-size: 0.95rem; }

.merke {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  white-space: nowrap;
}

.merke-na { background: rgba(79,195,247,.14); color: var(--is); border: 1px solid rgba(79,195,247,.45); }
.merke-snart { background: rgba(211, 201, 186,.07); color: rgba(211, 201, 186,.7); border: 1px solid rgba(255,255,255,.12); }

.punkter {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.punkter li {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
}

.tjeneste-pris {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem;
}

.varsel {
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid rgba(79, 195, 247, 0.25);
  border-radius: 0.6rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 3rem;
  font-size: 0.9rem;
  color: var(--dis);
}

.varsel strong { color: var(--is); font-weight: 600; }

/* ==========================================================
   KONTAKTSIDE
   ========================================================== */

.kontakt-oppsett { display: grid; grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 900px) {
  .kontakt-oppsett { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}

.felt { margin-bottom: 1.3rem; }

.felt label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.7);
  margin-bottom: 0.55rem;
}

.felt input,
.felt textarea,
.felt select {
  width: 100%;
  background: var(--blekk-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--sno);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.felt input:focus,
.felt textarea:focus,
.felt select:focus {
  outline: none;
  border-color: var(--is);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.16);
}

.felt textarea { min-height: 9rem; resize: vertical; }

.hjelpetekst { font-size: 0.82rem; color: rgba(211, 201, 186, 0.6); margin-top: 0.9rem; }

.info-boks {
  border-top: 1px solid rgba(211, 201, 186, 0.14);
  padding: 1.6rem 0;
}

.info-boks h3 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(211, 201, 186, 0.5);
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-weight: 500;
}

.info-boks p { margin: 0; color: var(--dis); font-size: 0.95rem; }
.info-boks a { color: var(--is); text-decoration: none; word-break: break-word; }
.info-boks a:hover { text-decoration: underline; }

/* ==========================================================
   TILGJENGELIGHET
   ========================================================== */

:focus-visible {
  outline: 2px solid var(--is-lys);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respekter brukere som har slått av animasjoner i systemet sitt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .frem, .js .last-inn { opacity: 1 !important; transform: none !important; }
  .js .linje-maske > span { transform: none !important; }
  .manifest .ord { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   CHATBOT-WIDGET
   Alt her styres av chat.js, som injiserer HTML-en selv —
   hver side trenger bare <script src="chat.js"> for å få dette.
   ========================================================== */

#chat-knapp {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 200;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  border: none;
  background: var(--is);
  color: var(--blekk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(79, 195, 247, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

#chat-knapp:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(79, 195, 247, 0.7); }
#chat-knapp svg { width: 1.5rem; height: 1.5rem; }

#chat-panel {
  position: fixed;
  right: 1.4rem;
  bottom: 5.4rem;
  z-index: 200;
  width: min(23rem, calc(100vw - 2.8rem));
  height: min(32rem, calc(100vh - 8rem));
  background: var(--blekk-2);
  border: 1px solid rgba(211, 201, 186, 0.14);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}

.chat-hode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: var(--blekk);
  color: var(--sno);
  font-family: var(--serif);
  font-size: 1.15rem;
  border-bottom: 1px solid rgba(211, 201, 186, 0.12);
  flex-shrink: 0;
}

#chat-lukk {
  background: none;
  border: none;
  color: var(--dis);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.3rem;
}

#chat-lukk:hover { color: var(--sno); }

#chat-meldinger {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.melding {
  max-width: 82%;
  padding: 0.6rem 0.85rem;
  border-radius: 0.8rem;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.melding-bot {
  align-self: flex-start;
  background: var(--blekk-3);
  color: var(--sno);
  border-bottom-left-radius: 0.2rem;
}

.melding-bruker {
  align-self: flex-end;
  background: var(--is);
  color: var(--blekk);
  border-bottom-right-radius: 0.2rem;
}

.melding-typer { color: var(--dis-svak); font-style: italic; }

#chat-skjema {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem;
  border-top: 1px solid rgba(211, 201, 186, 0.12);
  flex-shrink: 0;
}

#chat-felt {
  flex: 1;
  background: var(--blekk);
  border: 1px solid rgba(211, 201, 186, 0.16);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  color: var(--sno);
  font-family: inherit;
  font-size: 0.88rem;
}

#chat-felt:focus { outline: none; border-color: var(--is); }

#chat-skjema button {
  background: var(--is);
  color: var(--blekk);
  border: none;
  border-radius: 0.6rem;
  padding: 0 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

@media (max-width: 480px) {
  #chat-panel { right: 0.7rem; bottom: 5rem; }
  #chat-knapp { right: 0.9rem; bottom: 0.9rem; }
}

/* ==========================================================
   SAMTYKKE-BANNER
   Bevisst plassert i motsatt hjørne av chat-knappen, slik at
   de to aldri kolliderer visuelt.
   ========================================================== */

#samtykke-banner {
  position: fixed;
  left: 1.2rem; bottom: 1.2rem;
  z-index: 210;
  width: min(22rem, calc(100vw - 2.4rem));
  background: var(--blekk-2);
  border: 1px solid rgba(208, 168, 104, 0.35);
  border-radius: 0.9rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.6);
}

#samtykke-banner p {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--dis);
}

#samtykke-banner a { color: var(--is); text-decoration: underline; }

.samtykke-knapper { display: flex; gap: 0.6rem; justify-content: flex-end; }

.samtykke-knapper button {
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(211, 201, 186, 0.2);
  background: transparent;
  color: var(--dis);
}

#samtykke-ja {
  background: var(--gull);
  color: var(--blekk);
  border-color: transparent;
  font-weight: 600;
}

.samtykke-knapper button:hover { border-color: var(--is); color: var(--sno); }
#samtykke-ja:hover { color: var(--blekk); border-color: transparent; background: var(--gull-lys); }

#administrer-samtykke {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(211, 201, 186, 0.35);
}

@media (max-width: 480px) {
  /* Banneret blir fullbredt her, så det må heves over chat-knappen —
     ellers ville de to ligget oppå hverandre i samme hjørne. */
  #samtykke-banner { left: 0.7rem; right: 0.7rem; width: auto; bottom: 5.6rem; }
}