/* ==========================================================================
   Kraftplan, felles stilark
   Alle sider bruker dette. Endre farger, fonter og chrome her, ikke per side.
   ========================================================================== */

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

:root {
  /* Logoens to farger. Hver har to roller og ikke flere, slik at det ikke
     sprer seg blå- og grønntoner utover nettsiden:

       --x        logofargen ren. Aksenter, streker, prikker, og tekst på
                  mørk bakgrunn, der den har god nok kontrast.
       --x-mork   tekst og knappeflater på lys bakgrunn. Logofargen er for
                  lys til å leses mot papir, så lysheten er senket til den
                  klarer 4,5:1. Kulør og metning er logoens.

     Svake flater er nøytrale, ikke tonet i blått eller grønt. Merkefargen
     bæres av kant og skrift i stedet, så antallet blå- og grønntoner holdes
     nede slik dokumentet ber om. */
  --blaa:        #50aad1;
  --blaa-mork:   #277495;

  --gronn:       #44ad69;
  --gronn-mork:  #307b4a;

  /* Nøytraler. Den mørke grunnen ligger midt mellom logoens blå og grønn,
     og er en dyp variant av dem. Den skal leses som Kraftplan-mørk, ikke som
     svart, og representerer begge fagområdene, siden bunntekst og mørke
     seksjoner er felles for hele nettsiden.
     Det finnes bare én mørk tone: bunntekst, mørke seksjoner, tjenestehero
     og mobilmeny bruker alle den samme, slik at flatene henger sammen. */
  --morke:       #12302c;
  --papir:       #f9f8f5;
  --papir-2:     #f2f0eb;
  --tekst:       #1a1f1b;
  --tekst-dempet: rgba(26,31,27,0.62);
  --strek:       rgba(26,31,27,0.10);
  --strek-lys:   rgba(249,248,245,0.12);

  /* Fonter. DM-navnene beholdes bakerst i stakken slik at vi enkelt kan
     bytte tilbake, og slik at maskiner uten Segoe UI får et kjent alternativ. */
  --font-tittel: "Trebuchet MS", "DM Serif Display", Georgia, serif;
  --font-brod:   "Segoe UI", "DM Sans", system-ui, -apple-system, sans-serif;
  --font-lett:   "Segoe UI Light", "Segoe UI", "DM Sans", system-ui, -apple-system, sans-serif;
}

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: hidden; }

/* Fargen som hører til siden man er på. Vannkraftsidene er blå,
   arealplansidene grønne. Forsiden og Om oss dekker begge fagområder, og
   bruker den mørke grunnen framfor å favorisere det ene. */
body { --omraade: var(--morke); }
body[data-omraade="kraft"] { --omraade: var(--blaa-mork); }
body[data-omraade="areal"] { --omraade: var(--gronn-mork); }

body {
  font-family: var(--font-brod);
  background: var(--papir);
  color: var(--tekst);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-tittel); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; }
::selection { background: var(--gronn-mork); color: var(--papir); }

img { max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .wrap { padding: 0 3rem; } }

/* --- Typografi ---------------------------------------------------------- */
.tittel-xl { font-size: clamp(2.4rem, 5.5vw, 4.5rem); }
.tittel-lg { font-size: clamp(2rem, 4vw, 3.25rem); }
.tittel-md { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.tittel-sm { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.stikkord { font-family: var(--font-brod); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gronn-mork); }
.stikkord-blaa { color: var(--blaa-mork); }
.stikkord-lys { color: rgba(249,248,245,0.55); }

.brod { font-family: var(--font-lett); font-weight: 300; font-size: 1.0625rem; line-height: 1.8; color: var(--tekst-dempet); }
.brod + .brod { margin-top: 1rem; }
.brod strong { font-weight: 600; color: var(--tekst); }

.ingress { font-family: var(--font-brod); font-size: 1.0625rem; line-height: 1.8; color: rgba(249,248,245,0.72); }

/* --- Knapper og lenker -------------------------------------------------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.75rem; border-radius: 4px;
  font-family: var(--font-brod); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer; transition: all 0.25s;
}
.knapp-mork { background: var(--gronn-mork); color: var(--papir); }
.knapp-mork:hover { filter: brightness(0.88); }
.knapp-lys { background: var(--papir); color: var(--morke); }
.knapp-lys:hover { background: #fff; }
.knapp-kant { border: 1px solid rgba(249,248,245,0.4); color: var(--papir); }
.knapp-kant:hover { border-color: var(--papir); background: rgba(249,248,245,0.1); }

.pil-lenke {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  color: var(--gronn-mork); transition: gap 0.25s;
}
.pil-lenke:hover { gap: 0.7rem; }
.pil-lenke-lys { color: rgba(249,248,245,0.75); }
.pil-lenke-lys:hover { color: var(--papir); }

/* Hopp til innhold. Ligger utenfor skjermen til den får tastaturfokus, slik
   at den som navigerer med tastatur slipper å gå gjennom hele menyen. */
.hopp-lenke { position: absolute; left: 1.5rem; top: -100px; z-index: 300; background: var(--papir); color: var(--morke); padding: 0.7rem 1.25rem; border-radius: 0 0 6px 6px; font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: top 0.2s; }
.hopp-lenke:focus { top: 0; }

/* Synlig fokusmarkering for tastaturbruk */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blaa);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Topptekst ---------------------------------------------------------- */
#topp { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
/* Et mykt slør bak toppteksten mens den er gjennomsiktig. Logoen og
   menyen ligger over foto med snø og lyst vann, og trenger noe å stå mot. */
#topp::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 190%; background: linear-gradient(to bottom, rgba(18,48,44,0.55) 0%, rgba(18,48,44,0.28) 45%, transparent 100%); pointer-events: none; transition: opacity 0.4s; }
#topp.fast::before { opacity: 0; }
#topp > * { position: relative; }
#topp.fast { background: rgba(249,248,245,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--strek); }
.topp-inn { display: flex; align-items: center; justify-content: space-between; height: 5.75rem; gap: 2rem; }
.topp-logo { display: block; flex-shrink: 0; }
.topp-logo img { height: 52px; width: auto; display: block; transition: height 0.3s; }
#topp.fast .topp-logo img { height: 46px; }

.meny { display: flex; align-items: center; gap: 2.25rem; list-style: none; }
.meny > li > a { font-family: var(--font-brod); font-size: 0.875rem; font-weight: 500; color: rgba(249,248,245,0.88); text-decoration: none; transition: color 0.3s; }
.meny > li > a:hover { color: var(--papir); }
#topp.fast .meny > li > a { color: rgba(26,31,27,0.72); }
#topp.fast .meny > li > a:hover { color: var(--morke); }

.meny-kontakt { background: rgba(249,248,245,0.15); border: 1px solid rgba(249,248,245,0.28); padding: 0.5rem 1.25rem; border-radius: 4px; }
.meny-kontakt:hover { background: rgba(249,248,245,0.25); }
#topp.fast .meny-kontakt { background: var(--omraade); border-color: var(--omraade); color: var(--papir) !important; }
#topp.fast .meny-kontakt:hover { filter: brightness(0.88); }

/* Nedtrekk med to kolonner, én per hovedområde */
.nedtrekk { position: relative; }
.nedtrekk > a::after { content: ""; display: inline-block; margin-left: 0.4rem; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.6; transition: transform 0.3s; vertical-align: middle; }
.nedtrekk:hover > a::after { transform: rotate(180deg); }
.nedtrekk-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); padding-top: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.nedtrekk:hover .nedtrekk-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nedtrekk-inn { display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 0.5rem; background: rgba(18,48,44,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--strek-lys); border-radius: 10px; padding: 1rem; }
.nedtrekk-gruppe { display: flex; flex-direction: column; }
.nedtrekk-tittel { display: flex !important; align-items: center; gap: 0.6rem; font-family: var(--font-tittel); font-size: 1rem; font-weight: 700; color: var(--papir) !important; text-decoration: none; padding: 0.5rem 0.65rem; border-radius: 6px; white-space: nowrap; }
.nedtrekk-tittel:hover { background: rgba(249,248,245,0.1); }
.nedtrekk-gruppe a:not(.nedtrekk-tittel) { display: block; font-size: 0.85rem; color: rgba(249,248,245,0.7); text-decoration: none; padding: 0.4rem 0.65rem 0.4rem 1.9rem; border-radius: 6px; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.nedtrekk-gruppe a:not(.nedtrekk-tittel):hover { background: rgba(249,248,245,0.08); color: var(--papir); }
.prikk { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.prikk-kraft { background: var(--blaa); }
.prikk-areal { background: var(--gronn); }

.burger { display: none; background: none; border: none; cursor: pointer; color: var(--papir); transition: color 0.4s; padding: 0; }
#topp.fast .burger { color: var(--morke); }
@media (max-width: 900px) { .meny { display: none; } .burger { display: block; } }
@media (max-width: 600px) {
  .topp-inn { height: 4.75rem; }
  .topp-logo img { height: 42px; }
  #topp.fast .topp-logo img { height: 38px; }
  .mobil-topp { height: 4.75rem; }
}

/* --- Mobilmeny ---------------------------------------------------------- */
#mobilmeny { position: fixed; inset: 0; z-index: 200; background: var(--morke); display: flex; flex-direction: column; padding: 0 1.5rem 2rem; opacity: 0; pointer-events: none; transition: opacity 0.35s; overflow-y: auto; }
#mobilmeny.apen { opacity: 1; pointer-events: auto; }
.mobil-topp { display: flex; align-items: center; justify-content: space-between; height: 5.75rem; flex-shrink: 0; }
.mobil-topp img { height: 46px; width: auto; display: block; }
.mobil-lukk { background: none; border: none; cursor: pointer; color: var(--papir); padding: 0; }
.mobil-nav { margin-top: 1.5rem; display: flex; flex-direction: column; }
.mobil-nav > a { font-family: var(--font-tittel); font-weight: 700; font-size: 1.6rem; color: var(--papir); text-decoration: none; padding: 0.7rem 0; border-bottom: 1px solid rgba(249,248,245,0.08); }
.mobil-gruppe { border-bottom: 1px solid rgba(249,248,245,0.08); }
.mobil-gruppe-tittel { font-family: var(--font-tittel); font-weight: 700; font-size: 1.6rem; color: var(--papir); display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; cursor: pointer; }
.mobil-gruppe-tittel::after { content: "+"; font-family: var(--font-brod); font-size: 1.4rem; opacity: 0.5; transition: transform 0.3s; }
.mobil-gruppe.apen .mobil-gruppe-tittel::after { transform: rotate(45deg); }
.mobil-under { display: none; flex-direction: column; padding-bottom: 0.9rem; }
.mobil-gruppe.apen .mobil-under { display: flex; }
.mobil-under a { font-size: 1.05rem; color: rgba(249,248,245,0.75); text-decoration: none; padding: 0.4rem 0 0.4rem 1rem; }
.mobil-under a.mobil-under-hoved { color: var(--papir); font-weight: 600; padding-left: 0; margin-top: 0.4rem; }
.mobil-bunn { margin-top: auto; padding-top: 2rem; border-top: 1px solid rgba(249,248,245,0.12); font-size: 0.875rem; color: rgba(249,248,245,0.55); display: flex; flex-direction: column; gap: 0.25rem; }
.mobil-bunn a { color: inherit; text-decoration: none; }
.mobil-bunn .bunn-overskrift { margin-bottom: 0.35rem; }

/* --- Hero, forside ------------------------------------------------------ */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.hero-bilder { position: absolute; inset: 0; }
/* Hero-video. Plakatbildet vises mens videoen laster, og er det eneste som
   lastes på smale skjermer; js/site.js henter selve filen først når det er
   plass til den. */
.hero-plakat { position: absolute; inset: 0; background-size: cover; background-position: center; display: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobil laster aldri ned videoen og ser bare plakatbildet. Et langsomt zoom
   gir heroen liv uten en eneste ekstra byte. Animasjonen ligger på selve
   videoelementet, for det er det som tegner plakaten når ingen kilde er satt
   inn. alternate gjør at bildet puster inn og ut i stedet for å hoppe
   tilbake til utgangspunktet. */
@keyframes plakatzoom { from { transform: scale(1); } to { transform: scale(1.12); } }
/* js/site.js merker kroppen når den lot være å sette inn en videokilde.
   Da skal videoen holdes skjult uansett skjermbredde, slik at play-overlegget
   ikke dukker opp igjen om telefonen snus til liggende. */
body.ingen-hero-video .hero-video { display: none; }
body.ingen-hero-video .hero-plakat { display: block; animation: plakatzoom 24s ease-in-out infinite alternate; }
.hero-bilde { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease; }
.hero-bilde.aktiv { opacity: 1; transform: scale(1); transition: opacity 1.4s ease, transform 7s ease-out; }
/* Heroen ligger over bilder med snø og lyst vann, så sløret må være kraftig
   nok øverst til at overskriften holder kontrast uansett hvilket bilde som vises. */
.hero-slor { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,48,44,0.72) 0%, rgba(18,48,44,0.52) 30%, rgba(18,48,44,0.34) 52%, rgba(18,48,44,0.9) 100%); }
.hero-innhold { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.hero-tekst { padding: 10rem 3rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.hero-h1 { font-size: clamp(1.9rem, 3.6vw, 3.6rem); color: var(--papir); text-shadow: 0 2px 24px rgba(18,48,44,0.55); }
.hero-linje1 { display: block; white-space: nowrap; }
.hero-linje2 { display: block; min-height: 1.25em; min-width: 18ch; }
.hero-h1 .ord-blaa { color: var(--blaa); }
.hero-h1 .ord-gronn { color: var(--gronn); }
.markor { display: inline-block; width: 3px; height: 0.8em; background: currentColor; margin-left: 3px; vertical-align: baseline; animation: blink 1s step-end infinite; opacity: 0.8; }
@keyframes blink { 0%, 100% { opacity: 0.8; } 50% { opacity: 0; } }

/* Fagkort i hero */
.fagkort-rad { display: grid; gap: 1rem; padding: 2rem 0; }
@media (min-width: 640px) { .fagkort-rad { grid-template-columns: 1fr 1fr; } }
.fagkort { display: flex; flex-direction: column; gap: 0.6rem; padding: 2.25rem 2rem; border-radius: 12px; text-decoration: none; color: var(--papir); background: rgba(16,43,39,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(249,248,245,0.15); transition: all 0.3s; position: relative; overflow: hidden; }
.fagkort::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.fagkort-kraft::before { background: var(--blaa); }
.fagkort-areal::before { background: var(--gronn); }
.fagkort:hover { background: rgba(18,48,44,0.55); border-color: rgba(249,248,245,0.24); transform: translateY(-3px); }
.fagkort-tittel { font-family: var(--font-tittel); font-weight: 700; font-size: 1.7rem; }
.fagkort-sub { font-size: 1rem; }
.fagkort-kraft .fagkort-sub { color: var(--blaa); }
.fagkort-areal .fagkort-sub { color: var(--gronn); }
.fagkort-pil { margin-top: 0.6rem; font-size: 0.85rem; color: rgba(249,248,245,0.65); display: flex; align-items: center; gap: 0.4rem; transition: all 0.2s; }
.fagkort:hover .fagkort-pil { color: rgba(249,248,245,0.9); gap: 0.7rem; }

@media (max-width: 767px) {
  .hero-video { display: none; }
  .hero-plakat { display: block; animation: plakatzoom 24s ease-in-out infinite alternate; }
  .hero-tekst { padding: 8rem 1.5rem 1.5rem; }
  .fagkort { padding: 1.25rem 1rem; }
  .fagkort-tittel { font-size: 1.05rem; }
  .fagkort-sub { font-size: 0.8rem; }
  .fagkort-pil { font-size: 0.72rem; }
}

/* Nivå 2 av visjonen, under den dynamiske overskriften */
.hero-slagord { font-family: var(--font-lett); font-weight: 300; font-size: 1.0625rem; color: rgba(249,248,245,0.78); margin-top: 1.1rem; max-width: 40rem; text-shadow: 0 1px 16px rgba(18,48,44,0.6); }
@media (max-width: 767px) { .hero-slagord { font-size: 0.9375rem; margin-top: 0.85rem; } }

.hero-prikker { display: flex; gap: 0.5rem; margin-top: 1.75rem; }
.hero-prikk { width: 8px; height: 8px; border-radius: 50%; background: rgba(249,248,245,0.35); border: none; cursor: pointer; padding: 0; transition: all 0.3s; }
.hero-prikk.aktiv { background: var(--papir); width: 24px; border-radius: 4px; }

/* --- Hero, hovedsider (kraft / arealplan) ------------------------------- */
.omraade-hero { position: relative; height: 100svh; min-height: 620px; max-height: 940px; overflow: hidden; }
.omraade-hero .hero-innhold { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 5rem; padding-top: 9rem; }
.omraade-hero h1 { color: var(--papir); max-width: 16ch; text-shadow: 0 2px 24px rgba(18,48,44,0.55); }
.omraade-hero h1 em { font-style: normal; }
.omraade-hero .hero-kraft em { color: var(--blaa); }
.omraade-hero .hero-areal em { color: var(--gronn); }
.omraade-hero .ingress { margin-top: 1.5rem; max-width: 44rem; }

/* --- Hero, tjenestesider ------------------------------------------------ */
.tjeneste-hero { position: relative; padding: 11rem 0 5rem; background: var(--morke); color: var(--papir); overflow: hidden; }
/* Bildene ligger bakerst, sløret over dem, og teksten øverst. Sløret er
   kraftigere enn på hovedsidene, siden teksten her går over hele høyden. */
.tjeneste-hero .hero-bilder { position: absolute; inset: 0; }
.tjeneste-hero .hero-slor { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,48,44,0.86) 0%, rgba(18,48,44,0.74) 45%, rgba(18,48,44,0.9) 100%); }
.tjeneste-hero-kraft .hero-slor { background: linear-gradient(to bottom, rgba(18,48,44,0.88) 0%, rgba(23,58,74,0.74) 45%, rgba(18,48,44,0.92) 100%); }
.tjeneste-hero-areal .hero-slor { background: linear-gradient(to bottom, rgba(18,48,44,0.88) 0%, rgba(24,58,38,0.74) 45%, rgba(18,48,44,0.92) 100%); }
.tjeneste-hero .wrap { position: relative; }
.tilbake { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: rgba(249,248,245,0.55); text-decoration: none; margin-bottom: 1.75rem; transition: color 0.2s; }
.tilbake:hover { color: var(--papir); }
.tjeneste-hero h1 { color: var(--papir); margin-top: 0.75rem; max-width: 18ch; }
.tjeneste-hero .ingress { margin-top: 1.5rem; max-width: 46rem; }

/* Faktaboks */
.faktaboks { display: grid; gap: 1.5rem 2.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--strek-lys); }
@media (min-width: 640px) { .faktaboks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .faktaboks { grid-template-columns: repeat(4, 1fr); } }
.fakta-merke { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(249,248,245,0.72); display: block; }
.fakta-verdi { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: rgba(249,248,245,0.85); margin-top: 0.3rem; display: block; line-height: 1.55; }

/* --- Seksjoner ---------------------------------------------------------- */
.seksjon { padding: 5rem 0; }
@media (min-width: 768px) { .seksjon { padding: 7rem 0; } }
.seksjon-lys { background: var(--papir-2); }
.seksjon-hvit { background: #fff; }
.seksjon-mork { background: var(--morke); color: var(--papir); }
.seksjon-mork h2, .seksjon-mork h3 { color: var(--papir); }

.rutenett-2 { display: grid; gap: 3rem; }
@media (min-width: 768px) { .rutenett-2 { grid-template-columns: 3fr 5fr; gap: 5rem; align-items: start; } }

.seksjon-topp { margin-bottom: 3rem; }
.seksjon-topp h2 { margin-top: 0.75rem; }

/* --- Vår tilnærming, fire blokker --------------------------------------- */
.tilnaerming { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .tilnaerming { grid-template-columns: 1fr 1fr; gap: 3.5rem 4rem; } }
/* Blokkene seiler inn etter hverandre når seksjonen kommer til syne, og
   streken over hver av dem tegner seg fra venstre. Fire strek som trekkes
   opp i rekkefølge gir seksjonen en bevegelse den ellers mangler, uten at
   det trengs bilder eller andre nye elementer. */
.tilnaerming-blokk { position: relative; padding-top: 1.5rem; }
.tilnaerming-blokk::before {
  content: ""; position: absolute; top: 0; left: 0;
  height: 2px; width: 0; background: var(--strek);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tilnaerming-blokk.synlig::before { width: 100%; }
.tilnaerming-kraft .tilnaerming-blokk::before { background: var(--blaa); }
.tilnaerming-areal .tilnaerming-blokk::before { background: var(--gronn); }

/* Litt lengre vei å seile enn ellers på siden, så bevegelsen merkes. */
.tilnaerming-blokk.vis { transform: translateY(30px); }
.tilnaerming-blokk.vis.synlig { transform: none; }

.tilnaerming-blokk:nth-child(1) { transition-delay: 0s; }
.tilnaerming-blokk:nth-child(2) { transition-delay: 0.13s; }
.tilnaerming-blokk:nth-child(3) { transition-delay: 0.26s; }
.tilnaerming-blokk:nth-child(4) { transition-delay: 0.39s; }
.tilnaerming-blokk:nth-child(1)::before { transition-delay: 0.20s; }
.tilnaerming-blokk:nth-child(2)::before { transition-delay: 0.33s; }
.tilnaerming-blokk:nth-child(3)::before { transition-delay: 0.46s; }
.tilnaerming-blokk:nth-child(4)::before { transition-delay: 0.59s; }
.tilnaerming-blokk h3 { font-size: 1.4rem; margin-bottom: 0.9rem; }
.tilnaerming-blokk .brod { font-size: 1rem; }

/* --- Tjenestekort ------------------------------------------------------- */
.tj-rutenett { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 640px) { .tj-rutenett { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tj-rutenett { grid-template-columns: repeat(4, 1fr); } }
.tj-kort { display: flex; flex-direction: column; gap: 0.5rem; background: #fff; border: 1px solid var(--strek); border-top: 3px solid var(--gronn); border-radius: 8px; padding: 1.75rem 1.5rem; text-decoration: none; color: var(--tekst); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.tj-kort-kraft { border-top-color: var(--blaa); }
.tj-kort:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(18,48,44,0.09); }
.tj-nr { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; color: var(--tekst-dempet); font-variant-numeric: tabular-nums; }
.tj-kort h3 { font-size: 1.3rem; margin-top: 0.2rem; }
.tj-for { font-size: 0.8rem; font-weight: 600; color: var(--gronn-mork); }
.tj-kort-kraft .tj-for { color: var(--blaa-mork); }
.tj-tekst { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: var(--tekst-dempet); line-height: 1.7; flex: 1; }
.tj-pil { font-size: 0.9rem; color: var(--gronn-mork); margin-top: 0.6rem; transition: transform 0.25s; }
.tj-kort-kraft .tj-pil { color: var(--blaa-mork); }
.tj-kort:hover .tj-pil { transform: translateX(4px); }
.tj-fotnote { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: var(--tekst-dempet); margin-top: 2rem; max-width: 54rem; line-height: 1.75; }

/* --- Leveranseliste ----------------------------------------------------- */
.leveranse { margin: 0; list-style: none; }
.leveranse li { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--strek); font-size: 1rem; }
.leveranse li:first-child { border-top: 1px solid var(--strek); }
.leveranse li::before { content: counter(leveranse, decimal-leading-zero); counter-increment: leveranse; font-family: var(--font-brod); font-size: 0.65rem; color: var(--tekst-dempet); min-width: 1.5rem; font-variant-numeric: tabular-nums; }
.leveranse { counter-reset: leveranse; }

/* Enkel punktliste (typiske endringer, typiske oppdrag) */
.punkter { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.punkter li { font-family: var(--font-lett); font-weight: 300; font-size: 1rem; color: var(--tekst-dempet); display: flex; align-items: baseline; gap: 0.7rem; }
.punkter li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gronn); flex-shrink: 0; transform: translateY(-2px); }
.punkter-kraft li::before { background: var(--blaa); }

/* --- Prosess i fire steg ------------------------------------------------ */
.steg { display: grid; gap: 1.25rem; margin-top: 3rem; counter-reset: steg; }
@media (min-width: 768px) { .steg { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
.steg-kort { padding: 1.5rem 0 0; border-top: 1px solid var(--strek); }
.steg-kort::before { content: counter(steg, decimal-leading-zero); counter-increment: steg; font-family: var(--font-brod); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; color: var(--gronn-mork); display: block; margin-bottom: 0.6rem; }
.steg-kraft .steg-kort::before { color: var(--blaa-mork); }
.steg-kort h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.steg-kort p { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: var(--tekst-dempet); line-height: 1.75; }

/* --- Prosessvisning, faner med paneler ---------------------------------- */
.fase-rutenett { display: grid; gap: 0.75rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .fase-rutenett { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fase-rutenett { grid-template-columns: repeat(4, 1fr); } }
.fase-kort { background: rgba(249,248,245,0.06); border: 1px solid var(--strek-lys); border-radius: 6px; padding: 1.25rem; cursor: pointer; transition: all 0.25s; text-align: left; font-family: inherit; color: inherit; }
.fase-kort:hover { background: rgba(249,248,245,0.11); }
.fase-kort.aktiv { background: #fff; border-color: #fff; }
.fase-nr { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(249,248,245,0.6); display: block; }
.fase-kort.aktiv .fase-nr { color: var(--blaa-mork); }
.fase-kort-tittel { font-family: var(--font-tittel); font-weight: 700; font-size: 1.05rem; margin-top: 0.5rem; color: var(--papir); display: block; line-height: 1.25; }
.fase-kort.aktiv .fase-kort-tittel { color: var(--tekst); }

.fase-panel { margin-top: 1.5rem; background: #fff; border-radius: 8px; padding: 2rem; display: none; color: var(--tekst); }
.fase-panel.aktiv { display: block; }
.fase-panel-inn { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .fase-panel-inn { grid-template-columns: 3fr 2fr; gap: 2.5rem; } }
/* Panelet er hvitt selv om seksjonen rundt er mørk, så overskriften må
   settes tilbake til mørk tekst. */
.fase-panel h3, .fase-post-kropp h3 { font-size: 1.45rem; color: var(--tekst); }
.fase-panel p.brod { margin-top: 0.75rem; font-size: 0.9375rem; }
.fase-meta { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.fase-meta-rad { display: flex; gap: 0.9rem; font-size: 0.85rem; }
.fase-meta-merke { font-weight: 600; color: var(--blaa-mork); min-width: 6.5rem; flex-shrink: 0; }
.fase-meta-verdi { color: var(--tekst-dempet); }
.fase-bistand { background: var(--papir-2); border-left: 3px solid var(--blaa); border-radius: 6px; padding: 1.25rem; align-self: start; }
.fase-bistand-merke { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--blaa-mork); }
.fase-bistand p { font-family: var(--font-lett); font-weight: 300; font-size: 0.9rem; color: rgba(26,31,27,0.72); margin-top: 0.5rem; line-height: 1.7; }

/* Mobilvariant, trekkspill */
.fase-trekkspill { display: none; flex-direction: column; gap: 0.5rem; margin-top: 2rem; }
.fase-post { border: 1px solid var(--strek-lys); border-radius: 8px; overflow: hidden; }
.fase-post-topp { width: 100%; background: rgba(249,248,245,0.06); border: none; color: var(--papir); padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; text-align: left; font-family: inherit; }
.fase-post-ikon { font-size: 1.25rem; color: rgba(249,248,245,0.5); transition: transform 0.3s; flex-shrink: 0; }
.fase-post.apen .fase-post-ikon { transform: rotate(45deg); }
.fase-post-kropp { display: none; padding: 1.25rem; background: #fff; color: var(--tekst); }
.fase-post.apen .fase-post-kropp { display: block; }
@media (max-width: 767px) {
  .fase-rutenett { display: none; }
  .fase-panel { display: none !important; }
  .fase-trekkspill { display: flex; }
}
.fase-fotnote { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: rgba(249,248,245,0.6); margin-top: 2rem; max-width: 48rem; }

/* --- Bildestripe -------------------------------------------------------- */
.bildestripe { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 768px) { .bildestripe { grid-template-columns: repeat(3, 1fr); } }
.bildestripe figure { margin: 0; }
.bildestripe img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.bildestripe figcaption { font-family: var(--font-lett); font-weight: 300; font-size: 0.8rem; color: var(--tekst-dempet); margin-top: 0.6rem; }

/* --- Bildegalleri ------------------------------------------------------- */
/* Uten bildetekst. Bildene viser anlegg vi ikke kan navngi presist uten å
   gjette, og en gjetning hører ikke hjemme på en side som selger presisjon. */
.galleri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 3rem; }
@media (min-width: 768px) { .galleri { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.galleri button { padding: 0; border: none; background: none; cursor: zoom-in; display: block; border-radius: 8px; overflow: hidden; }
.galleri img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.4s ease; }
.galleri button:hover img { transform: scale(1.04); }

#lyskasse { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
#lyskasse.apen { opacity: 1; pointer-events: auto; }
#lyskasse .modal-bak { background: rgba(15,39,36,0.92); }
#lyskasse img { position: relative; max-width: min(1100px, 100%); max-height: 100%; border-radius: 8px; z-index: 1; }
.lyskasse-lukk { position: absolute; top: 1.25rem; right: 1.5rem; z-index: 2; background: rgba(249,248,245,0.14); border: 1px solid rgba(249,248,245,0.3); color: var(--papir); width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.lyskasse-lukk:hover { background: rgba(249,248,245,0.24); }

/* --- Kontaktseksjon ----------------------------------------------------- */
.kontakt-rutenett { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 768px) { .kontakt-rutenett { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.kontaktkort { background: #fff; border: 1px solid var(--strek); border-radius: 12px; padding: 2rem; }
.kontaktkort-navn { font-family: var(--font-tittel); font-weight: 700; font-size: 1.35rem; }
.kontaktkort-rolle { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gronn-mork); margin-top: 0.3rem; }
.kontaktkort-kraft .kontaktkort-rolle { color: var(--blaa-mork); }
.kontakt-linjer { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--strek); }
.kontakt-linje { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.kontakt-linje a { color: var(--tekst); text-decoration: none; }
.kontakt-linje a:hover { color: var(--omraade); }
.kontakt-linje svg { color: var(--tekst-dempet); flex-shrink: 0; }

/* --- Vårt arbeid, kortkarusell ------------------------------------------ */
.arbeid-topp { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.arbeid-nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
.arbeid-knapp { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--strek); background: #fff; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--tekst); }
.arbeid-knapp:hover { background: var(--gronn-mork); color: #fff; border-color: var(--gronn-mork); }
.arbeid-knapp:disabled { opacity: 0.3; cursor: default; }
.arbeid-spor { overflow: hidden; width: 100%; }
.arbeid-rad { display: flex; gap: 1.25rem; transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); will-change: transform; }
.arbeid-kort { flex: 0 0 calc(50% - 0.625rem); background: #fff; border: 1px solid var(--strek); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: box-shadow 0.25s; }
.arbeid-kort:hover { box-shadow: 0 8px 32px rgba(18,48,44,0.1); }
@media (max-width: 639px) { .arbeid-kort { flex: 0 0 calc(100% - 3rem); min-width: calc(100% - 3rem); } }
.arbeid-bilde { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.arbeid-bilde img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.arbeid-kort:hover .arbeid-bilde img { transform: scale(1.04); }
.arbeid-merke { position: absolute; top: 0.75rem; left: 0.75rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--blaa-mork); color: #fff; }
.arbeid-merke-areal { background: var(--gronn-mork); }
.arbeid-innhold { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.arbeid-tittel { font-family: var(--font-tittel); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.arbeid-tekst { font-family: var(--font-lett); font-weight: 300; font-size: 0.875rem; color: var(--tekst-dempet); margin-top: 0.5rem; line-height: 1.7; flex: 1; }
.arbeid-dato { font-size: 0.75rem; color: var(--tekst-dempet); margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--strek); }
.arbeid-prikker { display: flex; gap: 0.4rem; margin-top: 1.5rem; }
.arbeid-prikk { width: 6px; height: 6px; border-radius: 50%; background: rgba(26,31,27,0.15); border: none; cursor: pointer; padding: 0; transition: all 0.2s; }
.arbeid-prikk.aktiv { width: 20px; border-radius: 3px; background: var(--gronn); }

/* Sprettopp for Vårt arbeid */
#arbeid-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#arbeid-modal.apen { opacity: 1; pointer-events: auto; }
.modal-bak { position: absolute; inset: 0; background: rgba(15,39,36,0.85); backdrop-filter: blur(6px); cursor: pointer; }
.modal-boks { position: relative; background: var(--papir); border-radius: 12px; max-width: 780px; width: calc(100% - 3rem); max-height: 88vh; overflow-y: auto; z-index: 1; }
.modal-lukk { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 1rem 1rem 0; background: var(--papir); z-index: 2; }
.modal-lukk button { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--tekst-dempet); line-height: 1; }
.modal-lukk button:hover { color: var(--tekst); }
.modal-kropp { padding: 0 2rem 2.5rem; }
@media (max-width: 640px) { .modal-kropp { padding: 0 1.25rem 2rem; } }
.modal-merke { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--blaa-mork); }
.modal-tittel { font-family: var(--font-tittel); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0.5rem; line-height: 1.2; }
.modal-ingress { font-size: 1rem; color: var(--tekst-dempet); margin-top: 1rem; line-height: 1.8; font-weight: 600; }
.modal-tekst { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; line-height: 1.85; color: var(--tekst-dempet); }
.modal-tekst p { margin-bottom: 1rem; }
.modal-tekst h3 { font-size: 1.2rem; color: var(--tekst); margin: 1.75rem 0 0.5rem; }
.modal-bilde { width: 100%; border-radius: 8px; margin: 1.5rem 0; display: block; }
.modal-bildetekst { font-size: 0.8rem; color: var(--tekst-dempet); margin: -1rem 0 1.5rem; font-style: italic; }
.modal-meta { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--strek); font-size: 0.8rem; color: var(--tekst-dempet); font-style: italic; }

/* --- Kraftplan i tall --------------------------------------------------- */
.seksjon-tall { padding: 3.5rem 0; }
@media (min-width: 768px) { .seksjon-tall { padding: 4.5rem 0; } }
.tall-rutenett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.75rem; }
.tall-kort { border-top: 1px solid var(--strek-lys); padding-top: 1.1rem; }
.tall { font-family: var(--font-tittel); font-weight: 700; font-size: clamp(2.1rem, 4.2vw, 3rem); color: var(--papir); line-height: 1; }
.tall-tekst { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: rgba(249,248,245,0.65); margin-top: 0.5rem; line-height: 1.6; }
@media (max-width: 639px) {
  /* Stablet tar tre tall altfor mye av skjermen. Tallet og teksten settes
     derfor side om side, slik at hver post blir én rad i stedet for to. */
  .tall-rutenett { grid-template-columns: 1fr; gap: 0.9rem; }
  .tall-kort { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; padding-top: 0.9rem; }
  .tall { font-size: 1.9rem; }
  .tall-tekst { margin-top: 0; font-size: 0.875rem; line-height: 1.45; }
}

/* Bildet i venstre kolonne under «Dette gjør vi». Kolonnen sto med 633 px
   tomrom ved siden av fire avsnitt; bildet fyller det og viser kraft og areal
   i samme bilde. */
.omoss-bilde { margin-top: 2rem; border-radius: 8px; overflow: hidden; display: block; }
.omoss-bilde img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
@media (max-width: 767px) { .omoss-bilde img { aspect-ratio: 16 / 10; } }

/* --- Profiler på Om oss ------------------------------------------------- */
.profil { display: grid; gap: 2.5rem; align-items: start; }
.profil-kraft { --omraade: var(--blaa-mork); }
.profil-areal { --omraade: var(--gronn-mork); }
@media (min-width: 768px) { .profil { grid-template-columns: 260px 1fr; gap: 4rem; } }
.profil + .profil { margin-top: 4.5rem; padding-top: 4.5rem; border-top: 1px solid var(--strek); }
.profil-bilde { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 4px solid var(--papir-2); display: flex; align-items: center; justify-content: center; background: #fff; font-family: var(--font-tittel); font-weight: 700; font-size: 3rem; color: var(--omraade); }
@media (min-width: 768px) { .profil-bilde { width: 260px; height: 260px; } }
.profil-bilde img { width: 100%; height: 100%; object-fit: cover; }
.profil h3 { font-size: 1.6rem; }
.profil-rolle { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--omraade); margin-top: 0.35rem; }
.profil-kontakt { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--strek); }
.profil-kontakt a { font-size: 0.9rem; font-weight: 600; color: var(--omraade); text-decoration: none; }

/* --- Bunntekst ---------------------------------------------------------- */
footer { background: var(--morke); color: var(--papir); }
.bunn-topp { display: grid; gap: 3rem; padding: 4.5rem 0 3.5rem; }
@media (min-width: 900px) { .bunn-topp { grid-template-columns: 4fr 9fr; gap: 4rem; } }
.bunn-logo img { height: 64px; width: auto; display: block; }
.bunn-slagord { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; color: rgba(249,248,245,0.55); margin-top: 1.5rem; max-width: 22rem; line-height: 1.7; }
.bunn-kolonner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
@media (min-width: 640px) { .bunn-kolonner { grid-template-columns: repeat(4, 1fr); } }
.bunn-overskrift { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(249,248,245,0.52); }
.bunn-kolonne ul { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bunn-kolonne a { font-size: 0.875rem; color: rgba(249,248,245,0.62); text-decoration: none; transition: color 0.2s; }
.bunn-kolonne a:hover { color: var(--papir); }
.bunn-kolonne li span { font-size: 0.875rem; color: rgba(249,248,245,0.45); }
.bunn-omraade { font-size: 0.875rem; color: rgba(249,248,245,0.9); font-weight: 600; text-decoration: none; }
.bunn-omraade:hover { color: #fff; }
.bunn-under { margin-top: 0.6rem; padding-left: 0.9rem; border-left: 1px solid var(--strek-lys); display: flex; flex-direction: column; gap: 0.4rem; }
.bunn-bunn { border-top: 1px solid rgba(249,248,245,0.07); padding: 1.25rem 0; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(249,248,245,0.4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bunn-slagord-linje { color: rgba(249,248,245,0.55); }

.bunn-mobil { display: none; }
@media (max-width: 767px) {
  footer { overflow-x: hidden; max-width: 100vw; }
  .bunn-topp { display: none !important; }
  .bunn-mobil { display: block; padding: 3rem 1.5rem 2.5rem; }
  .bunn-mobil img { height: 48px; width: auto; display: block; }
  .bunn-mobil-blokk { margin-top: 1.5rem; }
  .bunn-mobil-blokk p { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(249,248,245,0.52); margin-bottom: 0.5rem; }
  .bunn-mobil-blokk a { display: block; font-size: 0.875rem; color: rgba(249,248,245,0.7); text-decoration: none; padding: 0.15rem 0; }
  .bunn-mobil-blokk span { display: block; font-size: 0.875rem; color: rgba(249,248,245,0.45); }
  .bunn-bunn { padding: 1.25rem 1.5rem; }
}

/* --- Innseiling --------------------------------------------------------- */
.vis { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.vis.synlig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vis { opacity: 1; transform: none; transition: none; }
  .tilnaerming-blokk.vis { transform: none; }
  .tilnaerming-blokk::before { width: 100%; transition: none; }
  .hero-bilde, .hero-bilde.aktiv { transition: opacity 0.4s ease; transform: none; }
  .markor { animation: none; }
  .hero-video, .hero-plakat { animation: none; }
}

/* ---- Aktuelt: sakene som egne sider -------------------------------------
   Bruker samme klasser som sprettoppen, slik at teksten ser lik ut begge
   steder. Oversikten bruker kortene fra forsiden i et rutenett. */
.artikkel { padding-top: 8.5rem; }
.artikkel-inn { max-width: 780px; }
.artikkel .modal-tittel { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.artikkel .modal-bilde { margin-top: 2rem; aspect-ratio: 4 / 3; object-fit: cover; }
.tilbake-mork { color: var(--tekst-dempet); }
.tilbake-mork:hover { color: var(--tekst); }
.modal-lenke { margin-top: 1rem; font-size: 0.85rem; }
.modal-lenke a { color: var(--blaa-mork); text-decoration: none; }
.modal-lenke a:hover { text-decoration: underline; }
.artikkel-liste { padding-top: 8.5rem; }
.arbeid-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.arbeid-rutenett .arbeid-kort { flex: none; text-decoration: none; color: inherit; display: flex; flex-direction: column; }

/* ---- Vanlige spørsmål ----------------------------------------------------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--strek); }
.faq-post { border-bottom: 1px solid var(--strek); }
.faq-post summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.1rem 0; }
.faq-post summary::-webkit-details-marker { display: none; }
.faq-post summary h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.faq-ikon { font-size: 1.4rem; color: var(--omraade); flex-shrink: 0; transition: transform 0.25s; line-height: 1; }
.faq-post[open] .faq-ikon { transform: rotate(45deg); }
.faq-svar { padding: 0 0 1.25rem; padding-right: 2.5rem; }
.faq-svar p { font-family: var(--font-lett); font-weight: 300; font-size: 0.9375rem; line-height: 1.8; color: var(--tekst-dempet); }
.faq-svar p + p { margin-top: 0.75rem; }
.tj-rutenett-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tj-rutenett-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tj-rutenett-3 { grid-template-columns: 1fr; } }