/* BlueTec.no: felles stilark v0.9 (visuelt loft, N9)
   Kilder: Brand Hub 2.0 (tokens, kontrastregler, web-konvensjoner) + designbrief 30/7.
   Regler: lenker = blå 600 · knapper = pill · hvit nav · fokus-ring overalt ·
   easing cubic-bezier(.4,0,.2,1) · prefers-reduced-motion respekteres. */

@import url("../assets/tokens/colors.css");
@import url("../assets/fonts/fonts.css");

:root{
  --radius:16px;
  --radius-s:12px;
  --maxw:1120px;
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --ease:cubic-bezier(.4,0,.2,1);
  /* Hevningsspraak paa canvas. Flateforskjellen mellom hvitt kort og canvas er
     bare 1,06:1, saa den kan ikke baere separasjonen alene: kanten og skyggen
     maa gjoere jobben. Den gamle shadow-card laa paa 4 prosent og var teknisk
     til stede, visuelt fravaerende.
       shadow-card   smaa hevede flater: kort, steg, valgkort, ansatt
       shadow-flate  store flater som skal lese tyngre: kart, kalkulatorpanel
       shadow-lift   hover og aktiv, uendret */
  --shadow-card:0 1px 2px rgba(10,22,40,.05),0 4px 12px rgba(10,22,40,.07);
  --shadow-flate:0 2px 5px rgba(10,22,40,.07),0 12px 30px rgba(10,22,40,.11);
  --shadow-lift:0 14px 34px rgba(10,22,40,.13);
  /* Avstanden mellom to seksjoner er summen av bunnpolstringen over og
     toppolstringen under. Fram til 9. september fantes det tre varianter,
     slim, full og seksjonshode, og hvilken avstand du fikk falt ut av hvilken
     kombinasjon som tilfeldigvis moetes: 128, 152 eller 176. Forsiden gikk
     129, 128, 152, 153, 129, 176 nedover. Fem verdier paa seks overganger, og
     47 px sprang mellom to naboer.
     Kontrollen godkjente det, fordi den sjekket hver overgang mot en liste
     over tillatte verdier og aldri mot naboen. En liste er ikke en rytme.
     Naa: EN avstand mellom seksjoner, og EN stoerre foer avslutningen, fordi
     "her slutter sida" er en ekte pause. Det er rytmen service-, batteri- og
     arcbox-sidene allerede hadde. */
  --sec-pad:64px;        /* halve avstanden mellom to seksjoner: 64+64=128 */
  --sec-pad-slutt:88px;  /* toppen av den avsluttende CTA-en: 64+88=152 */
  --head-gap:32px;   /* seksjonshode -> innhold */
  --flow-gap:14px;   /* mellom tekstelementer i samme seksjon */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'BlueTec Geometric','Outfit',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--bt-ink);background:var(--bt-canvas)}
img{max-width:100%;display:block}
a{color:var(--bt-blue-link)}
:focus-visible{outline:2px solid var(--bt-blue);outline-offset:2px}
::selection{background:var(--bt-blue-100)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* hidden skal bety skjult, ogsaa naar elementet har display fra en klasse.
   Nettleserens egen regel er [hidden]{display:none}, og den taper mot enhver
   klasse som setter display. Fanevelgeren i FAQ-en har display:grid fra
   .valgrad, saa uten JS sto den fram og saa klikkbar ut, enda den var merket
   hidden og ingenting virket. Funnet ved aa se paa sida med JS slaatt av. */
[hidden]{display:none!important}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:var(--sec-pad) 0}
/* Uten flow-root lekker marginen paa siste barn UT av seksjonen og legger
   seg til luften mellom to seksjoner. Maalt 9. september: avstanden mellom
   seksjonene var 128, 152 eller 176 px overalt, unntatt tre steder der en
   etterslepende margin ga 134, 142 og 216. Nesten alle disse marginene er
   usynlige i koden, for de staar paa en komponent lenger nede i fila.
   Seksjonshodet setter display:grid selv, og der er marginene alt lukket. */
.section>.wrap{display:flow-root}
/* Marginen paa siste element lager luft i bunnen av seksjonen som ingen
   har bestemt. flow-root over hindrer at den lekker UT, denne hindrer at
   den lager et hull INNE i seksjonen. Artikkellista paa kunnskapssiden
   hadde 40 px slik. */
.section>.wrap>*:last-child{margin-bottom:0}
/* Seksjonsflater: HVIT og NAVY. To nivaaer, ikke flere.
   Paper (#F4F4F2) var varm graa mens alt annet paa nettstedet er kjoelig
   blaatt. Blaa-50 var saa lys at den paa en hel flate leste som "litt
   ikke-hvit" i stedet for som farge. Begge er ute 10. september, etter at
   Patrick saa dem paa ekte sider: "jeg vil ikke ha paper, jeg vil ikke ha
   lyseblaa, behold alt annet i samme farge."
   Kontrasten paa en side kommer fra de to navy-feltene, ikke fra en tone
   som naesten ikke synes. Paper lever videre der den hoerer hjemme, som
   flate bak bilder og i sceneetikettene, bare ikke som seksjonsbunn. */
.section--navy{background:var(--bt-navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .eyebrow{color:var(--bt-blue-300)}
.section--navy p{color:rgba(255,255,255,.78)}
/* Navy er avslutningen paa siden: alltid full hoeyde, aldri slim, og
   ghost-knappen byttes til lys variant (blaa tekst paa navy er uleselig). */

/* CTA-en gaar rett over i navy footer: ett mellomrom, ikke to. */
main>.section--navy:last-child{padding-top:var(--sec-pad-slutt);padding-bottom:24px}

/* ── Avsluttende CTA som signatur ──────────────────────────────────────
   Foer laa CTA-teksten i venstre halvdel av 1120px mens hoeyre halvdel sto
   tom, saa seksjonen leste som om noe manglet. Naa er den sentrert: da er
   tomrommet likt paa begge sider og leses som luft, ikke som et hull.
   Sentrering skiller ogsaa CTA-en fra alt annet innhold, som er
   venstrestilt. Den er sidens ene avslutning og skal se annerledes ut. */
/* CTA-en er flat navy, ikke en gradient. Den loddrette gradienten som sto
   her, gikk fra navy til #06101E og landet paa footerens daverende farge,
   slik at de to feltene gled sammen uten en linje. Da footeren gikk tilbake
   til navy fra paletten, gikk gradienten fra navy til navy: den gjorde
   ingenting, og den refererte til et token som ikke lenger finnes.
   Skillet mellom CTA og footer er naa haarstreken paa footeren, det samme
   virkemiddelet som skiller to lyse seksjoner. */
main>.section--navy:last-child .wrap{text-align:center}
main>.section--navy:last-child .wrap>*{margin-left:auto;margin-right:auto}
main>.section--navy:last-child h2{max-width:20ch}
main>.section--navy:last-child .wrap>p{max-width:56ch}
main>.section--navy:last-child .wrap>div{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px}
main>.section--navy:last-child .btn{margin-top:8px}
.cta-knapper{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px}
@media(max-width:640px){main>.section--navy:last-child .btn{width:100%;justify-content:center}}
/* Ghost brukes ogsaa paa navy, blant annet telefonknappen i CTA-en. Hvit fyll
   og blaa ramme ville brutt kontrastparet der, saa paa navy holder den seg lys
   og uten skygge: en skygge synes ikke mot moerk grunn uansett. */
.section--navy .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.section--navy .btn--ghost:hover{background:rgba(255,255,255,.18);box-shadow:none}
.section--navy a:not(.btn){color:var(--bt-blue-200,#A6D0EF)}

/* ── Vertikal rytme (én skala for hele siden) ──
   Doble seksjonspolstringer ga 128-192px daudluft mellom blokker mens
   avstanden fra overskrift til innhold var 16px. Her eier seksjonen luften:
   samme flate to ganger paa rad = ett mellomrom, ikke to. */
/* To lyse seksjoner etter hverandre skilles med en hårstrek, ikke med en
   fargeflate. Streken trenger luft paa begge sider, men den luften skal
   ligge INNI den vanlige avstanden, ikke komme i tillegg til den.
   Retting 9. september: seksjonen hadde baade polstring og en wrap-polstring
   over streken. Da ble den ekte avstanden fra siste innhold til neste
   innhold 193 eller 217 px, mot 128 til 176 overalt ellers. Det er det
   hullet som stadig dukket opp paa skjermbildene. Naa har seksjonen null
   polstring over streken, og wrappen holder de 64 under den: forrige
   seksjons bunnluft over streken, 64 under, og totalen lander paa 128 eller
   152 som alle andre overganger. */
/* Naa som flatene er hvit og navy, er regelen enkel: to hvite seksjoner
   etter hverandre faar en haarstrek. Moeter en hvit en navy, er fargeskiftet
   selv skillet, og en strek der ville vaert stoey. */
.section:not(.section--navy) + .section:not(.section--navy){padding-top:0}
.section:not(.section--navy) + .section:not(.section--navy) > .wrap{
  border-top:1px solid var(--bt-hairline);padding-top:var(--sec-pad)}

/* Flyt inne i seksjonen: fast liten avstand mellom tekstledd, fast stor
   avstand fra seksjonshodet ned til selve innholdet. */
.section .wrap>*+*{margin-top:var(--flow-gap)}

/* ── Seksjonshodet ───────────────────────────────────────────────────
   Etikett, overskrift og ingress under hverandre ved venstrekanten.

   Fram til 9. september sto dette som to spalter: overskrift til venstre,
   ingress i en kolonne som begynte 456 px inn i rammen, altsaa midt paa
   sida. Maalt paa hele nettstedet var det 46 seksjoner med to venstrekanter
   (184 og 640) mot 61 med en (184). Det var oppsettet som var i mindretall
   paa sitt eget nettsted, og ingressen ble staaende som en loesrevet boks
   midt paa sida.

   Den opprinnelige klagen var «forskjellig bredde paa seksjoner». Svaret
   paa det er ETT tekstmaal og EN venstrekant, ikke to spalter. */
/* Ingressen har samme tekstmaal som broedteksten. max-width:720px sto her
   fra 9. september og virket aldri: .section .wrap>p har hoyere
   spesifisitet og vant hver gang. En regel som ikke virker er verre enn
   ingen regel, for den faar noen til aa tro at maalet er 720. */
.sekingress{font-size:17px;line-height:1.65;color:var(--bt-muted)}

/* Bred figur fra 3D-universet: en pust mellom to tekstblokker, og et bilde
   av det siden faktisk snakker om. */
.figur{margin:0}
.figur img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.figur figcaption{margin-top:10px;font-size:13px;color:var(--bt-muted)}
.section .wrap>h2{margin-bottom:0}
.section .wrap>.eyebrow{margin-bottom:0}
.section .wrap>*+:is(.cards,.steps,.stats,.segcards,.kalk-grid,.inkl,
.logostripe,.form,.form-rad,.btn,.bildestripe,.ansatte,.seksjonsbilde,.ladeliste,
.knapperad,.chiprad,.pgrid,details){margin-top:var(--head-gap)}
.section .wrap>details+details{margin-top:0}
h1{font-size:clamp(36px,5.2vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--bt-navy)}
h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.12;color:var(--bt-navy);margin-bottom:16px;max-width:760px}
h3{font-size:19px;font-weight:700;color:var(--bt-navy);margin-bottom:6px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--bt-muted);max-width:640px}
/* Blaa 600, ikke 500. Paa hvit gav 500 4,70:1 og saa vidt bestod. Da grunnen
   ble canvas falt det til 4,41:1, altsaa under 4,5. 600 gir 5,89:1 paa canvas.
   Merkevarereglen sier allerede 600 for tekst paa lys grunn. */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bt-blue-link);margin-bottom:14px}
/* ETT tekstmaal for all broedtekst paa nettstedet: 640 px, som gir 58 til
   65 tegn per linje. Ideallengden for lesbar tekst er 45 til 75 tegn, saa
   dette ligger midt i den. Teksten skal IKKE fylle hele 1072-rammen: en
   linje paa 130 tegn er tung aa lese, og oeyet mister returen. */
.section .wrap>p{max-width:640px}
/* Vanlige punktlister i brødtekst (uten klasse): riktig innrykk og luft */
.section .wrap ul:not([class]){max-width:640px;padding-left:22px}
/* Avstand mellom punktene, men ikke etter det siste: den marginen legger
   seg til luften i bunnen av seksjonen. */
.section .wrap ul:not([class]) li{margin:6px 0}
.section .wrap ul:not([class]) li:last-child{margin-bottom:0}

/* Knapper: pill (regel) */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:700;border-radius:99px;padding:13px 26px;cursor:pointer;text-decoration:none;border:none;transition:background var(--motion-base) var(--ease),color var(--motion-base) var(--ease),transform var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease)}
/* Knapper paa lys grunn: 2 px ramme og myk skygge. Paa canvas forsvant den
   gamle 1 px blaa 200-ramma nesten helt, og knappene leste som tekst. Ramma er
   en moerkere tone av knappens egen farge, ikke en ny farge. */
.btn--primary{background:var(--bt-blue);color:#fff;border:2px solid transparent;
  box-shadow:0 4px 14px rgba(10,22,40,.18),0 2px 4px rgba(10,22,40,.10)}
.btn--primary:hover{background:var(--bt-blue-hover);transform:translateY(-1px);
  box-shadow:0 7px 20px rgba(10,22,40,.22),0 2px 5px rgba(10,22,40,.12)}
.btn--ghost{background:var(--bt-white);color:var(--bt-blue-link);border:2px solid var(--bt-blue-600,#0063A8);
  box-shadow:0 3px 10px rgba(10,22,40,.12),0 1px 3px rgba(10,22,40,.08)}
.btn--ghost:hover{background:var(--bt-blue-50);
  box-shadow:0 5px 14px rgba(10,22,40,.16),0 1px 4px rgba(10,22,40,.10)}
.btn--light{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn--light:hover{background:rgba(255,255,255,.18)}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Header / menylinje (hvit, sticky) ── */
/* Ankerlenker maa stoppe UNDER menylinja, ikke bak den.
   Menylinja er sticky og 71 px paa skjerm, 67 paa mobil. Uten
   scroll-margin-top lander hvert eneste anker paa nettstedet noeyaktig i
   underkant av den, eller helt bak den. Maalt 10. september:
   #bakkemontert traff 71 px fra vindusstart, altsaa kant i kant med menyen,
   #tak det samme, og #carport traff 0 og laa helt skjult.
   Alle 41 ankerlenkene oppfoerte seg slik. Patrick fant det paa
   "Bakkemontert" i menyen, som saa ut til aa ikke gjoere noe.
   --meny-h maales av site.js, med en fornuftig reserve hvis skriptet
   uteblir. De 24 ekstra er pust, saa maalet ikke klistrer seg til kanten. */
:where(main [id], main [id] *:first-child){
  scroll-margin-top:calc(var(--meny-h, 71px) + 24px)}

.siteheader{position:sticky;top:0;z-index:90;background:var(--bt-canvas);border-bottom:1px solid var(--bt-hairline);transition:box-shadow var(--motion-base) var(--ease)}
.siteheader.scrolled{box-shadow:0 6px 24px rgba(10,22,40,.08)}
.siteheader__row{display:flex;align-items:center;gap:2px;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.siteheader__logo img{height:30px;display:block}
.siteheader__logo{margin-right:20px}
.nav-l{display:inline-flex;align-items:center;gap:5px;color:var(--bt-ink);font-size:15px;font-weight:500;padding:9px 14px;border-radius:8px;text-decoration:none;transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.nav-l:hover{color:var(--bt-blue-link);background:var(--bt-blue-50)}
.nav-l[aria-expanded="true"],.nav-l--active{color:var(--bt-blue-link);font-weight:700}
.nav-phone{color:var(--bt-blue-link);font-weight:600}
.nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--bt-blue);color:#fff;font-size:14px;font-weight:700;padding:10px 20px;border-radius:99px;margin-left:8px;text-decoration:none;transition:background var(--motion-base) var(--ease)}
.nav-cta:hover{background:var(--bt-blue-hover)}
.spacer{flex:1}

/* Megameny */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bt-canvas);border-bottom:1px solid var(--bt-hairline);box-shadow:0 16px 40px rgba(10,22,40,.12)}
.mega.open{display:block}
.mega__inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px 20px}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 10px}
.mega-i{display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:8px;color:var(--bt-ink);text-decoration:none}
.mega-i:hover{background:var(--bt-blue-50)}
.mega-i svg{flex:0 0 22px;margin-top:1px;color:var(--bt-blue)}
.mega-i b{display:block;font-size:14px;font-weight:700}
.mega-i span{font-size:12px;color:var(--bt-muted);line-height:1.4}
.mega__segs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--bt-hairline)}
.mega__segs .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bt-muted);margin-right:4px}
.seg-p{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--bt-blue-200,#A6D0EF);border-radius:99px;font-size:13px;font-weight:600;color:var(--bt-blue-700,#004E86);background:#fff;text-decoration:none}
.seg-p:hover{background:var(--bt-blue-100)}

/* Mobilmeny */
.hamb{display:none;background:none;border:1px solid var(--bt-hairline);border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--bt-navy)}
/* Mobilmenyen er et fast panel under menylinja, ikke en blokk i sidestroemmen.
   Foer laa den inne i headeren og skjoev innholdet nedover. Menyen ble da like
   hoey som sitt eget innhold, og for aa se de nederste punktene maatte man
   rulle HELE sida. Paa en telefon betyr det at «Kontakt» nederst i gruppa
   BlueTec laa under skjermkanten, uten at noe tydet paa at det var mer.
   Naa staar panelet stille under menylinja og ruller i seg selv.
   --mnav-topp settes av js/site.js, som maaler menylinja. Tallet gjettes
   ikke: logo og hamburgerknapp kan endre hoeyde, og et gjettet tall ville
   gitt enten et hull eller en overlapp. 59px er bare et fornuftig
   utgangspunkt hvis maalingen ikke har rukket aa kjoere. */
.mnav{display:none;position:fixed;left:0;right:0;top:var(--mnav-topp,59px);bottom:0;
  background:var(--bt-canvas);border-top:1px solid var(--bt-hairline);
  padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px) + var(--samtykke-hoyde,0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mnav a{display:block}
body.mnav-open .mnav{display:block}
/* Sida bak skal ikke rulle mens menyen er aapen. Uten dette ruller
   fingeren videre paa innholdet under naar menyen naar bunnen. */
body.mnav-open{overflow:hidden}
/* Tre handlinger paa mobil: regn, ring, skriv. Kontakt laa foer nederst i
   menyen som punkt 14, under fire grupper, og var i praksis usynlig paa
   telefon. Beregn pris tar hele foerste rad, de to maatene aa naa et
   menneske paa deler den andre. */
.mnav__handling{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.mnav__handling .nav-cta{grid-column:1 / -1}
.mnav__handling .nav-cta{justify-content:center;margin-left:0;padding:12px 16px}
.mnav__tlf{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;
  border:1px solid var(--bt-blue-200,#A6D0EF);border-radius:99px;font-size:14px;font-weight:700;
  color:var(--bt-blue-link);text-decoration:none}
.mnav__gruppe{margin-top:14px;padding-top:12px;border-top:1px solid var(--bt-hairline)}
.mnav__lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bt-muted);padding:0 14px 6px}
@media(max-width:400px){.mnav__handling{grid-template-columns:1fr}}

/* ── Hero: fullbredde bilde + navy gradient ── */
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--bt-navy) 20%,var(--bt-blue-800,#013A63) 100%);color:#fff}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* To lag: et vannrett slor som sikrer kontrast under teksten uansett hvor
   lyst fotoet er, og et svakt lag fra toppen saa den hvite menylinja faar
   en kant aa hvile mot. Foer var gradienten kalibrert for forsidebildet,
   og paa lysere foto som borettslag ble tittelen graa. */
.hero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(10,22,40,.94) 0%,rgba(10,22,40,.82) 38%,rgba(10,22,40,.46) 72%,rgba(10,22,40,.34) 100%),
  linear-gradient(180deg,rgba(10,22,40,.34) 0%,rgba(10,22,40,0) 32%)}
/* Fokuspunkt per bilde: standard er midten, noen foto trenger lavere
   eller hoeyere utsnitt for aa ikke beskjaere folk eller tak. */
.hero__bg--lavt{background-position:center 72%}
.hero__bg--hoyt{background-position:center 28%}
.hero__inner{position:relative;padding-top:104px;padding-bottom:96px}
.hero--tall .hero__inner{padding-top:148px;padding-bottom:140px}
.hero .eyebrow{color:var(--bt-blue-300,#6FB2E3)}
.hero h1{color:#fff;max-width:720px}
.hero .lead{color:rgba(255,255,255,.88);margin:20px 0 0}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
/* ── Hero med scrollscene (forsiden). Bildesekvens fra Blender, tegnet på et
   lerret mens du scroller, med jevn avspilling i js/scene.js. Uten JS er
   seksjonen en vanlig hero: plakaten ligger som bakgrunn, teksten staar over.
   Med JS (data-scene-aktiv) blir seksjonen fem skjermhøyder høy og scenen
   sticky under menylinja. Etikett og tall er HTML, aldri bakt i bildet. ── */
.hero--scene{background:var(--bt-navy)}
.hero--scene .hero__stage{position:relative;min-height:100%}
.hero--scene .hero__plakat,.hero--scene .hero__plakat img,
.hero--film .hero__plakat,.hero--film .hero__plakat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero--scene .hero__plakat::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,40,.55) 0%,rgba(10,22,40,.25) 55%,rgba(10,22,40,0) 100%)}
.hero--scene .hero__lerret{display:none}
.hero--scene .hero__inner--scene{position:relative;z-index:2}
.hero--scene .scene__etikett,.hero--scene .scene__tall,.hero--scene .scene__fremdrift{display:none}
.hero--scene[data-scene-aktiv]{height:calc(var(--scene-hoyder,5) * 100vh);background:var(--bt-navy);overflow:visible}
.hero--scene[data-scene-aktiv] .hero__stage{position:sticky;top:var(--sh,60px);height:calc(100vh - var(--sh,60px));min-height:0;overflow:hidden}
.hero--scene[data-scene-aktiv] .hero__plakat::after{display:none}
.hero--scene[data-scene-aktiv] .hero__lerret{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero--scene[data-scene-aktiv] .hero__inner--scene{position:absolute;left:0;right:0;bottom:clamp(24px,9vh,110px);padding:0 24px;margin:0 auto;opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.hero--scene[data-scene-aktiv] .hero__inner--scene.vis{opacity:1;transform:none;pointer-events:auto}
.hero--scene[data-scene-aktiv] .hero__inner--scene>*{max-width:40ch}
.hero--scene[data-scene-aktiv] .hero__inner--scene .eyebrow,.hero--scene[data-scene-aktiv] h1,.hero--scene[data-scene-aktiv] .lead,.hero--scene[data-scene-aktiv] .hero__cta{animation:none;opacity:1;transform:none}
/* Slør nederst i scenen. Teksten ligger over bildet, og bildene skifter
   underveis: en lys himmel eller en sandfarget byggeplass gjorde ingressen
   nesten uleselig med bare tekstskygge. Sløret ligger over lerretet og under
   teksten, og tar bare den nederste tredelen, så motivet står igjen. */
.hero--scene[data-scene-aktiv] .hero__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);background:linear-gradient(to top,rgba(10,22,40,.85) 0%,rgba(10,22,40,.66) 20%,rgba(10,22,40,.3) 44%,rgba(10,22,40,0) 68%),linear-gradient(100deg,rgba(10,22,40,.5) 0%,rgba(10,22,40,.18) 45%,rgba(10,22,40,0) 72%)}
/* Sloret finnes for at ingressen skal vaere lesbar over bildet. Ingressen
   vises bare i starten, men sloret laa paa hele veien og morknet motivet
   med opptil 85 prosent i nedre tredel. Det spiste opp eksponeringen som er
   maalt inn i renderen. Naa foelger det ingressen inn og ut. Etikettene og
   tallkortet har sin egen bakgrunn og trenger det ikke. */
.hero--scene[data-scene-aktiv].scene-slor .hero__stage::after{opacity:1}
.hero--scene[data-scene-aktiv] .hero__inner--scene h1,.hero--scene[data-scene-aktiv] .hero__inner--scene .lead{text-shadow:0 2px 18px rgba(10,22,40,.6)}
.hero--scene[data-scene-aktiv] .scene__etikett{display:block;position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s var(--ease);transform:translate(-50%,-100%)}
.hero--scene[data-scene-aktiv] .scene__etikett.vis{opacity:1}
/* --et-dx skyver navneskiltet sidelengs naar punktet ligger for naer kanten,
   mens streken og prikken blir staaende paa punktet. Uten dette ble
   "Solceller paa fasaden" klippet i venstre kant paa telefon. Settes av js. */
/* Alt som ligger over foto faar myk skygge. Det er det eneste som skiller
   dem fra bildet, og bakgrunnen skifter under dem hele veien. */
.scene__etikett-navn,.scene__etikett-tall{box-shadow:0 6px 18px rgba(10,22,40,.35)}
.hero--scene[data-scene-aktiv] .scene__tall{box-shadow:0 14px 34px rgba(10,22,40,.22)}
.scene__etikett-navn{display:block;background:var(--bt-paper);color:var(--bt-navy);font-weight:700;font-size:15px;padding:8px 12px 6px;white-space:nowrap;margin-bottom:38px;position:relative;left:50%;transform:translateX(calc(-50% + var(--et-dx, 0px)))}
.scene__etikett-tall{display:block;background:var(--bt-navy);color:#fff;font-size:12px;padding:4px 10px 5px;white-space:nowrap;position:absolute;left:50%;transform:translateX(-50%);top:36px}
/* Uten andrelinje skal brikka vekk helt, ellers staar den igjen som en tom navy klatt. */
.scene__etikett-tall:empty{display:none}
.scene__etikett-strek{position:absolute;left:50%;bottom:8px;width:1px;height:26px;background:var(--bt-paper);transform:translateX(-50%)}
.scene__etikett-prikk{position:absolute;left:50%;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--bt-blue);border:2px solid var(--bt-paper);transform:translate(-50%,50%)}
.hero--scene[data-scene-aktiv] .scene__tall{display:block;position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(24px,9vh,110px);z-index:2;background:var(--bt-paper);color:var(--bt-navy);padding:26px 30px 22px;max-width:34ch;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hero--scene[data-scene-aktiv] .scene__tall.vis{opacity:1;transform:none}
.scene__tall .eyebrow{color:var(--bt-blue-600,#0063A8);margin:0 0 8px}
.scene__tall b{display:block;font-size:clamp(30px,3.8vw,50px);font-weight:800;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* Boksen er laget for et TALL. Er teksten en hel setning, settes den mindre
   (--lang), ellers dekker den halve skjermen: batterisiden hadde 66 tegn i
   50 px og en boks på 49 prosent av vindushøyden.
   Underteksten er den andre grunnen til at boksen blir høy: 130 tegn i et
   mål på 34ch blir fem linjer. Da får boksen et bredere mål (--bred), så
   tallet beholder størrelsen og boksen likevel blir lavere.
   Begge målene må stå med samme spesifisitet som regelen over, ellers
   vinner 34ch og variantene gjør ingenting. */
.hero--scene[data-scene-aktiv] .scene__tall--bred{max-width:46ch}
.hero--scene[data-scene-aktiv] .scene__tall--lang{max-width:42ch}
.scene__tall--lang b{font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.005em}
.scene__tall small{display:block;margin-top:10px;font-size:14px;color:var(--bt-muted)}
.hero--scene[data-scene-aktiv] .scene__fremdrift{display:block;position:absolute;right:18px;top:50%;transform:translateY(-50%);width:2px;height:120px;background:rgba(255,255,255,.25);z-index:2}
.scene__fremdrift i{display:block;width:100%;height:0;background:var(--bt-blue-300,#6FB2E3)}
@media(max-width:720px){
  .hero--scene[data-scene-aktiv] .hero__inner--scene{left:16px;right:16px;bottom:20px;padding:0}
  .hero--scene[data-scene-aktiv] .scene__tall{left:16px;right:16px;bottom:20px;max-width:none;padding:20px}
  .hero--scene[data-scene-aktiv] .hero__cta .btn{width:auto}
}
@media(prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero h1,.hero .lead,.hero__cta{opacity:0;transform:translateY(14px);animation:hero-inn 420ms var(--ease) forwards}
  .hero h1{animation-delay:60ms}
  .hero .lead{animation-delay:120ms}
  .hero__cta{animation-delay:180ms}
}
@keyframes hero-inn{to{opacity:1;transform:none}}

/* ── Utkastvisning ─────────────────────────────────────────────────────
   Interne markoerer (.arvm og .ph) er SKJULT i normal visning og vises kun
   med ?utkast=1 i adressen. De staar fortsatt i kilden og i DOM-en, ingenting
   er skrevet bort.
   Retningen er valgt med vilje: skjult er standard, JS slaar PAA. Hvis JS
   feiler forblir de skjult, og en demo blir ren i stedet for aa sproekke.
   Det er motsatt av fail-safe-regelen for innhold, og det er riktig her,
   fordi dette ikke er innhold for kunden. */
.arvm,.ph{display:none}
body.vis-utkast .arvm{display:block}
body.vis-utkast .ph{display:block}
body.vis-utkast .card .arvm,body.vis-utkast .step .arvm{display:block}

/* Tydelig merke saa ingen forveksler utkastvisning med den ekte siden */
.utkastmerke{position:fixed;right:14px;bottom:14px;z-index:200;background:var(--bt-navy);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:99px;box-shadow:0 8px 24px rgba(10,22,40,.28)}

/* ── Diskret merking av utkast/arv (interne etiketter) ──
   .arvm står ALLTID nederst i seksjonen/kortet (build flytter dem dit). */
.ph{border:1px dashed var(--bt-hairline);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--bt-muted);background:transparent;max-width:640px;margin-top:8px}
.ph--venter{border-color:var(--bt-hairline);background:transparent}
.ph .tag{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:1px 8px;border-radius:99px;margin-bottom:6px;background:transparent;color:var(--bt-muted);border:1px solid var(--bt-hairline)}
.arvm{font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--bt-muted);opacity:.45;margin:14px 0 0;max-width:680px}
.arvm+.arvm{margin-top:4px}
.section--navy .arvm{color:rgba(255,255,255,.55)}
.card .arvm,.step .arvm{margin-top:auto;padding-top:10px}

/* ── Kort og grids ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;align-items:stretch}


.card{background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:var(--radius);padding:24px;text-decoration:none;color:var(--bt-ink);display:flex;flex-direction:column;height:100%;box-shadow:var(--shadow-card);transition:box-shadow var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease),border-color var(--motion-slow) var(--ease)}
a.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px);border-color:var(--bt-blue-200)}
div.card:hover{box-shadow:0 8px 24px rgba(10,22,40,.08)}
.card>svg{color:var(--bt-blue);margin-bottom:12px;flex:0 0 auto;align-self:flex-start}
.card h3{font-size:17.5px}
/* Fast tittelhoyde, samme grep som referansekortene fikk. Uten den starter
   broedteksten paa ulik hoyde bortover raden saa snart en tittel brekker til
   to linjer, og da ser raden skjev ut selv om kortene er like hoye.
   Ansattkortene har sin egen, mindre overskrift og holdes utenfor. */
.card:not(.ansatt) h3{line-height:1.3;min-height:2.6em}
.card .q{font-size:13.5px;color:var(--bt-blue-link);font-weight:700;margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px}
.card p{font-size:14px}
/* Et kort med to avsnitt hadde ingen luft mellom dem: teksten gikk rett
   over i neste avsnitt og leste som ett langt stykke. Avstanden ligger som
   margin-top paa det NESTE avsnittet, ikke som margin-bottom paa det forrige,
   saa den aldri kan bli staaende under det siste elementet i kortet. */
.card p + p{margin-top:10px}

/* ── Referansekort ──────────────────────────────────────────────────────
   ETT oppsett for alle prosjekter: medieflate 170px, navn i en tittelblokk
   med fast minstehoeyde, saa kWp, saa sted. Fast tittelhoeyde er poenget:
   uten den havner kWp-tallet paa ulik hoeyde bortover raden avhengig av om
   navnet brekker til to linjer. Prosjekter uten foto faar et datakort med
   segmentikon i stedet for en tom hvit boks ved siden av bildekortene. */
.refcard{position:relative;display:flex;flex-direction:column;height:100%;background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease),border-color var(--motion-slow) var(--ease)}
.refcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px);border-color:var(--bt-blue-200)}
.refcard__media{height:170px;flex:0 0 170px;width:100%;object-fit:cover;object-position:center}
.refcard__data{height:170px;flex:0 0 170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bt-navy) 0%,var(--bt-blue-800,#013A63) 100%)}
.refcard__data svg{width:42px;height:42px;color:var(--bt-blue-300,#6FB2E3)}
.refcard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 20px 20px}
.refcard__navn{font-size:16px;font-weight:700;color:var(--bt-navy);line-height:1.3;margin:0;min-height:2.6em}
.refcard__kwp{font-size:25px;font-weight:800;color:var(--bt-navy);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:4px}
.refcard__meta{font-size:13px;color:var(--bt-muted);margin-top:auto;padding-top:8px}
/* Naar prosjektet ikke publiseres med effekttall staar typen i tallets plass.
   Den skal ikke se ut som et tall, derfor mindre og dempet. */
.refcard__kwp--tekst{font-size:15px;font-weight:700;color:var(--bt-muted);letter-spacing:0;margin-top:6px}

/* ── Ladeanlegg ────────────────────────────────────────────────────────
   Tjue anlegg uten effekttall og uten foto. De fortjener ikke kort som
   later som de har mer innhold enn de har: navn og sted, i en tett liste
   med harlinjer. Fire kolonner ganger fem rader gaar akkurat opp. */
.ladeliste{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--bt-hairline)}
.ladekort{display:flex;flex-direction:column;padding:13px 20px 13px 0;
  border-bottom:1px solid var(--bt-hairline)}
.ladekort__navn{font-size:15px;font-weight:700;color:var(--bt-navy);line-height:1.3}
.ladekort__meta{font-size:12.5px;color:var(--bt-muted);margin-top:3px}
/* Prosjektlista på referansesiden: samme rutenett, men med kWp-tallet
   framhevet, fordi det er det man skummer etter. Tre spalter, ikke fire:
   navnene er lengre enn på ladeanleggene. Rader med panel er lenker. */
.ladeliste--tall{grid-template-columns:repeat(3,1fr);column-gap:28px}
.ladekort__tall{font-size:17px;font-weight:800;color:var(--bt-navy);
  letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
a.ladekort--lenke{text-decoration:none;transition:color var(--motion-fast) var(--ease)}
a.ladekort--lenke .ladekort__navn{color:var(--bt-blue-600,#0063A8)}
a.ladekort--lenke:hover .ladekort__navn{text-decoration:underline}
@media(max-width:900px){.ladeliste--tall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ladeliste--tall{grid-template-columns:1fr}}
@media(max-width:900px){.ladeliste{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ladeliste{grid-template-columns:repeat(2,1fr)}}
/* Kompakt variant: brukes i grids der INGEN prosjekter har foto. Da ville
   18 like navy-fliser blitt en vegg. Datakortet er for rader som blander
   foto og ikke-foto, den kompakte er for rader uten foto i det hele tatt. */
.refcard--kompakt .refcard__body{padding:20px 20px 22px}
.refcard--kompakt .refcard__navn{min-height:2.6em}

/* Kort som lenker til et prosjektpanel. Kortet ser likt ut, det faar bare
   en statusetikett over bildet og en linje som sier at det finnes mer.
   position:relative staar i grunnregelen over, ikke her: to definisjoner
   av samme klasse langt fra hverandre er hvordan .inkl-rotet oppsto. */
a.refcard{text-decoration:none;color:inherit;display:flex}
.refcard__status{position:absolute;top:12px;left:12px;z-index:1;
  background:rgba(10,22,40,.82);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.refcard__mer{display:block;font-size:13px;font-weight:700;
  color:var(--bt-blue-link);margin-top:10px}
.refcard--lenke:hover .refcard__mer{text-decoration:underline}

/* ── Paagaaende prosjekt ───────────────────────────────────────────────
   Bredt baand, ikke et kort i rutenettet. Et anlegg under bygging har ingen
   ferdige tall aa stille opp med i en rad, og fortjener plassen til aa
   forklare seg. Bildet og knappen aapner samme popup som kortene. */
.pgrid{display:grid;grid-template-columns:1.05fr 1fr;
  border:1px solid var(--bt-hairline);border-radius:var(--radius);overflow:hidden;
  background:var(--bt-white);box-shadow:var(--shadow-card);
  transition:box-shadow var(--motion-slow) var(--ease)}
.pgrid:hover{box-shadow:var(--shadow-lift)}
.pgrid__media{position:relative;display:block;min-height:340px}
.pgrid__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pgrid__tekst{padding:34px 36px}
.pgrid__tekst h3{font-size:clamp(20px,2.2vw,26px);color:var(--bt-navy);line-height:1.2}
.pgrid__tekst>p{font-size:15px;margin-top:10px}
.pgrid__tall{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--bt-hairline);margin-top:24px}
.pgrid__tall div{padding:14px 14px 13px;border-left:1px solid var(--bt-hairline)}
.pgrid__tall div:first-child{border-left:0;padding-left:0}
.pgrid__tall b{display:block;font-size:20px;font-weight:800;color:var(--bt-navy);
  letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgrid__tall span{display:block;font-size:12px;color:var(--bt-muted);margin-top:4px;line-height:1.4}
.pgrid .btn{margin-top:26px}
@media(max-width:820px){
  .pgrid{grid-template-columns:1fr}
  .pgrid__media{min-height:0;aspect-ratio:16/9}
  .pgrid__tekst{padding:24px 22px 28px}
  .pgrid__tall{grid-template-columns:1fr}
  .pgrid__tall div{border-left:0;padding-left:0;border-top:1px solid var(--bt-hairline)}
  .pgrid__tall div:first-child{border-top:0}
}

/* ── Prosjektpanel ─────────────────────────────────────────────────────
   Detaljene om ett prosjekt. To visningsmaater av samme markup:
   UTEN JS  panelet er skjult til #ankeret treffer det, da vises det som en
            vanlig seksjon i sida. Innholdet kan altsaa ikke bli borte.
   MED JS   site.js setter klassen js-pmodal paa <html>, loefter panelet inn i
            et overlegg og lar det oppfoere seg som en popup.
   Rekkefoelgen under er ikke tilfeldig: js-pmodal-reglene maa ha hoeyere
   spesifisitet enn :target, ellers ville ankeret vist panelet to steder. */
/* Panelene er skjult til de aapnes. Marginen laa paa beholderen og tok
   derfor 14 px i bunnen av seksjonen selv naar ingenting var synlig. Den
   ligger naa paa selve panelet, saa den bare finnes naar panelet vises. */
.section .wrap>.prosjektpaneler{margin-top:0}
.prosjektpanel{margin-top:var(--head-gap)}
.prosjektpanel{display:none;position:relative;background:var(--bt-white);
  border:1px solid var(--bt-hairline);border-radius:var(--radius);overflow:hidden;
  max-width:760px;margin:0 auto}
.prosjektpanel:target{display:block}
html.js-pmodal .prosjektpanel{display:none}
html.js-pmodal .pmodal .prosjektpanel{display:block;border:0;margin:0;max-width:none}

.prosjektpanel__bilde{width:100%;aspect-ratio:16/9;object-fit:cover}
.prosjektpanel__lukk{position:absolute;top:14px;right:14px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;border-radius:99px;
  background:rgba(10,22,40,.72);color:#fff;text-decoration:none;z-index:2;
  transition:background var(--motion-base) var(--ease)}
.prosjektpanel__lukk:hover{background:var(--bt-navy)}
.prosjektpanel__lukk .ic{width:18px;height:18px}
.prosjektpanel__innhold{padding:26px 30px 30px}
.prosjektpanel__status{display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--bt-blue-link);
  background:var(--bt-blue-50);border-radius:99px;padding:5px 12px}
.prosjektpanel h2{font-size:clamp(24px,3vw,30px);line-height:1.15;margin-top:12px}
.prosjektpanel__ingress{font-size:16px;margin-top:10px}
.prosjektpanel__bildetekst{font-size:12.5px;color:var(--bt-muted);margin-top:8px}
.prosjektpanel h3{font-size:15px;margin-top:26px}
/* Kildenotisen staar rett etter en punktliste eller en tidslinje i fire av
   de seks panelene som finnes, og i alle tolv de gamle. Uten luft leses den
   som et punkt til i lista, bare uten kule. */
.prosjektpanel .notis{margin-top:18px}
.prosjektpanel p{font-size:15px}

.ptall{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--bt-hairline);margin-top:22px}
.ptall__post{padding:14px 18px 13px;border-bottom:1px solid var(--bt-hairline);
  border-left:1px solid var(--bt-hairline)}
.ptall__post:nth-child(2n+1){border-left:0;padding-left:0}
/* Et ODDE antall tall: siste post tar begge kolonnene.
   Alle seks referansene som fantes da denne komponenten ble laget har
   noeyaktig fire tall, saa den har aldri moett et odde antall. De gamle
   referansene har fra null til fire, og seks av tolv har et odde antall.
   Uten denne regelen stopper den avsluttende haarstreken midt paa siden,
   og ved siden av staar en tom celle. Regelen endrer ingenting paa de seks
   som finnes, og lukker lista i bunnen slik lister skal. */
.ptall__post:last-child:nth-child(odd){grid-column:1/-1}
.ptall__post b{display:block;font-size:22px;font-weight:800;color:var(--bt-navy);
  letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptall__post span{display:block;font-size:12.5px;color:var(--bt-muted);margin-top:4px;line-height:1.45}

/* Teknisk illustrasjon og lenke til 3D-modellen inne i panelet */
.pmodell{margin-top:18px}
.pmodell .ic{width:15px;height:15px}
.pfig{margin-top:20px}
.pfig img{width:100%;border-radius:var(--radius-s);background:var(--bt-paper)}
.pfig figcaption{font-size:12.5px;color:var(--bt-muted);margin-top:8px;line-height:1.45}

.pliste{list-style:none;margin-top:10px}
.pliste li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;margin-top:8px}
.pliste li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:99px;background:var(--bt-blue-300)}
.ptid{list-style:none;margin-top:10px}
.ptid li{display:flex;gap:16px;font-size:14px;padding:9px 0;
  border-bottom:1px solid var(--bt-hairline)}
.ptid li:last-child{border-bottom:0}
.ptid b{flex:0 0 132px;color:var(--bt-navy);font-weight:700}
.ptid span{color:var(--bt-muted)}

/* Overlegget selve popup-en ligger i.
   MERK: moerkflaten fader IKKE inn. Et forsoek paa det gjorde popup-en
   usynlig i faner som ikke er i front, fordi nettleseren struper animasjoner
   der, samtidig som siden bak er laast. Da sitter man fast foran ingenting.
   Naa er flaten synlig med en gang, og bare boksen har en liten bevegelse. */
.pmodal{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;
  align-items:flex-start;padding:28px 16px;overflow-y:auto;
  background:rgba(10,22,40,.72)}
.pmodal[hidden]{display:none}
.pmodal__boks{position:relative;width:min(760px,100%);background:var(--bt-white);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px rgba(10,22,40,.30);
  animation:pmodal-boks var(--motion-base) var(--ease)}
/* Boksen har fast hoeyde og RULLER INNVENDIG. Grunnen er lukkeknappen: naar
   hele overlegget rullet, forsvant den ut av syne saa snart man leste nedover,
   og paa mobil er verken Escape eller klikk utenfor noe man ser. Naa staar
   knappen i ro paa boksen mens innholdet ruller under den. */
html.js-pmodal .pmodal{align-items:center;overflow:hidden}
html.js-pmodal .pmodal__boks{display:flex;max-height:calc(100vh - 56px)}
.pmodal__rull{width:100%;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pmodal__boks>.prosjektpanel__lukk{position:absolute;top:14px;right:14px;z-index:3}
/* Bare boksen animeres, ikke moerkflaten. Stopper animasjonen opp, staar
   boksen bare 12 piksler feil et oeyeblikk. Ingenting blir usynlig. */
@keyframes pmodal-boks{from{transform:translateY(12px)}}
/* position:fixed, ikke bare overflow:hidden. Uten dette hopper siden bak
   popup-en til toppen naar den aapnes, og man mister plassen sin. */
body.pmodal-open{position:fixed;width:100%;overflow:hidden}

@media(max-width:700px){
  .prosjektpanel__innhold{padding:22px 20px 26px}
  .ptall{grid-template-columns:1fr}
  .ptall__post{border-left:0;padding-left:0}
  .ptid li{flex-direction:column;gap:2px}
  .ptid b{flex:none}
  .pmodal{padding:0}
  .pmodal__boks{border-radius:0}
  html.js-pmodal .pmodal__boks{max-height:100vh;height:100vh}
}

/* ── Smaakomponenter som erstatter inline-stiler ───────────────────────
   Alt under her fantes foer som style="..." i Python-strengene. Poenget med
   aa flytte det hit er at hver rolle faar EN stoerrelse. Smaanotisene laa
   foer paa 12, 12.5, 13 og 14px om hverandre, og ansattkortene hadde
   overskrifter paa 14.5 og 15px. Naa er det én verdi per rolle. */

/* Samtykkeboksen i kontaktskjemaet (A6). Boksen og teksten ligger på samme
   linje uten at teksten kryper inn under boksen når den brytes. Den skal
   være lett å se, men ikke rope: samtykket er et valg, ikke en advarsel. */
.samtykke{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.5;max-width:640px;cursor:pointer}
/* [type="checkbox"] staar her av en grunn, ikke for pynt. Uten den er
   `.samtykke input` like spesifikk som `.form input` lenger nede (begge
   klasse + element), og den SISTE i fila vinner. Da fikk avkryssingsboksen
   width:100%, altsaa 342px, spennet ble presset til 0 og teksten stakk 77px
   ut: kontaktsiden var 467px bred paa en 390px skjerm. Attributtvelgeren
   loefter regelen over, uansett hvor i fila den staar. */
.samtykke input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;
  margin-top:2px;accent-color:var(--bt-blue)}
.samtykke input[aria-invalid="true"]{outline:2px solid var(--bt-blue);outline-offset:2px}
.samtykke span{flex:1;min-width:0}

/* ── Samtykkeboksen ──────────────────────────────────────────────────
   Ligger nederst, fast i vinduet, og dekker aldri hele skjermen: en boks
   som sperrer siden er en port, og vi ber om lite. Hvit flate med ramme og
   skygge, som alt annet som er hevet over canvas. Ingen egen farge og ingen
   rød eller grønn: knappene er de samme primaer og ghost som ellers, slik at
   den leser som en del av nettstedet og ikke som et fremmedlegeme.

   position:fixed uten transform paa noen forfar. Boksen henger paa <body>,
   ikke inne i en seksjon, nettopp fordi bevegelsesregelen legger transform
   paa seksjoner og det ville gjort fixed om til absolute. Se kapittel 8 i
   nettside-skillen. */
.samtykkeboks{
  position:fixed;left:0;right:0;bottom:0;z-index:310;
  background:var(--bt-white);border-top:1px solid var(--bt-hairline);
  box-shadow:var(--shadow-flate);
  transform:translateY(100%);transition:transform var(--motion-slow) var(--ease)}
.samtykkeboks.inne{transform:none}
.samtykkeboks__inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.samtykkeboks__tekst{flex:1 1 320px;min-width:0;max-width:640px}
.samtykkeboks__tekst b{display:block;font-size:15px;color:var(--bt-navy)}
.samtykkeboks__tekst p{margin-top:4px;font-size:13.5px;line-height:1.5;
  color:var(--bt-ink)}
.samtykkeboks__knapper{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* «Les vilkår» er en handling, ikke en tredje knapp: den skal ikke slaass
   med Godta om oppmerksomheten. Ser ut som en lenke, er en <button> fordi
   den aapner et vindu og ikke gaar noe sted. */
.samtykkeboks__lenke{
  background:none;border:0;padding:6px 2px;font:inherit;font-size:13.5px;
  color:var(--bt-blue-link);text-decoration:underline;cursor:pointer}
.samtykkeboks__lenke:hover{color:var(--bt-navy)}
.samtykke-vilkaar{padding:28px}
.samtykke-vilkaar h2{font-size:20px;color:var(--bt-navy)}
.samtykke-vilkaar p{margin-top:12px;font-size:14.5px;line-height:1.6;
  max-width:640px}
.samtykke-vilkaar .inkl{margin-top:12px}
.samtykke-vilkaar .btn{margin-top:20px}
@media(max-width:700px){
  .samtykkeboks__inner{padding:16px;gap:14px}
  .samtykkeboks__knapper{width:100%}
  .samtykkeboks__knapper .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .samtykkeboks{transition:none}
}

/* ── Gjennomsynslista for de gamle referansene ───────────────────────
   Denne sida er IKKE en salgsside. Den skal leses av én person som skal si
   ja eller nei, og da er tetthet en dyd: 53 oppslag skal kunne skummes uten
   å rulle i ti minutter. Derfor rad og ikke kort, og derfor et lite bilde
   ved siden av i stedet for en medieflate over.

   Merkene sier hva som MANGLER. De er dempet og ikke røde: et hull er en
   opplysning til den som leser, ikke en feilmelding. Merkevarereglen om at
   status skilles med form og ikke med farge gjelder her også. */
.grefliste{display:flex;flex-direction:column;gap:12px}
.gref{display:flex;gap:16px;background:var(--bt-white);
  border:1px solid var(--bt-hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:14px;align-items:flex-start}
.gref__bilde{flex:0 0 120px;width:120px;height:90px;object-fit:cover;
  border-radius:9px;background:var(--bt-canvas)}
.gref__bilde--tom{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--bt-hairline);text-align:center;padding:6px}
.gref__bilde--tom span{font-size:10.5px;line-height:1.3;color:var(--bt-muted)}
.gref__kropp{flex:1 1 auto;min-width:0}
.gref__navn{font-size:16px;font-weight:700;color:var(--bt-navy);margin:0;
  line-height:1.3}
.gref__fakta{font-size:13px;color:var(--bt-muted);margin-top:3px}
/* Poengsummen. Tallet er stort fordi det er det man skanner etter, dommen
   står ved siden av som ord fordi et tall alene ikke er en beslutning, og
   leddene står dempet under fordi de er begrunnelsen man leser først når
   man er uenig. Ingen rød eller grønn: de tre dommene skilles med form og
   plassering, som resten av nettstedet. */
.gref__score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--bt-hairline)}
.gref__sum{font-size:24px;font-weight:800;color:var(--bt-navy);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.gref__sum i{font-size:12px;font-weight:600;font-style:normal;
  color:var(--bt-muted);margin-left:1px}
.gref__dom{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:99px;padding:4px 11px;
  border:1px solid var(--bt-hairline);color:var(--bt-muted);
  background:var(--bt-canvas)}
.gref__dom--egen{border-color:var(--bt-navy);color:var(--bt-navy);
  background:var(--bt-white)}
.gref__dom--tekst{border-style:dashed}
.gref__ledd{font-size:12px;color:var(--bt-muted);
  font-variant-numeric:tabular-nums}
.gref__tall{font-size:12.5px;color:var(--bt-muted);margin-top:7px}
.vurdering td,.vurdering th{white-space:normal}
.vurdering td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}

.gref__merke{display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--bt-muted);
  border:1px solid var(--bt-hairline);border-radius:99px;padding:2px 9px;
  margin:7px 6px 0 0;background:var(--bt-canvas)}
.gref__tekst{margin-top:10px}
/* Trekkspillet gjenbruker nettstedets EGEN summary-stil (linje ~999): et
   pluss ute til hoeyre som roterer til et kryss naar det aapnes. Jeg lagde
   foerst mitt eget pluss paa venstresiden med ::before, og da sto det to
   markoerer i samme rad: mitt til venstre, og nettstedets til hoeyre, der
   det roterte krysset saa ut som en lukkeknapp som ikke gjorde noe.
   Regelen er at en klasse defineres ett sted. Her fantes den allerede. */
.gref__tekst summary{display:block;position:relative;padding-right:28px;
  font-size:13.5px;font-weight:700;color:var(--bt-blue-link);cursor:pointer;
  list-style:none}
.gref__tekst summary::-webkit-details-marker{display:none}
.gref__tekst p{font-size:14px;line-height:1.6;max-width:640px;margin-top:10px}
/* Mellomtitlene sto som <p> paa den gamle sida. Her faar de igjen vekt, saa
   en tekst paa fjorten avsnitt kan skummes i stedet for aa leses som én
   vegg. Litt mer luft OVER enn under, slik at tittelen henger sammen med
   avsnittet sitt og ikke med det forrige. */
.gref__tekst h4{font-size:14.5px;font-weight:700;color:var(--bt-navy);
  margin-top:18px;line-height:1.35;max-width:640px}
.gref__tekst h4:first-of-type{margin-top:12px}
.gref__ingen{font-size:13.5px;color:var(--bt-muted);margin-top:10px}
.gref__adr{font-size:11.5px;color:var(--bt-muted);margin-top:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:620px){
  .gref{flex-direction:column}
  .gref__bilde{flex:0 0 auto;width:100%;height:150px}
}

/* ── Gjennomsynssida: kildehenvisning i tallrutenettet ────────────────
   De tolv bygges med .refcard og .prosjektpanel, altsaa nettstedets egne
   komponenter, uten en eneste ny klasse. Det ene tillegget er kilden under
   hvert tall, som staar her fordi Patrick skal kunne se HVOR et tall kommer
   fra uten aa spoerre. Den skal ut naar referansen godkjennes og flyttes
   til PROSJEKT_DETALJER. */
.ptall__post span i{font-style:normal;color:var(--bt-blue-link);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* Diskret notis under en blokk (kilde, forbehold, bildekreditt) */
.notis{font-size:12.5px;color:var(--bt-muted);max-width:640px}
.dempet{color:var(--bt-muted)}
.er-skjult{display:none}

/* Knappe- og chiprader */
.knapperad{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chiprad{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Bilder i innhold: fast forhold, aldri hoeyde satt per kall */
.seksjonsbilde{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius)}
.seksjonsbilde--lav{aspect-ratio:16/5}
/* Staaende foto (produktbilder, portretter) taaler ikke et 16:7-utsnitt.
   Batterifotoet er hoyere enn det er bredt, og ble beskaaret til en stripe
   der man ikke kunne se hva produktet var. Disse faar et hoyt format og
   begrenset bredde i stedet for aa spenne over hele spalten. */
.seksjonsbilde--staaende{aspect-ratio:4/5;max-width:420px}

/* Bildestripe med bildetekst */
.bildestripe{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.bildestripe figure{margin:0}
.bildestripe img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-s)}
.bildestripe figcaption{font-size:12.5px;color:var(--bt-muted);margin-top:6px}

/* Ansattkort: ett kort med og uten portrett, samme overskriftsstoerrelse */
.ansatte{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;align-items:stretch}
.ansatte--tekst{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ansatt{text-align:center;align-items:center;padding:18px 16px;background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.ansatt__foto{width:110px;height:110px;border-radius:50%;object-fit:cover;object-position:center 20%;margin-bottom:10px}
.ansatt h3{font-size:15px;margin-bottom:2px}
.ansatt__rolle{font-size:12.5px;font-weight:600;color:var(--bt-blue-link)}
.ansatt--tekst{text-align:left;align-items:stretch;padding:14px 18px}
.ansatt--tekst .ansatt__rolle{color:var(--bt-muted)}

/* Artikkel (kunnskap) */
/* Avstanden staar paa den neste artikkelen, ikke etter den forrige. En
   margin under den siste ville lagt seg til bunnen av seksjonen. */
.artikkel{max-width:640px}
.artikkel+.artikkel{margin-top:40px}
.artikkel__tittel{font-size:21px;margin-bottom:10px}

/* Toppen av kalkulatorpanelet og b2b-notisen lenker hvitt paa navy */
.kalk-b2b a{color:#fff;font-weight:700}

/* Kortgrid begrenset til to kort (dokumentnedlasting) */
.cards--to{max-width:760px}
/* Organisasjonskart: den brede boksen nederst */
.ok--bred{max-width:420px;flex:1 1 300px}
.ok--smal{max-width:280px}

/* Segmentkort med foto (forsiden: fire hverdagsspørsmål) */
.segcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.segcard{position:relative;display:block;border-radius:var(--radius);overflow:hidden;text-decoration:none;background:var(--bt-white);border:1px solid var(--bt-hairline);box-shadow:var(--shadow-card);transition:box-shadow var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease)}
.segcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.segcard__media{display:block;width:100%;height:170px;object-fit:cover;object-position:center;transition:transform 600ms var(--ease)}
.segcard:hover .segcard__media{transform:scale(1.045)}
.segcard__body{padding:20px 22px 22px}
.segcard__lbl{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bt-blue);margin-bottom:8px}
.segcard__q{font-size:18px;font-weight:700;line-height:1.3;color:var(--bt-navy);letter-spacing:-.01em}
.segcard__go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--bt-blue-link);margin-top:12px}
.segcard__go svg{transition:transform var(--motion-base) var(--ease)}
.segcard:hover .segcard__go svg{transform:translateX(3px)}

/* Tallbevis */
/* ── Tallbevis ─────────────────────────────────────────────────────────
   Tallene laa som seks loese blokker paa en hvit flate, uten noe som bandt
   dem sammen. Naa er de en noekkeltall-tabell: harlinjer mellom cellene gir
   struktur uten aa legge til en farge eller en ramme. Tallet er stort og
   navy, etiketten liten og dempet, og begge starter paa samme linje i alle
   seks celler. Fast 3x2, ikke auto-fit: auto-fit ga 5 pluss en foreldreloes. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--bt-hairline)}
.stat{padding:26px 32px 24px;border-bottom:1px solid var(--bt-hairline);
  border-left:1px solid var(--bt-hairline);text-align:left}
.stat:nth-child(3n+1){border-left:0;padding-left:0}
.stat b{display:block;font-size:clamp(26px,2.6vw,34px);font-weight:800;color:var(--bt-navy);
  letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b span{display:inline;font-size:inherit;color:inherit;margin:0}
.stat>span{display:block;font-size:13px;color:var(--bt-muted);margin-top:8px;line-height:1.45}
.section--navy .stats{border-top-color:rgba(255,255,255,.16)}
.section--navy .stat{border-bottom-color:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.16)}
.section--navy .stat b{color:#fff}
.section--navy .stat>span{color:rgba(255,255,255,.62)}

/* Prosess-steg: alltid lik høyde, nummer-etikett + tittel + tekst */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;align-items:stretch}
.step{position:relative;display:flex;flex-direction:column;height:100%;background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);transition:box-shadow var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease)}
.step:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.step .n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bt-blue);margin-bottom:12px}
.step svg{color:var(--bt-blue);margin-bottom:12px;flex:0 0 auto;align-self:flex-start}
.step h3{font-size:17.5px}
.step p{font-size:14px}

/* Ikonliste: ikon, uthevet ord og en forklaring. Dette er IKKE det samme
   som .inkl, som er en avkrysningsliste med korte punkter. De to delte
   klassenavn fram til 9. september, med to konkurrerende definisjoner
   nesten fire hundre linjer fra hverandre i denne fila. Resultatet var en
   geometri ingen hadde bestemt: flex fra den ene, rutenett og pseudo-hake
   fra den andre. */
.ikonliste{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 28px;padding:0;margin:0;
  border-bottom:1px solid var(--bt-hairline)}
.ikonliste li{list-style:none;display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--bt-hairline);font-size:15px;line-height:1.6}
.ikonliste li svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;color:var(--bt-blue)}
.ikonliste li b{color:var(--bt-navy)}
.section .wrap>:is(.inkl,.ikonliste)+p{margin-top:28px}

/* «Alltid inkludert»: seks løftekort i samme rutenett som stegene over,
   så de to blokkene har samme bredde og samme rytme. Kortene er lettere
   enn stegkortene (ingen skygge, svak bunn) fordi de er en liste, ikke en
   reise: de skal kunne skummes, ikke leses i rekkefølge. */
.gigrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:28px 0 0;padding:0}
.gikort{list-style:none;background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-card)}
.gikort svg{width:26px;height:26px;color:var(--bt-blue);display:block;margin-bottom:14px}
.gikort h3{font-size:16px;font-weight:700;color:var(--bt-navy);margin:0 0 6px;letter-spacing:-.01em}
.gikort p{font-size:14px;line-height:1.6;color:var(--bt-muted);margin:0}
.gifot{margin-top:26px;max-width:640px}
/* Prislinja i eksempelkortene: tallet er svaret, og skal kunne leses alene. */
.prisrad{font-size:19px;font-weight:800;color:var(--bt-navy);letter-spacing:-.01em;
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--bt-hairline);
  font-variant-numeric:tabular-nums}
/* Kartseksjonen: forklaringen på anleggene vi drifter, og produksjonstallet.
   Tallet er målt og fortjener egen vekt, derfor paper-flate og stort tall. */
.kart-forklaring{max-width:640px;color:var(--bt-muted);font-size:14.5px}
.kart-produsert{background:var(--bt-paper);border-left:3px solid var(--bt-blue);
  padding:16px 20px;margin:18px 0 26px;max-width:640px;font-size:14.5px;color:var(--bt-navy)}
.kart-produsert b{display:block;font-size:clamp(26px,3vw,34px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;margin-bottom:4px;font-variant-numeric:tabular-nums}
/* På telefon ville seks kort i en spalte blitt en halv skjermhøyde hver.
   To smalere kort ved siden av hverandre gjør blokken til en oversikt man
   ser under ett, som er hele poenget med den. */
@media(max-width:560px){
  .gigrid{grid-template-columns:1fr 1fr;gap:12px}
  .gikort{padding:16px 14px}
  .gikort svg{width:22px;height:22px;margin-bottom:10px}
  .gikort h3{font-size:14.5px;margin-bottom:4px}
  .gikort p{font-size:13px;line-height:1.5}
}

/* ── Kalkulator (signaturelementet): hvitt inngangskort + navy estimatpanel ── */
.kalk-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:stretch;max-width:1000px;margin-top:8px}
.kalk-inn{background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-card)}
.kalk-felt{margin-bottom:22px}
.kalk-lbl{display:block;font-size:13px;font-weight:700;color:var(--bt-navy);margin-bottom:8px}
input[type=range]{display:block;width:100%;accent-color:var(--bt-blue);height:26px;cursor:pointer;margin:0}
.kalk-skala{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--bt-muted);margin-top:4px}
.kalk-skala b{color:var(--bt-navy);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center}
.kalk-hint{font-size:12.5px;color:var(--bt-muted);margin-top:2px}
.kalk-ut{display:flex;flex-direction:column;background:var(--bt-navy);border-radius:var(--radius);padding:28px;color:#fff;box-shadow:0 18px 44px rgba(10,22,40,.22)}
.kalk-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bt-blue-300,#6FB2E3);margin-bottom:14px}
.kalk-celler{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kalk-celle{min-width:0}
.kalk-tall{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.kalk-led{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}
/* .kalk-fin ble skrevet for det gamle resultatpanelet, som var navy. Da
   kalkulatoren ble bygget om, fikk panelet hvit bunn (.kalk2__panel), men
   den hvite tekstfargen fulgte med. Resultat: forbeholdet "Estimat, ikke
   tilbud. Alle priser er eks. mva..." sto HVITT PAA HVITT paa forsiden, og
   var usynlig. Funnet 10. september av den nye vakten mot usynlig tekst,
   ikke av et menneske. Det er den slags som gjoer at en pris kan leses uten
   forbeholdet som hoerer til.
   Fargen foelger naa panelet den ligger i. */
.kalk-fin{font-size:12px;color:var(--bt-muted);margin-top:12px}
.kalk-fin a{color:var(--bt-blue-link)}
.kalk-fin--s{font-size:11px;color:var(--bt-muted);margin-top:10px}
/* I det moerke resultatpanelet (.kalk-ut) gjelder fortsatt lys tekst. */
.kalk-ut .kalk-fin{color:rgba(255,255,255,.6)}
.kalk-ut .kalk-fin a{color:#fff}
.kalk-ut .kalk-fin--s{color:rgba(255,255,255,.5)}
.kalk-b2b{font-size:13px;color:#fff;margin-top:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-s);padding:12px 14px}
.kalk-cta{border-top:1px solid rgba(255,255,255,.15);margin-top:auto;padding-top:16px}
.kalk-cta .btn{align-self:flex-start}

/* ── Logostripe: medlemskap og partnere ────────────────────────────────
   Et rutenett, ikke en flytende rad. Foer laa 17 logoer som brytende flex
   med 6, 6 og 5 per rad, hver rad sentrert for seg, saa ingenting sto i
   kolonner. Naa er det faste kolonner: alt flukter bade vannrett og loddrett.

   Hoyden settes etter FORM, ikke likt for alle. Achilles er fem ganger saa
   bred som hoy, Groent Punkt er kvadratisk. Med samme hoyde blir ordmerkene
   visuelt enorme; med samme boks blir emblemene frimerker. Tre formklasser
   gir alle omtrent samme optiske tyngde. build_pages.py maaler filene og
   setter klassen selv, saa nye logoer plasserer seg riktig uten at noen
   maa huske paa det. */
/* justify-items var center saa lenge stripa var en midtstilt seksjon for seg.
   Naa ligger den venstrestilt inne i «Alltid inkludert», og da maa foerste
   logo i hver rad begynne paa samme kant som overskriften over: 184, ikke
   et sted inne i cella. */
.logostripe{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 30px;
  align-items:center;justify-items:start;margin-top:18px}
.logostripe img{width:auto;max-width:100%;max-height:44px;filter:grayscale(1);opacity:.62;mix-blend-mode:multiply;
  transition:filter var(--motion-base) var(--ease),opacity var(--motion-base) var(--ease)}
.logostripe img:hover{filter:none;opacity:1}
.logo--bred{height:28px}      /* ordmerker: OBOS, Achilles, Enova, Nelfo */
.logo--mellom{height:40px}    /* DSB, StartBANK, Boligmappa, Solenergiklyngen */
.logo--kvadrat{height:56px}   /* ISO 9001, Miljoefyrtaarn, Groent Punkt */
/* OBOS er eieren og staar foerst. Den faar to kolonner: det gir eierskapet
   den plassen fasiten ber om, OG det fyller rutenettet helt opp. 17 logoer
   i 6 kolonner gir ellers 6, 6 og 5, med et tomt hull nederst til hoeyre. */
.logostripe img:first-child{grid-column:span 2;height:36px}

/* Varianten paa Om oss har faerre logoer og staar i en tekstspalte */
.logostripe--venstre{grid-template-columns:repeat(4,1fr);justify-items:start;max-width:620px;gap:34px 26px}
/* Her er det 12 logoer i 4 kolonner, som gaar akkurat opp i tre rader. Med
   OBOS over to kolonner blir det 13 celler og en ensom logo paa rad fire. */
.logostripe--venstre img:first-child{grid-column:span 1}

@media(max-width:900px){
  .logostripe{grid-template-columns:repeat(4,1fr);gap:34px 26px}
  .logostripe img:first-child{grid-column:span 2}
  .logostripe--venstre{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .logostripe{grid-template-columns:repeat(3,1fr);gap:28px 20px}
  .logostripe--venstre{grid-template-columns:repeat(2,1fr)}
  .logo--bred{height:24px}.logo--mellom{height:34px}.logo--kvadrat{height:46px}
  .logostripe img:first-child{grid-column:span 1;height:26px}
}

/* ── Skjema ── */
.form{max-width:640px;display:grid;gap:16px}
.form label{font-size:13.5px;font-weight:700;color:var(--bt-navy)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:15px;color:var(--bt-ink);background:var(--bt-white);border:1px solid var(--bt-hairline);border-radius:10px;padding:12px 14px;margin-top:6px;transition:border-color var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--bt-blue);box-shadow:0 0 0 3px var(--bt-blue-100)}
.form textarea{min-height:120px;resize:vertical}
/* Honningkrukke: skjult for folk, synlig for roboter som fyller ut alt de
   finner. Ikke display:none, for en del roboter hopper over det som er
   skjult paa den maaten. Den flyttes ut av bildet i stedet. */
.felle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Svaret etter innsending. Fargen settes av klassen som legges til. */
.skjema-svar{font-size:14px;margin:0;display:none}
.skjema-svar.vis{display:block}
.skjema-svar.ok{color:var(--bt-blue-700);font-weight:700}
.skjema-svar.feil{color:#B3261E}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{
  border-color:#B3261E}
.form-rad{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Artikler (kunnskap): luft mellom avsnitt */
article p{margin-bottom:12px}
article p:last-child{margin-bottom:0}

/* FAQ */
/* ── FAQ med faner ───────────────────────────────────────────────────
   Uten JS: gruppene staar stablet under hver sin mellomtittel, velgeren er
   skjult med hidden. En helt vanlig gruppert FAQ, alt i dokumentet.
   Med JS: js-faner settes paa, mellomtitlene forsvinner, velgeren vises, og
   bare den valgte gruppen staar igjen.

   Minstehoeyden er ikke pynt. Gruppene har ulikt antall spoersmaal, og uten
   den hopper alt under seksjonen naar du bytter fane. ── */
.faqfaner__velg{margin-bottom:26px}
.faqgruppe__tit{margin-top:36px}
.faqgruppe:first-of-type .faqgruppe__tit{margin-top:0;padding-top:0;border-top:0}
.js-faner .faqgruppe__tit{display:none}
/* Minstehoeyden hoerer paa PANELET, ikke paa beholderen. Foerste forsoek
   satte den paa .faqfaner, som ogsaa inneholder fanevelgeren, saa gulvet ble
   98 px for lavt og sida hoppet likevel. Nettopp den slags feil maalingen
   fanget: 567 px synlig mot 469 px maalt. */
.js-faner .faqgruppe{min-height:var(--faq-min,0px)}

details{border-bottom:1px solid var(--bt-hairline);padding:16px 0;max-width:640px}
summary{font-weight:700;cursor:pointer;font-size:16px;color:var(--bt-navy);list-style:none;position:relative;padding-right:34px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--bt-blue);transition:transform var(--motion-base) var(--ease)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{margin-top:10px}

/* ── Scroll-inn-animasjon (FAIL-SAFE): alt innhold er synlig som standard.
   JS legger .anim-klar KUN på seksjoner utenfor viewport rett før første maling,
   og .in når de avsløres. Uten JS, ved skriptfeil eller prefers-reduced-motion
   skjules ingenting; site.js har i tillegg en 800 ms-fallback som avslører alt. */
@media(prefers-reduced-motion:no-preference){
  /* Lengden og lengden paa bevegelsen er skrudd opp fordi forrige runde ikke
     var merkbar: 280 ms og 12 px forsvant i scrollingen.

     Hvor grensene gaar: motion.md setter grensesnittbevegelse til 120-320 ms
     og et absolutt tak paa 500. --motion-slow er 320 og er merket «entrances,
     reveals», saa teksten ligger der. Kort og bildeflater ligger paa 440, over
     reveal-tokenet men godt under taket, fordi de flytter seg lenger og da
     leses 320 som et rykk.

     Retningen er én og den samme: alt kommer inn litt lite og litt lavt, og
     setter seg. Aldri forbi 1, ingen sprett, slik motion.md krever. */
  /* .fork er unntatt med vilje: forklaringssidene har position:sticky inni
     seg, og en transform paa en forfar lager en ny containing block som
     bryter sticky. Da ville 3D-panelet sluttet aa foelge med i scrollingen.

     Regelen er generell: en seksjon som inneholder sticky eller fixed skal
     aldri faa transform paa en forfar. Sjekk det ved aa maale, ikke ved aa se.

     .kalk2 er ogsaa unntatt, men av en annen grunn: den skal ikke flytte seg.
     Se regelen lenger ned. */
  .section.anim-klar .wrap>*:not(.cards):not(.steps):not(.stats):not(.segcards):not(.ansatte):not(.bildestripe):not(.fork):not(.kalk2){
    transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
  .section.anim-klar :is(.cards,.steps,.stats,.segcards,.ansatte,.bildestripe)>*{
    transition:opacity 440ms var(--ease),transform 440ms var(--ease)}

  .section.anim-klar:not(.in) .wrap>*:not(.cards):not(.steps):not(.stats):not(.segcards):not(.ansatte):not(.bildestripe):not(.fork):not(.kalk2){
    opacity:0;transform:translateY(24px)}
  .section.anim-klar:not(.in) :is(.cards,.steps,.stats,.segcards,.ansatte,.bildestripe)>*{
    opacity:0;transform:translateY(30px) scale(.965)}

  .section.anim-klar.in .wrap>*:not(.cards):not(.steps):not(.stats):not(.segcards):not(.ansatte):not(.bildestripe):not(.fork):not(.kalk2),
  .section.anim-klar.in :is(.cards,.steps,.stats,.segcards,.ansatte,.bildestripe)>*{
    opacity:1;transform:none}

  .section.anim-klar.in .wrap>*:nth-child(2){transition-delay:50ms}
  .section.anim-klar.in .wrap>*:nth-child(3){transition-delay:100ms}
  .section.anim-klar.in .wrap>*:nth-child(n+4){transition-delay:140ms}
  .section.anim-klar.in :is(.cards,.steps,.stats,.segcards,.ansatte,.bildestripe)>*:nth-child(2){transition-delay:60ms}
  .section.anim-klar.in :is(.cards,.steps,.stats,.segcards,.ansatte,.bildestripe)>*:nth-child(3){transition-delay:120ms}
  .section.anim-klar.in :is(.cards,.steps,.stats,.segcards,.ansatte,.bildestripe)>*:nth-child(n+4){transition-delay:180ms}

  /* Kalkulatoren toner inn UTEN aa flytte seg.

     Estimatkortet skal staa bom stille i siden. Patrick: «den skal ikke
     foelge etter», «den skal staa LAAST til ett og samme sted». Derfor er
     .kalk2 tatt ut av bevegelsesregelen over med :not(.kalk2) og faar bare
     opasitet her. Den animerer, saa seksjonen ikke blir halvdoed, men den
     flytter seg ikke.

     Felle: foerst prevde jeg aa la .kalk2 staa i den generelle regelen og
     overstyre den med transform:none her. Det virker ikke. Den generelle
     regelen har spesifisitet 110 (sju :not-klasser), denne har 40, saa
     translateY(24px) ble staaende. Maalt: kortet gled 2-3 px bort fra
     sidens egen bevegelse per scrollesteg, i 7 steg. Vil du stanse
     bevegelse for ett element, ta det ut av regelen som lager bevegelsen.
     Ikke legg en svakere motregel etterpaa.

     Uten transform her kan regelen heller aldri komme til aa bryte en
     sticky eller fixed som noen legger inn i seksjonen siden. */
  .section.anim-klar .kalk2{transition:opacity 320ms var(--ease)}
  .section.anim-klar:not(.in) .kalk2{opacity:0}
  .section.anim-klar.in .kalk2{opacity:1}

  /* Bildeflater setter seg fra samme retning som kortene: litt lite, aldri
     for stort. Foerste utgave gikk fra 1,04 NED til 1, altsaa motsatt vei av
     alt annet, og to retninger samtidig leses som rot. */
  .section.anim-klar :is(.medieflate,.bt-kart__flate,.figur,.prosjektpanel__bilde){
    transition:opacity 440ms var(--ease),transform 440ms var(--ease);
    transition-delay:60ms}
  .section.anim-klar:not(.in) :is(.medieflate,.bt-kart__flate,.figur,.prosjektpanel__bilde){
    opacity:0;transform:translateY(26px) scale(.965)}
  .section.anim-klar.in :is(.medieflate,.bt-kart__flate,.figur,.prosjektpanel__bilde){
    opacity:1;transform:none}
}

/* ── Footer (navy) ── */
/* CTA-en over footeren er navy med gradient, og footeren var noeyaktig samme
   navy. To moerke felt paa rad uten skille leses som ett stort felt, og
   forsiden saa ut til aa ha tre footere. Footeren gaar derfor ett hakk
   moerkere enn gradienten ender, og har mindre luft paa toppen: den er en
   kolofon, ikke en seksjon. Rekkefoelgen skal leses som invitasjon, saa
   avsender. */
/* Menypunkt som er bygget, men ikke klart. Dempet tekst pluss et merke som
   sier det rett ut: en farge alene er ikke en tilstand, og den som ikke ser
   forskjell paa dempet og vanlig, skal fortsatt faa vite det. Lenka virker,
   for den som vil se hva som kommer, skal kunne det. */
/* «Kommer snart» er et signal, ikke en lenke. Elementet er et <span>, saa
   en hover som farger blaatt ville lovet et klikk som ikke finnes. */
.seg-p--snart,.nav-l--snart{color:var(--bt-muted);cursor:default}
.snart{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bt-muted);border:1px solid var(--bt-hairline);border-radius:999px;
  padding:2px 7px;margin-left:6px;white-space:nowrap}

/* Footeren er navy fra paletten, ikke en egen moerkere tone. #06101E sto her
   en periode for aa skille kolofonen fra CTA-en, men den fargen finnes ikke i
   merkevarepaletten, og gylden regel 1 sier at bare paletten brukes, aldri
   tilnaermede verdier. Skillet mot CTA-en loeses med en haarstrek i stedet,
   som er det samme virkemiddelet som skiller lyse seksjoner. */
.sitefooter{background:var(--bt-navy);color:#fff;
  border-top:1px solid rgba(255,255,255,.10)}
.sitefooter__inner{max-width:var(--maxw);margin:0 auto;padding:52px 24px 36px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.sitefooter img{height:26px;margin-bottom:14px}
.sitefooter .tagline{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--bt-blue-300,#6FB2E3);margin-bottom:16px}
.sitefooter h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:10px}
.sitefooter a{display:block;color:rgba(255,255,255,.75);text-decoration:none;font-size:14px;padding:3px 0;transition:color var(--motion-fast) var(--ease)}
.sitefooter a:hover{color:#fff}
.sitefooter p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.8}
.sitefooter .obos{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;font-weight:600;color:var(--bt-blue-200,#A6D0EF)}
.sitefooter .obos-logo{height:18px;width:auto;margin:0;opacity:.92}
/* Streken laa paa selve boksen, altsaa fra 160 til 1280, mens all tekst i
   footeren staar paa 184. Den stakk 24 px ut paa hver side av det den
   skiller. Padding foerst, strek paa et innerelement som foelger teksten. */
.sitefooter__bottom{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sitefooter__bottom>span{display:block;border-top:1px solid rgba(255,255,255,.12);
  padding:16px 0;font-size:12px;color:rgba(255,255,255,.4)}

/* ── Responsivt: 900 og 640 ── */
@media(max-width:900px){
  :root{--sec-pad:56px;--sec-pad-slutt:72px;--head-gap:28px}
  /* Skjul KUN i menylinja. Foer traff .siteheader .nav-cta ogsaa knappen
     inne i mobilmenyen, saa mobil sto igjen uten "Beregn pris". */
  .siteheader__row .siteheader__nav,.siteheader__row .nav-phone,.siteheader__row .nav-cta{display:none}
  .hamb{display:flex}
  .mega{position:static;box-shadow:none}
  .hero__inner{padding-top:76px;padding-bottom:68px}
  .hero--tall .hero__inner{padding-top:96px;padding-bottom:88px}
  .segcards{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:22px 24px 20px}
  .stat:nth-child(3n+1){border-left:1px solid var(--bt-hairline);padding-left:24px}
  .stat:nth-child(2n+1){border-left:0;padding-left:0}
  .kalk-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--sec-pad:44px;--sec-pad-slutt:56px;--head-gap:24px}
  .kalk-inn,.kalk-ut{padding:22px}
  .kalk-celler{grid-template-columns:1fr;gap:12px}
  .hero__inner{padding-top:60px;padding-bottom:56px}
  .hero--tall .hero__inner{padding-top:72px;padding-bottom:64px}
  .segcards{grid-template-columns:1fr}
  .segcard__media{height:150px}
  .form-rad{grid-template-columns:1fr}
  .sitefooter__inner{grid-template-columns:1fr 1fr;padding-top:48px}
  .hero__cta .btn{width:100%;justify-content:center}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:18px 16px 16px}
}

/* ── Anleggskart ────────────────────────────────────────────────────
   Prikk per kommune over Kartverkets kystlinje. Zoom og panorering
   ligger i js/site.js. Alt av geometri hentes fra data/anleggskart.svg,
   ikke fra markupen: den fila er nesten 900 kB, og bakt inn i siden
   ville den kostet alle besokende det samme, ogsaa de som ikke ser
   paa kartet. */
/* Felles innramming av medieflater: kart, 3D-lerret, innbygde visninger.
   Ett sted, saa alle rammene paa nettstedet er like og endres sammen.
   .bt-kart__flate har samme regler og boer folde inn i denne, se N16. */
.medieflate{position:relative;background:var(--bt-white);
  border:1px solid var(--bt-hairline);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-flate)}

.bt-kart{display:grid;grid-template-columns:minmax(300px,1fr) 1fr;gap:26px;align-items:start}
.bt-kart__flate{position:relative;background:var(--bt-blue-50);
  border:1px solid var(--bt-hairline);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-flate)}
/* pan-y, ikke none: EN finger skal rulle SIDEN. Med touch-action:none
   fanger kartet fingeren, og paa en telefon der det fyller skjermen
   kommer man seg ikke forbi. To fingre klypes av JS-en. */
.bt-kart__svg{display:block;width:100%;height:auto;cursor:grab;touch-action:pan-y}
.bt-kart__svg.drar{cursor:grabbing}
.bt-kart__land{fill:var(--bt-paper);stroke:var(--bt-blue-200);stroke-width:.6;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bt-kart__p{cursor:pointer;fill-opacity:.88;stroke:#fff;stroke-width:1.3;
  transition:fill-opacity var(--motion-fast) var(--ease)}
.bt-kart__p:hover{fill-opacity:1}
/* Ladeanlegg. Skilles paa FORM, ikke paa en ny kulør: paletten har
   ingen andre farger enn blaaskalaen og navy, og blaaskalaen er
   allerede brukt til aa skille montert fra drift. */
.bt-kart__l{cursor:pointer;fill-opacity:.9;stroke:#fff;stroke-width:1.3;
  transition:fill-opacity var(--motion-fast) var(--ease)}
.bt-kart__l:hover{fill-opacity:1}
.bt-kart__par{stroke:var(--bt-navy);stroke-width:1;opacity:.35}
.bt-kart__valg{display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  border:1px solid var(--bt-hairline);border-radius:10px;
  padding:10px 14px;margin:0 0 14px;font-size:13.5px}
.bt-kart__valg legend{font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bt-muted);padding:0 6px}
.bt-kart__valg label{display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;font-weight:600}
.bt-kart__valg input{accent-color:var(--bt-blue);width:16px;height:16px}
.bt-kart__sym{display:inline-block;width:12px;height:12px}
.bt-kart__sym--sol{border-radius:99px;background:var(--bt-blue)}
.bt-kart__sym--lade{border-radius:3px;background:var(--bt-navy)}
.bt-kart__hv{stroke:var(--bt-blue-200);stroke-width:1}
.bt-kart__et{font-size:11.5px;font-weight:700;fill:var(--bt-ink);pointer-events:none;
  paint-order:stroke;stroke:#fff;stroke-width:3.4;stroke-linejoin:round}
.bt-kart__et2{font-size:9px;font-weight:600;fill:var(--bt-muted);pointer-events:none;
  display:none;paint-order:stroke;stroke:#fff;stroke-width:2.6;stroke-linejoin:round}
/* Zoomet inn overtar de detaljerte navnene, ellers staar kommunen med
   navnet sitt to ganger og henvisningsstreken strekker seg over kartet.
   Zoomet langt ut blir de ni bare en klump. */
.bt-kart__svg.naer .bt-kart__et2{display:block}
.bt-kart__svg.naer .bt-kart__et,.bt-kart__svg.naer .bt-kart__hv,
.bt-kart__svg.fjern .bt-kart__et,.bt-kart__svg.fjern .bt-kart__hv{display:none}
.bt-kart__zoom{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.bt-kart__zoom button{width:34px;height:34px;border:1px solid var(--bt-hairline);
  background:var(--bt-white);color:var(--bt-ink);border-radius:10px;font-family:inherit;
  font-size:17px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.bt-kart__zoom button:hover{background:var(--bt-blue-50);border-color:var(--bt-blue-200)}
.bt-kart__niva{position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:700;
  color:var(--bt-muted);background:var(--bt-white);border:1px solid var(--bt-hairline);
  border-radius:99px;padding:2px 9px;font-variant-numeric:tabular-nums}
.bt-kart__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(10,22,40,.9);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;
  border-radius:10px;opacity:0;transition:opacity var(--motion-base) var(--ease);
  pointer-events:none;text-align:center;max-width:80%}
.bt-kart__hint.vis{opacity:1}
.bt-kart__boks{position:fixed;pointer-events:none;background:var(--bt-navy);color:#fff;
  border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.5;opacity:0;
  transition:opacity var(--motion-fast) var(--ease);max-width:250px;z-index:60}
.bt-kart__boks b{display:block;font-size:14px;margin-bottom:3px}
.bt-kart__boks span{color:var(--bt-blue-300)}
/* Festet boks: klikk på en kommune viser anleggene vi kan navngi der.
   Da må boksen kunne klikkes i, og den tåler å være litt større. */
.bt-kart__boks--festet{pointer-events:auto;max-width:288px;padding:14px 16px 12px}
.bt-kart__lukk{position:absolute;top:6px;right:8px;background:none;border:0;color:rgba(255,255,255,.6);
  font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}
.bt-kart__lukk:hover{color:#fff}
.bt-kart__anlegg-liste{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
  max-height:230px;overflow:auto}
.bt-kart__anlegg{display:block;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;text-decoration:none}
.bt-kart__anlegg:last-child{border-bottom:0}
a.bt-kart__anlegg:hover .bt-kart__anavn{text-decoration:underline}
.bt-kart__anavn{display:block;font-weight:700;font-size:13px}
.bt-kart__ameta{display:block;font-size:11.5px;color:rgba(255,255,255,.6)}
.bt-kart__flere{margin:8px 0 0;font-size:11.5px;color:rgba(255,255,255,.6)}
.bt-kart__tegn{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:var(--bt-muted)}
.bt-kart__tegn i{display:inline-block;width:11px;height:11px;border-radius:99px;margin-right:6px}
.bt-kart__rull{max-height:820px;overflow-y:auto}
.bt-kart__tab{width:100%;border-collapse:collapse;font-size:13px}
.bt-kart__tab th,.bt-kart__tab td{text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--bt-hairline)}
.bt-kart__tab th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bt-muted);position:sticky;top:0;background:var(--bt-white)}
.bt-kart__tab td.t,.bt-kart__tab th.t{text-align:right;font-variant-numeric:tabular-nums}
/* Kartet alene, uten tabellen (forsiden): en kolonne, litt lavere flate. */
.bt-kart--alene{grid-template-columns:1fr}
.bt-kart--alene .bt-kart__flate{height:62vh;min-height:360px;max-height:640px}
/* Prosenthøyden på svg-en trenger en forelder med høyde, ellers blir den auto
   og kartet beskjæres til Nord-Norge. Gjelder også mobilregelen under. */
.bt-kart--alene [data-kart-hold],.bt-kart--alene .bt-kart__svg{height:100%}
/* Skillelinje-overskrift inne i en seksjon: referansene under Oen, og
   partnerlogoene under OBOS-setningen i «Alltid inkludert». Den midtstilte
   .senter er borte: den fantes bare for partnerlinja, som var det eneste
   midtstilte innholdet paa nettstedet utenom den avsluttende CTA-en. */
.h3-skille{font-size:20px;font-weight:700;color:var(--bt-navy);margin:44px 0 16px;padding-top:28px;border-top:1px solid var(--bt-hairline)}
@media(max-width:860px){
  .bt-kart{grid-template-columns:1fr}
  /* Full hoyde ville tatt to skjermer paa en telefon. */
  .bt-kart__flate{height:70vh;min-height:340px}
  [data-kart-hold],.bt-kart__svg{height:100%}
  .bt-kart__rull{max-height:420px}
}

/* ── Priskalkulator 2.0 ─────────────────────────────────────────────
   Valgskjerm med tre produkter, spaker per modul, klebrig estimatpanel.
   Gjenbruker .kalk-felt, .kalk-lbl og .kalk-skala fra v1. */
/* ── Valgrad: en rad kort der du plukker EN ting, og resten av seksjonen
   bytter innhold. Brukes to steder, og er derfor EN komponent med ett navn,
   ikke to sett like regler: kalkulatoren (Solceller / Elbillading / Batteri)
   og FAQ-en paa kunnskapssiden, som skal foeles kjent igjen fra kalkulatoren.
   Het .kalk2__kort til 9. september, da FAQ-en fikk samme velger. ── */
.valgrad{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.valgkort{display:block;text-align:left;padding:16px 18px;background:var(--bt-white);
  border:1.5px solid var(--bt-hairline);border-radius:var(--radius-s);cursor:pointer;
  box-shadow:var(--shadow-card);
  font-family:inherit;transition:border-color var(--motion-fast) var(--ease),
  background var(--motion-fast) var(--ease)}
.valgkort:hover{border-color:var(--bt-blue-300)}
.valgkort[aria-pressed="true"],.valgkort[aria-selected="true"]{
  border-color:var(--bt-blue);background:var(--bt-blue-50)}
.valgkort:focus-visible{outline:2px solid var(--bt-blue);outline-offset:2px}
.valgkort__tit{display:block;font-size:16px;font-weight:700;color:var(--bt-ink)}
.valgkort__sub{display:block;font-size:12.5px;color:var(--bt-muted);margin-top:2px}
.kalk2__hint{font-size:13px;color:var(--bt-muted);margin:10px 0 22px}
.kalk2__grid{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:26px;align-items:start}
.kalk2__blokk{border:0;padding:0;margin:0 0 26px}
.kalk2__legend{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bt-blue-600);padding:0;margin-bottom:14px}
.kalk2__valg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.kalk2__valg button{padding:8px 14px;border:1.5px solid var(--bt-hairline);
  background:var(--bt-white);border-radius:99px;font-family:inherit;font-size:13.5px;
  color:var(--bt-ink);cursor:pointer;transition:border-color var(--motion-fast) var(--ease)}
.kalk2__valg button:hover{border-color:var(--bt-blue-300)}
.kalk2__valg button[aria-pressed="true"]{border-color:var(--bt-blue);
  background:var(--bt-blue-50);font-weight:600}
.kalk2__select{width:100%;padding:10px 14px;border:1.5px solid var(--bt-hairline);
  background:var(--bt-white);border-radius:var(--radius-s,10px);font-family:inherit;
  font-size:14px;color:var(--bt-ink);cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease)}
.kalk2__select:hover{border-color:var(--bt-blue-300)}
.kalk2__select:focus-visible{outline:2px solid var(--bt-blue);outline-offset:2px}
/* Estimatkortet staar STILLE i siden og foelger aldri skjermen.

   Det sto foer paa position:sticky med top:96, som ga 180 px der kortet
   hang igjen i vinduet mens resten av siden gikk forbi. Saa ble det gjort
   verre: en JS-rutine satte det til position:fixed og holdt det i 260 px,
   med et maalt rykk paa 86 px naar det byttet tilbake. Begge deler er det
   samme: kortet slapp siden og fulgte blikket.

   Det skal det ikke. Det hoerer til i sin kolonne, ved siden av spakene, og
   ruller ut sammen med seksjonen som alt annet paa nettstedet. Ingen sticky,
   ingen fixed, ingen JS. */
.kalk2__panel{position:static;background:var(--bt-white);
  border:1px solid var(--bt-hairline);border-radius:var(--radius);padding:22px 24px}
.kalk2__merke{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bt-blue-600);background:var(--bt-blue-50);
  padding:3px 10px;border-radius:99px;margin-bottom:16px}
.kalk2__del{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--bt-hairline)}
.kalk2__del:last-of-type{border-bottom:0}
.kalk2__del h4{font-size:14px;font-weight:700;margin:0 0 10px}
.kalk2__rad{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  padding:3px 0;color:var(--bt-muted)}
.kalk2__rad b{color:var(--bt-ink);font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.kalk2__rad--sum{margin-top:8px;padding-top:10px;border-top:1px solid var(--bt-hairline)}
.kalk2__rad--sum b{font-size:16px;font-weight:800}
/* AC-tilkoblingen staar UNDER investeringen, ikke inni den, fordi den
   avhenger av kapasiteten i tavla og avklares paa befaringen. */
.kalk2__rad--tillegg em{font-style:normal;color:var(--bt-muted);font-size:13px}
/* AC-linja under en pris i et kort: samme rolle som tilleggslinja i
   kalkulatoren, dempet fordi den ikke er en del av investeringen. */
.prisrad--ac{font-size:14px;font-weight:600;color:var(--bt-muted);margin-top:2px}
.kalk2__venter{margin-top:10px;padding:8px 12px;background:var(--bt-paper);
  border-radius:8px;font-size:13px;font-weight:600;color:var(--bt-muted)}
.kalk2__merknad{font-size:12.5px;color:var(--bt-muted);margin-top:10px;line-height:1.5}
.kalk2__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 0 4px;border-top:2px solid var(--bt-blue);margin-top:6px;font-size:14px}
.kalk2__total b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.kalk2__gevinst{font-size:13px;color:var(--bt-blue-600);font-weight:600;
  margin-top:10px;line-height:1.5}
/* Over en halv million: da skal samtalen flyttes til en befaring.
   Den står INNE i estimatruta og ikke i forbeholdet under, fordi
   forbeholdet ikke leses. Hvit flate med ramme og skygge, som alt annet
   som ligger oppå grunnen, og blå 600 venstrekant for å si at dette er
   en beskjed og ikke en pris til. Ingen rød: et stort anlegg er en god
   nyhet, ikke en feilmelding. */
.kalk2__befaring{margin-top:16px;padding:14px 16px;font-size:14px;
  line-height:1.55;color:var(--bt-navy);background:var(--bt-white);
  border:1px solid var(--bt-hairline);border-left:3px solid var(--bt-blue-600);
  border-radius:var(--radius-s);box-shadow:var(--shadow-card)}
.kalk2__tom{font-size:14px;color:var(--bt-muted)}
.kalk2__cta{margin-top:18px}
@media(max-width:860px){
  .valgrad{grid-template-columns:1fr}
  .kalk2__grid{grid-template-columns:1fr}
  /* Kortet er statisk paa alle bredder, saa her trengs bare skyggen som
     loefter det fra canvas naar det ligger under spakene. */
  .kalk2__panel{box-shadow:var(--shadow-flate)}
}

/* ── Produktsider: prosess og inkludert-liste ───────────────────────
   Samme moenster paa alle seks produktsidene. Det kunden lurer paa
   foerst er ikke teknikken, men hva som skjer naar de sier ja. */
/* En liste med hårstrek mellom punktene skal lukkes i bunnen. Uten en
   avsluttende strek stopper lista i løse lufta, og de 144 pikslene ned til
   neste seksjon leses som et hull i stedet for som luft mellom seksjoner.
   Målt paa eneboligsiden 9. september: 34 px mellom to steg, 144 px etter
   det siste. Tallrekka .stats har alltid vaert lukket i begge ender, og
   listene foelger den naa. */
/* ── Hvite kort inne i en navy seksjon ──────────────────────────────────
   .section--navy snur ALL tekst til hvit. Ligger det et hvitt kort inni,
   staar hvit tekst paa hvit bunn, og kortet blir tomt. Det skjedde paa
   forsiden 10. september: stegkortene sto igjen med bare "STEG 1" og et
   ikon, resten usynlig. Patrick saa det med en gang.
   Kort med egen lys flate maa derfor snu teksten TILBAKE.

   MERK hvorfor dette er sin egen regel og ikke en lapp paa .step:
   forsiden bruker .steps/.step, produktsidene bruker .steg-liste. Jeg
   skrev moerk variant for den ene og glemte den andre. Regelen under
   gjelder enhver komponent med lys egenflate, ogsaa de vi lager senere. */
.section--navy :is(.card,.step,.gikort,.refcard,.ladekort,.segkort,.ansatt) h3,
.section--navy :is(.card,.step,.gikort,.refcard,.ladekort,.segkort,.ansatt) h4{
  color:var(--bt-navy)}
.section--navy :is(.card,.step,.gikort,.refcard,.ladekort,.segkort,.ansatt) p{
  color:var(--bt-muted)}
.section--navy :is(.card,.step,.gikort,.refcard,.ladekort,.segkort,.ansatt) a:not(.btn){
  color:var(--bt-blue-link)}

/* Steglista paa det dype feltet. Nummer, streker og tekst maa snus, ellers
   staar moerk tekst paa moerk bunn. Nummerkulene beholder den blaa fyllen,
   bare lysere, saa de fortsatt leses som nummer og ikke som hull. */
.section--navy .steg-liste{border-top-color:rgba(255,255,255,.18);
  border-bottom-color:rgba(255,255,255,.18)}
.section--navy .steg{border-top-color:rgba(255,255,255,.14)}
.section--navy .steg__nr{background:rgba(111,178,227,.16);color:var(--bt-blue-200)}
.section--navy .steg__tit{color:#fff}
.section--navy .steg__txt{color:rgba(255,255,255,.72)}

.steg-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border-top:1px solid var(--bt-hairline);
  border-bottom:1px solid var(--bt-hairline)}
.steg{display:flex;gap:16px;align-items:flex-start;padding:16px 0;
  border-top:1px solid var(--bt-hairline)}
.steg:first-child{border-top:0}
.steg__nr{flex:0 0 32px;height:32px;display:flex;align-items:center;
  justify-content:center;background:var(--bt-blue-50);color:var(--bt-blue-600);
  border-radius:99px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.steg__tit{font-size:16px;font-weight:700;margin:4px 0 4px}
.steg__txt{font-size:15px;color:var(--bt-muted);margin:0;line-height:1.6}
/* Avkrysningsliste: «Dette er alltid inkludert». Punktene er ulikt lange,
   og i et rutenett blir alle celler i en rad like høye som den høyeste.
   Ligger streken UNDER teksten, havner den derfor 15 px under et langt
   punkt og 39 px under et kort, i samme rad, og lista ser ødelagt ut.
   Målt på næringssiden 9. september: hver rad 71 px høy, tekst 19 eller
   43 px. Streken ligger derfor OVER punktet: alle celler i en rad starter
   likt, strekene ligger på linje, og avstanden fra strek til tekst er den
   samme for hvert eneste punkt uansett lengde.
   Siste rad kan ha tomme celler. Det synes ikke, fordi en tom celle ikke
   har noe punkt og derfor ingen strek. */
.inkl{list-style:none;margin:0;padding:0;display:grid;gap:0 28px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border-bottom:1px solid var(--bt-hairline)}
.inkl li{list-style:none;position:relative;padding:12px 0 12px 28px;
  border-top:1px solid var(--bt-hairline);font-size:15px;line-height:1.6}
.inkl li::before{content:"";position:absolute;left:3px;top:20px;width:12px;height:7px;
  border-left:2px solid var(--bt-blue);border-bottom:2px solid var(--bt-blue);
  transform:rotate(-45deg)}
.inkl li b,.inkl li strong{color:var(--bt-navy)}

/* ── Kolonnetall etter antall kort ────────────────────────────────────
   auto-fit gir fire kolonner i en ramme paa 1072 px uansett hvor mange kort
   som finnes. Seks kort ble derfor fire pluss to, med to tomme celler og et
   tydelig hull nederst til hoyre. Maalt 9. september: fem slike rutenett paa
   fire sider.
   Her settes kolonnetallet etter antall kort, slik at siste rad aldri har
   mer enn EN tom celle. Kolonnetallet er valgt som det av 2, 3 og 4 som gir
   faerrest tomme celler, med det stoerste ved likt resultat.
   Gjelder bare over 900 px. Under det bestemmer auto-fit, som skal. */
@media(min-width:900px){
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(1):last-child){
    grid-template-columns:minmax(0,1fr)}
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(2):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(10):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(4):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(7):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(8):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(11):last-child){
    grid-template-columns:repeat(4,minmax(0,1fr))}
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(3):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(5):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(6):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(9):last-child),
  :is(.cards,.bildestripe,.inkl,.ikonliste,.gigrid,.segcards,.ansatte):has(>:nth-child(12):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Samme regel for produktlista i megamenyen. Den sto paa auto-fit og fikk
     fem kolonner i menybredden, saa aatte produkter ble fem pluss tre. Den
     dagen ArcBox gikk ut, ble det sju, altsaa fem pluss to: hullet nederst
     til hoyre vokste av at vi FJERNET noe. Kolonnetallet velges her mellom
     3, 4 og 5 etter hva som gir faerrest tomme celler. */
  .mega__grid:has(>:nth-child(6):last-child),
  .mega__grid:has(>:nth-child(9):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega__grid:has(>:nth-child(4):last-child),
  .mega__grid:has(>:nth-child(7):last-child),
  .mega__grid:has(>:nth-child(8):last-child),
  .mega__grid:has(>:nth-child(11):last-child){
    grid-template-columns:repeat(4,minmax(0,1fr))}
  .mega__grid:has(>:nth-child(5):last-child),
  .mega__grid:has(>:nth-child(10):last-child){
    grid-template-columns:repeat(5,minmax(0,1fr))}

  /* Talltavla staar fast paa tre kolonner. Med FIRE tall ble det tre pluss
     én, altsaa to tomme celler og et ensomt tall paa egen rad. Fire skal
     vaere to og to. Fem og seks staar som de er: tre kolonner gir da
     henholdsvis én tom celle og ingen. */
  .stats:has(>:nth-child(4):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Filmscene: knapp i heroen og fullskjerm gjennomgang ─────────────
   Avloeser scroll-scrubbingen. Heroen er ett skjermbilde med et skarpt
   stillbilde; sekvensen spilles bare naar noen ber om den, og lastes
   foerst da. Se js/film.js for hvorfor.

   Merkevarens bevegelsesregler gjelder: geometrisk, ingen sprett, og
   grensesnittbevegelse under 500 ms. Selve kamerakjoeringen er innhold,
   ikke grensesnitt, og er derfor ikke bundet av den grensen. */
.filmknapp{display:inline-flex;align-items:center;gap:12px;margin-top:22px;
  padding:8px 20px 8px 8px;border-radius:99px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:#fff;
  background:rgba(10,22,40,.55);border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease)}
.filmknapp:hover{background:rgba(10,22,40,.72);border-color:rgba(255,255,255,.55)}
.filmknapp:focus-visible{outline:2px solid #fff;outline-offset:3px}
.filmknapp__ring{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--bt-blue);color:#fff;flex:0 0 auto}
.filmknapp__ring svg{width:20px;height:20px}

html.film-aapen{overflow:hidden}
/* Over menylinja, som ligger paa 90. Foerste utgave sto paa 80 og ble
   liggende under den, saa menyen sto midt i fullskjermbildet og
   lukkeknappen havnet bak den. */
.film{position:fixed;inset:0;z-index:120;background:var(--bt-navy);
  display:grid;place-items:center;overflow:hidden}
.film__lerret{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity var(--motion-slower) var(--ease)}
.film--klar .film__lerret{opacity:1}

/* Lasteren staar midt paa til foerste etappe er inne, og forsvinner da. */
.film__last{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:opacity var(--motion-slow) var(--ease)}
.film--klar .film__last{opacity:0;pointer-events:none}
.film__last-spor{width:180px;height:3px;border-radius:99px;background:rgba(166,208,239,.22);overflow:hidden}
.film__last-spor i{display:block;width:100%;height:100%;background:var(--bt-blue);
  transform:scaleX(0);transform-origin:left;transition:transform var(--motion-slow) var(--ease)}
.film__last-tekst{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bt-blue-300)}

.film__etikett{position:absolute;z-index:3;pointer-events:none;
  transform:translate(-50%,-100%)}
.film__etikett-navn{display:block;background:var(--bt-white);color:var(--bt-navy);
  font-weight:700;font-size:15px;padding:8px 13px 6px;white-space:nowrap;margin-bottom:38px;
  position:relative;left:50%;transform:translateX(calc(-50% + var(--f-dx,0px)));
  box-shadow:var(--shadow-flate)}
.film__etikett-tall{display:block;background:var(--bt-navy);color:#fff;font-size:12px;
  padding:4px 10px 5px;white-space:nowrap;position:absolute;left:50%;top:36px;
  transform:translateX(calc(-50% + var(--f-dx,0px)));box-shadow:var(--shadow-flate)}
/* Uten andrelinje skal brikka vekk helt, ellers staar den igjen tom under navnet.
   Samme regel som .scene__etikett-tall. */
.film__etikett-tall:empty{display:none}
.film__etikett-strek{position:absolute;left:50%;bottom:8px;width:1px;height:26px;
  background:var(--bt-white);transform:translateX(-50%)}
.film__etikett-prikk{position:absolute;left:50%;bottom:0;width:10px;height:10px;border-radius:50%;
  background:var(--bt-blue);border:2px solid var(--bt-white);transform:translate(-50%,50%)}

.film__steg{position:absolute;left:50%;bottom:26px;z-index:3;display:flex;gap:8px;
  transform:translateX(-50%)}
.film__steg i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.30);
  transition:background var(--motion-base) var(--ease)}
.film__steg i.paa{background:var(--bt-blue-300)}

.film__lukk{position:absolute;top:16px;right:16px;z-index:4;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(10,22,40,.62);color:#fff;border:1px solid rgba(255,255,255,.28);
  transition:background var(--motion-base) var(--ease)}
.film__lukk:hover{background:var(--bt-navy)}
.film__lukk:focus-visible{outline:2px solid #fff;outline-offset:2px}
.film__lukk svg{width:20px;height:20px}

@media(prefers-reduced-motion:reduce){
  .film__lerret,.film__last,.film__last-spor i{transition-duration:1ms}
}

/* Sloeret i filmheroen foelger teksten, og teksten staar to ulike steder.

   Maalt paa foerste utgave, som arvet scrollvariantens vannrette sloer:
   overskriften laa paa 2,35:1 mot flaten bak paa desktop og ingressen paa
   2,51:1. Scrollvarianten slapp unna fordi den la et ekstra sloer oppaa
   akkurat mens ingressen vistes. Filmheroen viser teksten hele tiden.

   Liggende: teksten staar til venstre, saa sloeret er sterkest der og slipper
   taket mot hoeyre der bygget skal ses.
   Staaende: teksten spenner over hele bredden fra toppen, saa sloeret kommer
   ovenfra og slipper taket i nedre tredel der carporten og bilene staar. */
/* Proevd og forkastet: aa skyve utsnittet med object-position. Liggende
   kilde er 1600x900 og lerretet 1440x829, altsaa nesten samme format, saa
   cover beskjaerer knapt og det er ingenting aa flytte paa. Maalingen var
   uendret. Kontrasten maa derfor komme fra sloeret. */
/* Knekkpunktet paa 64 % er ikke valgt paa slump: h1 slutter paa 63 % av
   bredden paa hver eneste side. Foerste utgave falt av alt paa 56 % og var
   nede i 47 % daekning der overskriften slutter. Det holdt saa lenge
   stillbildene var de moerke aapningsbildene, og sviktet den dagen
   stillbildene ble valgt etter motiv: agri-pv 4,04:1 og landbruk 4,42:1.
   Sloeret maa daekke teksten, ikke en tenkt tekstbredde. */
.hero--film .hero__plakat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(10,22,40,.88) 0%,
    rgba(10,22,40,.86) 40%,
    rgba(10,22,40,.72) 64%,
    rgba(10,22,40,.22) 82%,
    rgba(10,22,40,0) 96%)}
@media (orientation: portrait){
  .hero--film .hero__plakat::after{
    background:linear-gradient(to bottom,
      rgba(10,22,40,.86) 0%,
      rgba(10,22,40,.82) 46%,
      rgba(10,22,40,.44) 72%,
      rgba(10,22,40,.06) 100%)}
}

/* Sluttkortet: samme uttrykk som tekstboblen hadde i scrollscenen, fordi det
   ER den boblen. Paper, navy tekst, blaa 600 paa etiketten, og skygge fordi
   den ligger over foto uten ramme. */
.film__kort{position:absolute;z-index:3;left:clamp(20px,6vw,96px);bottom:clamp(64px,11vh,120px);
  max-width:42ch;padding:26px 30px 22px;background:var(--bt-paper);color:var(--bt-navy);
  box-shadow:0 14px 34px rgba(10,22,40,.22);
  opacity:0;transform:translateY(12px);
  transition:opacity var(--motion-slower) var(--ease-entrance,var(--ease)),
             transform var(--motion-slower) var(--ease-entrance,var(--ease))}
.film__kort.vis{opacity:1;transform:none}
.film__kort .eyebrow{color:var(--bt-blue-600,#0063A8);margin:0 0 8px}
.film__kort b{display:block;font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.25;
  letter-spacing:-.005em}
.film__kort small{display:block;margin-top:10px;font-size:14px;color:var(--bt-muted)}

/* Uttoningen til slutt. Siden er allerede flyttet ned bak laget, saa naar
   dette er ferdig staar du i innholdet og kan rulle videre. */
.film--ut{opacity:0;pointer-events:none;transition:opacity 620ms var(--ease)}

@media(prefers-reduced-motion:reduce){
  .film__kort,.film--ut{transition-duration:1ms}
}


/* Veien fra et panel til referansens egen side. Knappen staar for seg,
   med luft over, fordi den er en handling og ikke en setning til. */
.pmer{margin-top:22px}