/* ============================================================
   LummeCo — premium-retning, kun lokalt
   ============================================================
   Lastes etter temaets styles.css og roerer ingen produksjonsfil.

   Utgangspunktet var ikke daarlig bygget: hierarkiet, rutenettet og
   fotografiet holder maal. Det som leste som tegneserie var fire ting,
   og de fjernes her.

   1. Den harde forskjoevne skyggen under knappene (0 6px 0). Det er
      selve signaturen paa en leketoeysknapp, og den forsterkes av at
      knappen synker 4 piksler naar man trykker.
   2. Tusjstreken bak noekkelord. En bokstavelig markoerpenn er noe man
      bruker i et klasserom, ikke i en merkevare som skal signalisere
      haandverk til hundre tusen kroner.
   3. Nunito Sans. En vennlig humanist med myke former. Den gjoer
      nettstedet imoetekommende, men aldri eksklusivt.
   4. Sterk gul brukt som flate. Gult er merkevaren, men naar det
      dekker knapper, merker, tall og baand samtidig, blir det leketoey.
      Her er gult redusert til aksent, og baerer fortsatt merkevaren.
   ============================================================ */

:root{
  /* ---- Typografi ----
     Nunito Sans staar. Den kommer fra LummeCos eget designsystem, og
     aa bytte den var aa overstyre merkevaren, ikke aa forbedre den.
     Det som gjorde uttrykket leketoeyaktig laa ikke i skriften, men i
     de harde skyggene, tusjstreken og gult brukt som flate.

     Det som beholdes fra typografiarbeidet er behandlingen: stoerre
     sprang mellom overskrift og broedtekst, strammere sperring og mer
     luft mellom linjene. Det gjoer samme skrift dyrere aa se paa. */

  /* ---- Flater ----
     Den gamle papirtonen var blaalig (#f4f4fa) og gjorde nettstedet
     kjoelig og digitalt. En varm, nesten umerkelig beige leser som
     papir og gir dyrere inntrykk. */
  --paper-2:#f7f6f3;
  --paper-3:#eceae5;
  --line:#e3e0d9;

  /* Blekket er gjort dypere og litt varmere. Ren graabblaa tekst er
     kald; dette naermer seg trykksverte. */
  --ink:#16161d;
  --ink-2:#5f5f6b;
  --ink-3:#93938f;
  --muted:#5f5f6b;

  /* ---- Form ----
     16 piksler avrunding er vennlig. 3 er presist. Forskjellen mellom
     et leketoey og et instrument ligger stort sett her. */
  --radius:4px;
  --radius-sm:3px;

  /* Skygger byttes mot haarfine kanter. En premiumflate hviler paa
     siden, den svever ikke over den. */
  --shadow:0 1px 3px rgba(22,22,29,.06),0 12px 32px rgba(22,22,29,.05);
  --shadow-sm:0 1px 2px rgba(22,22,29,.05);
}

@media (min-width:900px){
  :root{
    /* Stoerre sprang mellom overskrift og broedtekst. Lite kontrast i
       typestoerrelse er et av de sikreste tegnene paa et rimelig
       nettsted. */
    --t-h1:3.55rem;   --t-h1-lh:1.08;  --t-h1-ls:-.028em; --t-h1-vekt:800;
    --t-h2:2.3rem;    --t-h2-lh:1.18;  --t-h2-ls:-.024em;
    --t-h3:1.28rem;   --t-h3-lh:1.42;
    --t-lead:1.2rem;  --t-lead-lh:1.75;
  }
}

/* ---------- Overskrifter ----------
   Merkevareskriften, men strammere sperret enn foer. Nunito Sans er
   luftig tegnet, og uten negativ sperring flyter store titler fra
   hverandre. */
h1,h2,h3,.hero__title,.section__title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.024em;
}
.hero__title{font-weight:var(--t-h1-vekt)}
h3,.section__title--liten{font-weight:700;letter-spacing:-.012em}

/* Broedtekst faar litt mer luft mellom linjene. Serif over, grotesk
   under, og rikelig linjeavstand er en klassisk redaksjonell oppskrift. */
body,p,li{font-family:var(--font)}
.section__lead,.hero__lead{
  font-size:var(--t-lead);
  line-height:var(--t-lead-lh);
  color:var(--ink-2);
  max-width:60ch;
}

/* ---------- Tusjstreken ----------
   Uthevingen er en markoerstrek: en gul flate bak den nedre delen av
   ordet, slik en tusj legger seg. Prosenten er i em-forhold via
   gradienten, saa den foelger skriftstoerrelsen av seg selv.

   Flaten gaar litt utenfor bokstavene i hver ende. En tusj stopper
   ikke presis paa siste bokstav, og uten den lille overhengen ser
   streken ut som et element og ikke som et strok.

   Der teksten staar hvit paa moerkt eller paa fotografi, er dette
   ikke mulig: gult bak hvitt gir ingen lesbarhet. De stedene har
   egne regler lenger nede, og beholder understreken. */
.hl{
  background:linear-gradient(180deg,transparent 56%,var(--brand) 56%);
  color:var(--ink);
  padding:0 .08em;
  margin:0 -.08em;
  box-shadow:none;
  /* Flaten skal ikke brekke i to naar ordet gaar over to linjer. */
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---------- Knapper ----------
   Den harde skyggen og synkebevegelsen fjernes.

   Primaerknappen er gul med sort skrift. Den er merkevaren, og den
   er den ene handlingen siden ber om: bestill befaring. Da skal den
   se lik ut overalt, saa den kjennes igjen uten aa leses.

   Paa gule og moerke flater setter temaet den sort i stedet, se
   .section--dark .btn--primary. Der ville gult paa gult forsvunnet. */
.btn{
  border-radius:var(--radius-sm);
  font-family:var(--font);
  font-weight:600;
  letter-spacing:.004em;
  border-width:1px;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--primary{
  --bg:var(--brand);
  --fg:var(--ink);
  box-shadow:none;
  border-color:var(--brand);
}
.btn--primary:hover{--bg:var(--brand-light);border-color:var(--brand-light);box-shadow:none}
.btn--primary:active{--bg:var(--brand-dark);border-color:var(--brand-dark);box-shadow:none;transform:none}
.btn--ghost{border-color:var(--line);--fg:var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff;border-color:var(--ink)}
.btn--lg{padding:18px 34px;font-size:15.5px}

/* Én gul knapp faar staa igjen, i toppen, som merkevareanker. Flat,
   uten skygge. */
.site-header__cta .btn--primary{
  --bg:var(--brand);
  --fg:var(--ink);
  border-color:var(--brand);
}
.site-header__cta .btn--primary:hover{--bg:var(--brand-light);border-color:var(--brand-light)}

/* ---------- Stikktitler ----------
   Prikken fjernes. Sperret versal i dempet blekk er den stille
   varianten av det samme signalet. */
.eyebrow{
  font-family:var(--font);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--ink-3);
  gap:0;
}
.eyebrow__dot{display:none}

/* ---------- Tall i stegkortene ----------
   Fra gul klump med glorie til tynn ramme. Tallet skal leses, ikke
   ropes. */
.step__no{
  width:34px;height:34px;
  border-radius:2px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
}

/* ---------- Kort og flater ----------
   Haarfin kant i stedet for skygge, og roligere hjoerner. */
.kort,.card,.step,.tj-rad,.pris-kort,.omtale{
  border-radius:var(--radius);
  box-shadow:none;
  border:1px solid var(--line);
}
/* Foer- og etter-kortet staar uten ramme. Fotografiet har sin egen
   kant i motivet, og en strek rundt det gir bare en strek til. */
.fekort{border-radius:var(--radius);box-shadow:none;border:0}

/* ---------- Toppbaandet ----------
   Et sterkt gult baand oeverst er det foerste oeyet moeter, og det
   ropte kampanje. Blekksort med gull som aksent sier det samme uten
   aa heve stemmen. */
.kampanje-bar,.varselbar,.topbar,.promo-bar{
  background:var(--ink) !important;
  color:#f2f1ee !important;
}
.kampanje-bar a,.varselbar a,.topbar a,.promo-bar a{color:var(--brand) !important}

/* ---------- Luft ----------
   Premium kjennes mest paa hva som ikke staar der. */
@media (min-width:900px){
  .section{padding-top:104px;padding-bottom:104px}
  .section--tight{padding-top:76px;padding-bottom:76px}
  .section__title{margin-bottom:22px}
}

/* Tillitsraden under heroen: tallene i serif gir dem tyngde. */
.trust-row__num{font-family:var(--display);font-weight:800;letter-spacing:-.015em}
.trust-row__star{color:var(--brand)}

/* ============================================================
   Runde to
   ============================================================ */

/* ---------- Toppbaandet ----------
   Riktig klassenavn er campaign-bar. Sterk gul over hele bredden er
   det foerste blikket treffer, og det satte tonen for hele siden. */
.campaign-bar{
  background:var(--ink);
  color:#e8e7e3;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12.5px;
  letter-spacing:.005em;
}
.campaign-bar a,.campaign-bar strong,.campaign-bar b{color:var(--brand)}
.campaign-bar__timer{
  background:rgba(255,255,255,.1);
  color:#e8e7e3;
  border-radius:2px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Det gule skjemabaandet ----------
   En heldekkende mettet gulflate midt i siden var den stoerste
   gjenvaerende flaten som ropte. Blekksort med gult som aksent gir
   samme oppmerksomhet, men leser som en invitasjon i stedet for et
   tilbudsskilt. */
.hurtig--gul{
  background:var(--ink);
  color:#f2f1ee;
}
.hurtig--gul .hurtig__tittel{color:#fff}
.hurtig--gul .hurtig__lead,
.hurtig--gul .hurtig__smaa,
.hurtig--gul .hurtig__samtykke{color:rgba(242,241,238,.72)}
.hurtig--gul .hurtig__samtykke a{color:var(--brand)}
.hurtig--gul .hurtig__felt input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:var(--radius-sm);
}
.hurtig--gul .hurtig__felt input::placeholder{color:rgba(242,241,238,.45)}
.hurtig--gul .hurtig__felt input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,214,31,.18);
  outline:none;
}
/* Her, mot sort, er den gule knappen paa sin plass. */
.hurtig--gul .btn--primary{
  --bg:var(--brand);
  --fg:var(--ink);
  border-color:var(--brand);
}
.hurtig--gul .btn--primary:hover{--bg:var(--brand-light);border-color:var(--brand-light)}

/* ---------- Tillitsraden ----------
   Den brakk paa tre linjer da overskriften ble stoerre. Fire like
   kolonner med haarfine skiller leser som et faktaark, ikke som
   merker paa en emballasje. */
@media (min-width:900px){
  .trust-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    flex-wrap:nowrap;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
    margin:0 0 34px;
  }
  .trust-row li{padding:0 20px;border-left:1px solid var(--line)}
  .trust-row li:first-child{padding-left:0;border-left:0}
}
.trust-row__num{font-size:1.42rem;display:block;margin-bottom:2px}
.trust-row li{font-size:.8rem;color:var(--ink-3);line-height:1.35}

/* ---------- Telefonikonet ----------
   ☎ er en emoji. Den gjengis i fullfarge paa mange systemer og
   trekker et helt hjoerne av siden ned i uttrykk. Den dempes til
   samme blekk som teksten rundt. */
.link-phone span[aria-hidden],
.btn span[aria-hidden]{
  filter:grayscale(1);
  opacity:.55;
  font-size:.9em;
}

/* ---------- Bevisstroken ----------
   Stedsnavnene under heroen sto som en tett rekke. Sperring og
   dempet blekk gjoer dem til en stille signaturrad. */
.proof-strip__logos span{
  letter-spacing:.06em;
  font-size:.78rem;
  color:var(--ink-3);
}
.proof-strip>span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Bevisstroken under heroen ----------
   Sto som en venstrestilt rad: ledetekst, og saa tretten stedsnavn paa
   rekke i samme dempede graa. Det leses som en fotnote, ikke som et
   argument — og det er tretten kommuner som bruker dem.

   Navnene faar hver sin ramme. Da blir de tellbare: oeyet ser «mange
   steder» foer det har lest ett eneste ord. Sentrert, fordi raden ikke
   hoerer til noen spalte — den staar mellom to seksjoner. */
.proof-strip--under{
  display:block;
  text-align:center;
  margin-top:0;
  padding-top:40px;
  padding-bottom:44px;
  border-top:1px solid var(--line);
}
.proof-strip--under>span{
  display:block;
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:.15em;
  color:var(--ink-3);
}
.proof-strip--under .proof-strip__logos{
  justify-content:center;
  align-items:center;
  gap:9px;
  opacity:1;
  /* Rader som deler seg jevnt.
     Stedene maaler 1218 piksler til sammen og beholderen er 1100, saa de
     brakk tolv og to. To igjen paa siste rad ser ut som en glipp, ikke som
     en liste. Med en smalere ramme deler de seg omtrent midt paa, og det
     holder ogsaa naar kontoret legger til eller fjerner et sted. */
  max-width:660px;
  margin-inline:auto;
}
.proof-strip--under .proof-strip__logos span{
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  /* Uten dette arver pillen broedtekstens linjehoyde og blir 44 piksler
     hoy rundt en trettenpunkts tekst. */
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease;
}
.proof-strip--under .proof-strip__logos span:hover{border-color:var(--ink-3);color:var(--ink)}

/* Lenken er ikke et sted, og skal ikke se ut som ett. */
.proof-strip--under .proof-strip__alle{
  margin-left:6px;
  padding:7px 2px;
  font-size:13px;
  border-bottom:1px solid transparent;
}
.proof-strip--under .proof-strip__alle:hover{border-bottom-color:currentColor}

@media (max-width:620px){
  .proof-strip--under{padding-top:30px;padding-bottom:32px}
  .proof-strip--under .proof-strip__logos{gap:7px}
  .proof-strip--under .proof-strip__logos span{padding:6px 11px;font-size:12.5px}
}

/* ---------- Varighetsmerkene i tjenestelisten ----------
   Sterk gul pille med full avrunding er den samme formen som en
   klistremerkepremie. Rammen beholder informasjonen og roper ikke. */
.tjrad__meta,.badge{
  background:transparent;
  border:1px solid var(--brand-dark);
  color:#8a7300;
  border-radius:2px;
  font-family:var(--font);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.03em;
  padding:5px 10px;
}

/* Merkene oppaa foer- og etterbildene: samme behandling, men de maa
   holde seg lesbare mot fotografi. */
.fe__merke,.hero__media-merke{
  border-radius:2px;
  font-family:var(--font);
  font-weight:600;
  letter-spacing:.06em;
  font-size:.68rem;
  text-transform:uppercase;
  background:rgba(22,22,29,.82);
  color:#fff;
  backdrop-filter:blur(6px);
}

/* ---------- Bilder ----------
   Fotografiet er noe av det beste paa nettstedet. Rolige hjoerner lar
   det staa som fotografi i stedet for som en app-flate. */
.hero__media img,.fekort img,.step__viz img,.kort img{border-radius:var(--radius)}

/* ---------- Lenker i broedtekst ----------
   Gullstrek under, ikke gul flate bak. */
.section__lead a,.prose a,.artikkel a{
  color:var(--ink);
  text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--brand-dark);
}
.section__lead a:hover,.prose a:hover{box-shadow:inset 0 -2px 0 var(--brand)}

/* ============================================================
   «Alt vi gjør» som karusell
   ============================================================
   Radene laa under hverandre som en liste. Som hoeye bildekort paa
   rad blir de noe man blar i, og fotografiet faar plass til aa gjoere
   jobben sin. Markupen fra temaet er urort; alt her er oppsett.

   Hover-videoen i app.js virker uendret, fordi den henger paa
   .tjrad--film og ikke paa oppsettet rundt.
   ============================================================ */

.tjgruppe{position:relative}
.tjgruppe__hode{margin-bottom:20px}

.tjliste{
  display:flex;
  flex-direction:row;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* Kortene skal kunne gaa helt ut i kanten av innholdsbredden, men
     rulle videre bak den. */
  padding:2px 2px 18px;
  margin:0 -2px;
  scrollbar-width:none;
}
.tjliste::-webkit-scrollbar{display:none}
.tjliste--drar{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.tjliste--drar *{pointer-events:none}

/* ---------- Selve kortet ---------- */
.tjrad{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:clamp(238px,23vw,306px);
  aspect-ratio:3/4;
  scroll-snap-align:start;
  /* Samme hjoerne som knappene. En knapp paa 3 piksler ved siden av et
     kort paa 16 leser som to ulike systemer. */
  border-radius:var(--radius-sm);
  overflow:hidden;
  padding:0;
  border:0;
  background:var(--ink);
  isolation:isolate;
}
.tjrad:hover{transform:none;box-shadow:0 18px 44px rgba(22,22,29,.16)}

/* Bildet og videoen fyller hele kortet. */
.tjrad__media{
  position:absolute;
  inset:0;
  width:auto;height:auto;
  border:0;
  border-radius:0;
  z-index:0;
}
.tjrad:hover .tjrad__media{border:0}
.tjrad__plakat,.tjrad__film{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:0;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .35s ease;
}
.tjrad:hover .tjrad__plakat{transform:scale(1.04)}
.tjrad:hover .tjrad__film{transform:scale(1.04)}

/* Mork bunn saa teksten alltid er lesbar, uansett fotografi. */
.tjrad::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,
    rgba(10,10,14,0) 34%,
    rgba(10,10,14,.55) 62%,
    rgba(10,10,14,.9) 100%);
  pointer-events:none;
}

/* ---------- Teksten ---------- */
.tjrad__tekst{
  position:absolute;
  z-index:2;
  left:20px;right:20px;bottom:52px;
  display:block;
}
.tjrad__navn{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.32rem;
  line-height:1.2;
  letter-spacing:-.015em;
  color:#fff;
  margin-bottom:6px;
}
.tjrad__sub{
  display:block;
  font-size:.86rem;
  line-height:1.45;
  color:rgba(255,255,255,.76);
}

/* Varigheten oeverst, som en stille merking. */
.tjrad__meta{
  position:absolute;
  z-index:2;
  top:14px;left:14px;
  background:rgba(10,10,14,.55);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  backdrop-filter:blur(8px);
  font-size:.68rem;
  padding:4px 9px;
}

/* «Les mer» med pilen fra temaet. Teksten legges paa her fordi
   markupen bare har pilen. */
.tjrad__pil{
  position:absolute;
  z-index:2;
  left:20px;bottom:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;height:auto;
  background:none;
  border:0;
  color:#fff;
  font-family:var(--font);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.01em;
}
.tjrad__pil::before{content:"Les mer"}
.tjrad__pil svg{width:16px;height:16px;transition:transform .3s ease}
.tjrad:hover .tjrad__pil svg{transform:translateX(5px)}

/* ---------- Pilene ---------- */
.kar__nav{display:flex;gap:8px;margin-top:4px}
.kar__pil{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,opacity .18s ease;
}
/* Den aktive pilen i merkevaregult med sort pil, saa den leses som en
   knapp man skal trykke paa og ikke som en ramme. Hover bruker samme
   lysere gult som CTA-en i headeren, saa de to oppfoerer seg likt.
   Den utgraaede pilen blir hvit: en gul knapp som ikke gjoer noe
   inviterer til et klikk som ikke skjer. */
.kar__pil:not(:disabled){
  background:var(--brand);
  border-color:var(--brand);
  color:var(--ink);
}
.kar__pil:hover:not(:disabled){background:var(--brand-light);border-color:var(--brand-light);color:var(--ink)}
.kar__pil:disabled{background:var(--white);border-color:var(--line);opacity:.35;cursor:default}
.kar__pil svg{width:17px;height:17px}

@media (max-width:640px){
  .tjrad{width:clamp(210px,72vw,262px)}
  .tjrad__navn{font-size:1.16rem}
}

/* ============================================================
   Alle tjenestene paa én linje
   ============================================================
   Gruppeoverskriftene er borte; kategorien staar i hvert kort.
   Karusellen faar rulle helt ut i hoeyre kant, saa det er tydelig at
   det finnes mer bak kanten. */
.kar{position:relative;margin-top:26px}
.tjliste--samlet{
  /* Bryter ut av innholdsbredden mot hoeyre. Et kort som stopper pent
     ved margen ser ferdig ut, og da blar ingen videre. */
  margin-right:calc((100vw - min(100vw, var(--maxw))) / -2);
  padding-right:max(24px,calc((100vw - min(100vw, var(--maxw))) / 2));
}
.tjgrupper__topp{margin-bottom:0}

/* Kategorien i kortet: hvit versal mot fotografiet, oeverst. */
.tjliste--samlet .tjrad__meta{
  top:14px;left:14px;
  background:rgba(10,10,14,.5);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.62rem;
  font-weight:600;
  padding:5px 10px;
}

@media (max-width:900px){
  .tjliste--samlet{margin-right:-24px;padding-right:24px}
}

/* ============================================================
   Hero i full bredde med video
   ============================================================
   Videoen laa i hoeyre kolonne av et todelt rutenett. Naar den fyller
   hele flaten og teksten ligger oppaa, blir fotografiet det foerste
   man moeter i stedet for et element ved siden av. Det er den enkleste
   maaten aa kjoepe seg tyngde paa.

   Headeren ligger gjennomsiktig over videoen og blir hvit naar man
   ruller. Temaet setter allerede .is-stuck; her styres bare utseendet.
   ============================================================ */

/* ---------- Baandet og headeren flyter oeverst ---------- */
body.home .campaign-bar{position:fixed;top:0;left:0;right:0;z-index:62}
body.home .site-header{
  position:fixed;
  top:var(--kb-h,38px);
  left:0;right:0;
  z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease;
}
/* Logo og meny i hvitt saa lenge de ligger over videoen. */
body.home .site-header:not(.is-stuck) .main-nav a,
body.home .site-header:not(.is-stuck) .drop-toggle,
body.home .site-header:not(.is-stuck) .link-phone,
/* Telefonikonet har egen fargeregel i temaet. Arver man bare farge fra
   lenka, blir tegnet staaende sort paa videoen. */
body.home .site-header:not(.is-stuck) .link-phone__icon{color:#fff}
body.home .site-header:not(.is-stuck) .logo__img{filter:brightness(0) invert(1)}

/* Ved rulling: hvit, med haarfin kant. Ikke helt ugjennomsiktig, saa
   innholdet under saavidt skinner gjennom og siden foeles i bevegelse. */
body.home .site-header.is-stuck{
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px rgba(22,22,29,.06);
}

/* ---------- Selve heroen ---------- */
.hero--home{
  position:relative;
  isolation:isolate;
  /* Baandet og headeren ligger oppaa heroen, ikke over den, saa hele
     skjermen er heroens. svh og ikke vh: paa mobil endrer vh seg naar
     nettleserens egen linje glir bort, og da hopper hele siden. */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  /* Kolonne, ikke rad. I rad la barna seg ved siden av hverandre.

     Sto foer paa flex-end, fordi bevisstroken laa nederst inne i heroen og
     skulle hvile mot underkanten. Da stripa ble flyttet ut, var det bare
     tekstblokken igjen — og den ble liggende presset ned mot bunnen med all
     luften samlet over seg. Naa staar den midt i flaten, som er der oyet
     leter etter den. */
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--kb-h,38px) + var(--hdr-h,72px) + 80px);
  padding-bottom:64px;
  background:var(--ink);
  overflow:hidden;
}

/* Videoen dekker hele flaten. */
.hero--home .hero__media{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  max-width:none;
  aspect-ratio:auto;
  border-radius:0;
  border:0;
  z-index:0;
  overflow:hidden;
}
.hero--home .hero__media video,
.hero--home .hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:0;
}

/* Slør slik at hvit tekst er lesbar uansett hvilket bilde i filmen som
   staar akkurat naa. To lag: ett moerkt fra bunnen, ett svakt over alt. */
.hero--home .hero__media::after{
  content:"";
  position:absolute;inset:0;
  /* Nok til at hvit tekst er lesbar, lite nok til at man ser at det
     faktisk er en film. Tyngden ligger til venstre der teksten staar,
     og slipper hoeyre side fri. */
  background:
    linear-gradient(90deg,rgba(10,10,14,.82) 0%,rgba(10,10,14,.5) 42%,rgba(10,10,14,.12) 78%),
    linear-gradient(180deg,rgba(10,10,14,.35) 0%,rgba(10,10,14,0) 30%,rgba(10,10,14,.35) 100%);
  pointer-events:none;
}
.hero--home .hero__media-merke{
  position:absolute;
  right:28px;top:calc(var(--kb-h,38px) + var(--hdr-h,72px) + 28px);
  bottom:auto;left:auto;
  z-index:2;
}

/* Innholdet legges oppaa, i én kolonne.
   Rutenettet maa IKKE vaere posisjonert: da blir det beholderen for
   den absolutt plasserte videoen, og videoen krymper til innholds-
   bredden i stedet for aa dekke hele seksjonen. Z-indeksen flyttes
   derfor ned paa selve teksten. */
.hero--home .hero__grid{
  position:static;
  display:block;
  width:100%;
}
.hero--home .hero__copy{
  position:relative;
  z-index:2;
  max-width:62ch;
}

/* ---------- Tekst i hvitt ---------- */
.hero--home .hero__title{color:#fff;text-shadow:0 1px 30px rgba(0,0,0,.25)}
.hero--home .hero__lead,.hero--home .hero__lead p{color:rgba(255,255,255,.84)}
.hero--home .eyebrow{color:rgba(255,255,255,.68)}
/* I heroen: samme flate som over tallrekken, og hvit tekst.
   Flaten starter paa 68 prosent, altsaa nede ved grunnlinjen, saa
   den ligger under bokstavene og ikke bak dem. Da holder den hvite
   teksten seg lesbar mot fotografiet. */
.hero--home .hl{
  color:#fff;
  background:linear-gradient(180deg,transparent 68%,var(--brand) 68%);
  padding:0 .1em;
  margin:0 -.1em;
  box-shadow:none;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.hero--home .trust-row{border-top-color:rgba(255,255,255,.2);border-bottom-color:rgba(255,255,255,.2)}
.hero--home .trust-row li{border-left-color:rgba(255,255,255,.2);color:rgba(255,255,255,.62)}
.hero--home .trust-row__num{color:#fff}

/* Knappene mot moerk flate: gult primaert, hvit kontur sekundaert. */
.hero--home .btn--primary{--bg:var(--brand);--fg:var(--ink);border-color:var(--brand)}
.hero--home .btn--primary:hover{--bg:var(--brand-light);border-color:var(--brand-light)}
.hero--home .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.42)}
.hero--home .btn--ghost:hover{--bg:#fff;--fg:var(--ink);border-color:#fff}
.hero--home .btn span[aria-hidden]{filter:none;opacity:.8}

/* Bevisstroken rett under heroen staar paa hvitt igjen. */
.hero--home .proof-strip{
  position:relative;
  z-index:2;
  width:100%;
  margin-top:52px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero--home .proof-strip>span,.hero--home .proof-strip__logos span{color:rgba(255,255,255,.55)}

/* Andre sider enn forsiden beholder vanlig header. */
body:not(.home) .site-header{position:sticky;top:0;background:var(--white)}

@media (max-width:900px){
  /* Heroen fyller skjermen ogsaa paa mobil.
     Sto paa auto, og da ble den 637 piksler i et vindu paa 812: en
     avkuttet flate med en strimmel av neste seksjon under, som verken
     leses som en hero eller som noe man skal rulle videre fra.
     svh og ikke vh — vh endrer seg naar nettleserlinjen glir bort, og
     da hopper hele siden mens man ruller. */
  .hero--home{
    min-height:100svh;
    padding-top:calc(var(--kb-h,38px) + var(--hdr-h,64px) + 24px);
    padding-bottom:32px;
  }
  .hero--home .hero__copy{max-width:none}
}
/* Lave skjermer i liggende format: der er 100svh saa lite at innholdet
   ikke faar plass, og da skal heroen heller vokse enn aa klippe. */
@media (max-width:900px) and (max-height:560px){
  .hero--home{min-height:auto}
}

/* ============================================================
   Justeringer i «Alt vi gjør»
   ============================================================ */

/* Venstrestilt overskrift. Sentrert tekst over en rad som starter i
   venstre kant lager to ulike akser i samme seksjon. */
.tjgrupper__topp{text-align:left}
.tjgrupper .section__title--center,
.tjgrupper .section__lead--center{
  text-align:left;
  margin-left:0;
  margin-right:0;
}
.tjgrupper .section__lead--center{max-width:62ch}
.tjgrupper .eyebrow{justify-content:flex-start}

/* Hoeyere kort. Mer av fotografiet faar staa, og teksten faar puste
   mot bunnen. */
.tjliste--samlet .tjrad{aspect-ratio:3/5.3}

/* Pilen i «Les mer» i merkevaregult. Teksten blir staaende hvit, saa
   det er bevegelsen og ikke ordet som faar farge. */
.tjrad__pil{color:#fff}
.tjrad__pil svg{color:var(--brand)}
.tjrad:hover .tjrad__pil svg{color:var(--brand-light)}

/* ---------- Filmen i heroen ----------
   Var en YouTube-innbygging, som maatte blaases opp i begge retninger
   fordi en iframe ikke kan object-fit. Naa er det en <video>, og da
   holder object-fit:cover lenger oppe. Igjen staar plakatbildet som
   bakgrunn, saa flaten ikke er sort mens filmen laster. */
.hero--home .hero__media{background-size:cover;background-position:center}

/* Merket «Takfornying på 30 sekunder» fjernes. Det var en billedtekst
   til den gamle videoen, og passer ikke naar filmen fyller hele flaten. */
.hero--home .hero__media-merke{display:none}

/* ---------- Tillitsraden paa én linje ----------
   Etikettene brakk fordi raden arvet bredden fra tekstkolonnen paa
   62 tegn. Fire kolonner delte da rundt 155 piksler hver, og
   «takinspeksjoner hver uke» faar ikke plass. Raden faar sin egen
   bredde, uavhengig av broedteksten over. */
@media (min-width:900px){
  .hero--home .trust-row{
    width:min(880px,calc(100vw - 48px));
    max-width:none;
  }
  .hero--home .trust-row li{white-space:nowrap;font-size:.78rem}
}

/* ---------- Linjeskift i tittelen ----------
   «Spar» hang igjen alene i enden av foerste linje. Skiftet legges
   etter setningen i stedet, saa «Spar over 200 000 kr.» staar samlet.
   Gjort med et innsatt linjeskift etter uthevingen, siden teksten
   kommer fra sidebyggeren og ikke skal roeres der. */
.hero--home .hero__title .hl::after{
  content:"\A";
  white-space:pre;
}

/* ---------- Tillitsraden: mindre luft ----------
   Fire like kolonner over 880 piksler ga mye tomrom mellom tall og
   neste skille. Kolonnene faar naa bredden innholdet trenger, og
   raden krymper til det den faktisk er. */
@media (min-width:900px){
  .hero--home .trust-row{
    width:auto;
    grid-template-columns:repeat(4,max-content);
    justify-content:start;
  }
  .hero--home .trust-row li{padding:0 26px}
  .hero--home .trust-row li:first-child{padding-left:0}
  .hero--home .trust-row li:last-child{padding-right:0}
}

/* ============================================================
   Nedtrekksmenyen
   ============================================================
   Fra to kolonner med ikoner til en meny som viser hva den selger:
   miniatyrbilder paa hvert punkt, et kampanjepanel med film, og en
   bunnrad for den som ikke vet hva han trenger.
   ============================================================ */

/* Alt under gjelder bare den brede menyen. Under 1041 piksler bytter
   temaet til en utfellbar liste bak hamburgerknappen, og da skal disse
   reglene ikke gjelde: to spalter, kampanjepanel og absolutt
   posisjonering la seg oppaa hverandre paa en telefon. */
@media (min-width:1041px){
  .drop--mega{
    border-radius:var(--radius);
    border:1px solid var(--line);
    box-shadow:0 24px 70px rgba(22,22,29,.14),0 2px 6px rgba(22,22,29,.05);
    padding:0;
    overflow:hidden;
    width:min(980px,calc(100vw - 40px));
    max-width:none;
  }
  .drop--mega .drop__grid{
    display:grid;
    grid-template-columns:1fr 1fr 296px;
    gap:0;
    padding:0;
  }
  .drop--mega .drop__kol{padding:26px 24px}
  .drop--mega .drop__kol+.drop__kol{border-left:1px solid var(--line)}

  .drop__tittel{
    font-family:var(--font);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--ink-3);
    margin:0 0 12px;
  }
  .drop__kol .drop__tittel:not(:first-child){margin-top:11px}

  /* ---------- Punktene ---------- */
  .drop__item{
    display:grid;
    grid-template-columns:52px 1fr;
    align-items:center;
    gap:13px;
    padding:9px 10px;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
    background:transparent;
    transition:background-color .16s ease,border-color .16s ease;
  }
  .drop__item:hover{background:var(--paper-2);border-color:var(--line)}
  .drop__item--featured{background:transparent;border-color:transparent}
  .drop__item--featured:hover{background:var(--paper-2);border-color:var(--line)}

  /* Ikonet blir ramme for bildet. Ikonet ligger igjen under som reserve
     hvis bildefilen skulle forsvinne. */
  .drop__ic{
    position:relative;
    width:52px;height:52px;
    border-radius:var(--radius-sm);
    overflow:hidden;
    background:var(--paper-2);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-3);
    flex:0 0 auto;
  }
  .drop__ic svg{width:19px;height:19px}
  .drop__bilde{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .drop__item:hover .drop__bilde{transform:scale(1.07)}

  .drop__txt b{
    display:block;
    font-family:var(--display);
    font-weight:800;
    font-size:.95rem;
    letter-spacing:-.012em;
    color:var(--ink);
    margin-bottom:2px;
  }
  .drop__txt small{display:block;font-size:.78rem;line-height:1.4;color:var(--ink-2)}

  /* «Mest valgt» som tynn ramme i stedet for gul pille. */
  .drop__tag{
    display:inline-block;
    margin-left:7px;
    padding:2px 7px;
    border:1px solid var(--brand-dark);
    border-radius:2px;
    background:transparent;
    color:#8a7300;
    font-family:var(--font);
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    vertical-align:middle;
  }

  /* ---------- Kampanjepanelet ---------- */
  .drop__kampanje{
    position:relative;
    display:block;
    min-height:100%;
    overflow:hidden;
    background:var(--ink);
    isolation:isolate;
    border-left:1px solid var(--line);
  }
  .drop__kampanje-media{position:absolute;inset:0;z-index:0}
  .drop__kampanje-media img,.drop__kampanje-film{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  .drop__kampanje-film{opacity:0;transition:opacity .35s ease}
  .drop__kampanje:hover .drop__kampanje-film{opacity:1}
  .drop__kampanje::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(10,10,14,.25) 0%,rgba(10,10,14,.7) 52%,rgba(10,10,14,.94) 100%);
  }
  .drop__kampanje-tekst{
    position:relative;z-index:2;
    display:flex;flex-direction:column;
    justify-content:flex-end;
    min-height:100%;
    padding:24px 22px 22px;
    color:#fff;
  }
  /* Merket var gul tekst paa fotografiet. Paa en lys himmel forsvant
     det. Gul flate med sort tekst holder seg uansett hva som staar bak. */
  .drop__kampanje-eyebrow{
    display:inline-block;
    align-self:flex-start;
    background:var(--brand);
    color:var(--ink);
    padding:4px 9px;
    border-radius:var(--radius-sm);
    font-family:var(--display);
    font-weight:800;
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    line-height:1.2;
    margin-bottom:10px;
  }
  .drop__kampanje-tekst b{
    font-family:var(--display);font-weight:800;
    font-size:1.16rem;letter-spacing:-.018em;
    margin:14px 0 6px;
  }
  .drop__kampanje-tekst small{
    font-size:.79rem;line-height:1.5;
    color:rgba(255,255,255,.78);
  }
  .drop__kampanje-cta{
    display:inline-flex;align-items:center;gap:7px;
    margin-top:16px;
    font-size:.8rem;font-weight:700;color:#fff;
  }
  .drop__kampanje-cta svg{width:15px;height:15px;color:var(--brand);transition:transform .3s ease}
  .drop__kampanje:hover .drop__kampanje-cta svg{transform:translateX(4px)}

  /* ---------- Bunnraden ---------- */
  .drop__bunn{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    padding:14px 24px;
    border-top:1px solid var(--line);
    background:var(--paper-2);
    font-size:.82rem;
    color:var(--ink-2);
  }
  .drop__bunn-lenke{
    display:inline-flex;align-items:center;gap:7px;
    font-weight:700;color:var(--ink);
  }
  .drop__bunn-lenke svg{width:15px;height:15px;color:var(--brand-dark);transition:transform .3s ease}
  .drop__bunn-lenke:hover svg{transform:translateX(4px)}
  .drop__bunn-tlf{margin-left:auto;font-weight:700;color:var(--ink)}

  @media (max-width:1000px){
    .drop--mega .drop__grid{grid-template-columns:1fr 1fr}
    .drop__kampanje{display:none}
  }
}

/* ============================================================
   «Før du bytter tak» — problemseksjonen
   ============================================================
   Seksjonen sa det riktige, men den saa ut som alle de andre: hvit
   flate, gule sirkler, tykke streker. Tre grep loefter den.

   Ett: den faar sin egen grunn. Naar hver seksjon staar paa hvitt,
   leser siden som én lang rull. En dempet, varm papirtone gjoer dette
   til et eget kapittel uten aa rope.

   To: tallene. Sirkler med ramme, og den siste fylt med gult, er
   grensesnitt. «01 02 03» satt i tall med en haarfin loddrett strek
   er redaksjonelt. Det siste steget er der skaden skjer, og markeres
   med gull i stedet for aa fylles med det.

   Tre: luft. Premium kjennes mest paa avstandene.
   ============================================================ */

.problem__grid--speilet{
  --lm-problem:1;
}

/* Egen grunn, i full bredde, med haarfine skiller mot seksjonene over
   og under. */
.section:has(.problem__grid--speilet){
  position:relative;
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .section:has(.problem__grid--speilet){padding-top:112px;padding-bottom:112px}
  .problem__grid--speilet{gap:72px;align-items:center}
}

/* ---------- Uthevingen i tittelen ----------
   Over en hel tallrekke ble gullstreken bred nok til aa lese som
   markoer igjen. Tynnere enn ellers, og loeftet litt fra grunnlinjen. */
.problem__grid--speilet .hl{
  background:linear-gradient(180deg,transparent 68%,var(--brand) 68%);
  box-shadow:none;
  padding:0 .06em;margin:0 -.06em;
}

/* ---------- Kjeden ---------- */
.problem__grid--speilet .frost{margin-top:34px}

.problem__grid--speilet .frost__tittel{
  font-size:1.06rem;
  letter-spacing:-.012em;
  margin-bottom:26px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.problem__grid--speilet .frost__steg li{
  grid-template-columns:56px 1fr;
  gap:20px;
  padding-bottom:28px;
}
.problem__grid--speilet .frost__steg li:last-child{padding-bottom:0}

/* Tallet, ikke merket. To siffer gir rytme og ser satt ut. */
.problem__grid--speilet .frost__steg li::before{
  content:counter(frost,decimal-leading-zero);
  width:auto;height:auto;
  display:block;
  background:none;
  border:0;
  border-radius:0;
  color:var(--ink-3);
  font-family:var(--display);
  font-weight:800;
  font-size:1.44rem;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
/* Siste steg er der skaden skjer. Gull, ikke fylt gult. */
.problem__grid--speilet .frost__steg li:last-child::before{color:var(--brand-dark)}

/* Streken mellom stegene: haarfin, og starter under tallet. */
.problem__grid--speilet .frost__steg li:not(:last-child)::after{
  left:13px;
  top:34px;
  bottom:2px;
  width:1px;
  background:var(--line);
}

/* Tittelen og forklaringen er én ting. Sto de like langt fra
   hverandre som fra neste steg, grupperte avstanden ingenting. */
.problem__grid--speilet .frost__steg b{
  font-size:1.02rem;
  padding-top:0;
  margin-bottom:0;
  line-height:1.25;
  letter-spacing:-.012em;
}
/* Forklaringen er en ren tekstnode i markupen, ikke et element. Den
   kan derfor ikke faa margin; avstanden styres av tittelens egen
   linjeboks alene. */
/* Forklaringen er en ren tekstnode, ikke et element, saa den kan ikke
   faa margin. Luften spises av tittelen i stedet. */
.problem__grid--speilet .frost__steg b{margin-bottom:-5px}
.problem__grid--speilet .frost__steg li{
  font-size:.89rem;
  line-height:1.62;
  color:var(--ink-2);
}

/* ---------- Sluttmerknaden ---------- */
.problem__grid--speilet .frost__fot{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.84rem;
  line-height:1.65;
  color:var(--ink-2);
  max-width:56ch;
}

/* ---------- Fotografiet ----------
   Samme hjoerne som alt annet, og full hoeyde i kolonnen saa det
   staar som en flate og ikke som et vedlegg. */
.problem__grid--speilet>.media{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(22,22,29,.10);
}
.problem__grid--speilet>.media video,
.problem__grid--speilet>.media img{
  border-radius:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (min-width:900px){
  .problem__grid--speilet>.media{min-height:560px}
}

/* Figuren tok bare bredden videoen selv hadde, og lot resten av
   kolonnen staa tom. Den skal fylle spalten. */
.problem__grid--speilet>.media{
  width:100%;
  max-width:none;
  margin:0;
  align-self:stretch;
}

/* ---------- Videoen helt ned ----------
   height:100% loeser seg ikke mot en forelder som bare har min-height;
   prosenthoeyde krever en definert hoeyde. Videoen beholdt derfor sin
   egen hoeyde og lot resten av rammen staa tom. Absolutt plassering
   gir den flaten aa fylle. */
.problem__grid--speilet>.media{position:relative}
.problem__grid--speilet>.media video,
.problem__grid--speilet>.media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:0;
}

/* ---------- Sluttmerknaden ----------
   Den laa som en vanlig avsnittstekst og forsvant. Naa staar den som
   en merknad: gull rombe foran, hengende innrykk, og teksten litt
   moerkere enn broedteksten rundt.

   Romben er ikke tilfeldig valgt. Den er formen i Diamantbehandling,
   og gjentar merkevaren uten aa skrive den. */
.problem__grid--speilet .frost__fot{
  position:relative;
  padding-left:34px;
  color:var(--ink);
}
.problem__grid--speilet .frost__fot::before{
  content:"";
  position:absolute;
  left:2px;
  top:22px;
  width:11px;height:11px;
  border:1.5px solid var(--brand-dark);
  transform:rotate(45deg);
}

/* ---------- Tittelen paa to linjer ----------
   Tre linjer der den midterste er kort, gir en ujevn hoeyrekant og
   bryter setningen paa feil sted. Kolonnen faar litt mer plass og
   tittelen litt mindre grad, saa den lander paa to jevne linjer:

     «Et takbytte du kanskje ikke trenger,»
     «koster fort 300 000 til 1 000 000 kr»
*/
@media (min-width:900px){
  .problem__grid--speilet{grid-template-columns:.82fr 1.18fr}
  .problem__grid--speilet .section__title{
    font-size:2.02rem;
    line-height:1.2;
    max-width:none;
    text-wrap:balance;
  }
}

/* ============================================================
   «Slik fungerer Diamantbehandling™» — stegene
   ============================================================
   Her laa et kort inni et kort: hvit boks med ramme, og inni den en
   ny ramme rundt bildet. Doble rammer er det som faar et design til
   aa se ut som et grensesnitt i stedet for en trykksak.

   Rammene fjernes helt. Fotografiet blir objektet, teksten staar paa
   sidens egen grunn under det, og tallene faar samme redaksjonelle
   behandling som i seksjonen over. Da leser de to seksjonene som
   samme haandverk, ikke som to ulike maler.
   ============================================================ */

@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
}

/* Kortet forsvinner. */
.step{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}

/* Fotografiet: hoeyt, uten ramme, samme hjoerne som alt annet. */
.step__viz{
  height:auto;
  aspect-ratio:4/5;
  margin-bottom:0;
  border:0;
  border-radius:var(--radius);
  background:var(--paper-2);
  overflow:hidden;
}
.step__viz::before{display:none}          /* prikkemoensteret bak */
.step__viz img,.step__viz video{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:0;
}

/* Tallet flyttes ut av bildet og ned til teksten. Et merke oppaa
   fotografiet skjuler nettopp det bildet skal vise. */
.step__no{
  position:static;
  display:block;
  width:auto;height:auto;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--ink-3);
  font-family:var(--display);
  font-weight:800;
  font-size:1.44rem;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
/* Siste steg er resultatet, og markeres i gull. Samme grep som det
   siste frostleddet i seksjonen over. */
.step:last-child .step__no{color:var(--brand-dark)}

/* Rutenettet ligger paa selve steget, ikke paa overskriften.
   Tallet flyttes ut av bildecontaineren av steg.js; her faar det sin
   egen spalte ved siden av teksten.

   To klasser i velgeren er noedvendig: temaet setter display:flex paa
   .step gjennom en delt regel, og ett klassenavn taper mot den. */
.steps .step{
  display:grid;
  grid-template-columns:52px 1fr;
  column-gap:18px;
  align-content:start;
}
.steps .step__viz{grid-column:1 / -1}

/* Tallet i en gul rute i stedet for graa sifre paa en strek. Raden
   var tre like tekstblokker, og da leste ingen rekkefolgen. Nummeret
   maa vaere det oyet finner foerst. */
.steps .step__no{
  grid-column:1;
  grid-row:2;
  margin-top:20px;
  padding:0;
  border-top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:var(--brand);
  color:var(--ink);
  border-radius:var(--radius-sm);
  font-family:var(--display);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
/* Siste steg er resultatet. Sort rute med gult tall snur forholdet og
   gjor at raden ender et sted i stedet for bare aa stoppe. */
.steps .step:last-child .step__no{background:var(--ink);color:var(--brand)}

.steps .step h3{
  grid-column:2;
  grid-row:2;
  margin:20px 0 0;
  padding:0;
  border-top:0;
  font-size:1.22rem;
  line-height:1.24;
  letter-spacing:-.018em;
  align-self:center;
  text-wrap:balance;
}
.steps .step p{
  grid-column:1 / -1;
  grid-row:3;
  margin:12px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.91rem;
  line-height:1.62;
  color:var(--ink-2);
}

@media (max-width:900px){
  .steps{gap:18px}
  .steps .step{grid-template-columns:42px 1fr;column-gap:14px}
}

/* ============================================================
   Nedtrekksmenyen: bredde og hover
   ============================================================
   To ting.

   Den forsvant naar musen beveget seg mot den. Temaet dekket
   mellomrommet mellom knapp og panel med .drop::after, en usynlig bro
   paa 20 piksler. Jeg satte overflow:hidden paa panelet for aa klippe
   hjoernene, og klippet dermed ogsaa bort broen. Panelet legges naa
   rett under headeren uten mellomrom, saa det ikke finnes noe hull
   aa miste musen i.

   Og den startet ved knappen i stedet for aa foelge innholdsbredden.
   En megameny som spenner hele containeren leser som en del av
   headeren; en som henger under ett menypunkt leser som en boks.
   ============================================================ */

/* Panelet er flyttet til .site-header__inner av meny.js, og maaler
   seg mot containeren. Da faar det innholdsbredden gratis, uten
   sentrering og uten variabler som kan bli feil.

   Alt dette gjelder bare den brede menyen. Under 1041 piksler bytter
   temaet til en utfellbar liste bak hamburgerknappen, panelet flyttes
   tilbake inn i .has-drop av meny.js, og temaets egne regler skal
   gjelde uforstyrret. Uten denne innrammingen ble hele tjenestelisten
   liggende absolutt posisjonert oppaa heroen paa mobil. */
@media (min-width: 1041px) {

.site-header__inner{position:relative}

.drop--mega{
  position:absolute;
  top:calc(100% + 1px);        /* flush mot headerens underkant */
  left:0;
  right:0;
  width:auto;
  transform:translateY(8px);
  border-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
}

/* Panelet er ikke lenger barn av knappen, saa temaets egne regler
   treffer det ikke. Aapningen styres herfra. */
.site-header:has(.has-drop.is-open) .drop--mega,
.site-header:has(.has-drop:hover) .drop--mega,
.drop--mega:hover{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Pilen mot knappen gir ikke mening naar panelet spenner hele bredden. */
.drop--mega::before{display:none}

/* Broen over mellomrommet mellom knappen og panelet.
   .has-drop er like hoey som knappen, saa musen forlater den paa vei
   nedover. Broen er et barn av .has-drop, saa aa vaere over den
   teller fortsatt som aa vaere over knappen.

   Den er bred nok til at en diagonal bevegelse mot panelet ogsaa
   treffer, og finnes bare mens man hovrer: et permanent felt ville
   aapnet menyen naar musen saa vidt streifet noe annet i headeren. */
.has-drop{position:relative}
.has-drop:has(.drop-toggle):hover::after{
  content:"";
  position:absolute;
  top:100%;
  left:-320px;
  right:-320px;
  height:30px;
}

}

/* ---------- Overskriften paa linje med kortene ----------
   .tjgrupper__topp var sentrert som blokk: max-width 820 med auto-marg
   ga 140 piksler til venstre. text-align rorer ikke blokksentrering,
   bare teksten inni. Margen maa nullstilles. */
.tjgrupper__topp{
  margin-left:0;
  margin-right:auto;
  max-width:78ch;
}

/* ---------- Hover paa kortene ----------
   Kategorimerket snur: hvit flate, sort tekst. Det er den tydeligste
   maaten aa vise at kortet er aktivt uten aa flytte noe.
   «Les mer» gaar helt over i gult, ikke bare pilen. */
.tjliste--samlet .tjrad:hover .tjrad__meta{
  background:#fff;
  border-color:#fff;
  color:var(--ink);
}
.tjrad:hover .tjrad__pil{color:var(--brand)}
.tjrad:hover .tjrad__pil svg{color:var(--brand)}

/* Merket og teksten skal snu mykt, ikke hoppe. */
.tjliste--samlet .tjrad__meta{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.tjrad__pil{transition:color .2s ease}

/* ============================================================
   Taksjekk-baandet
   ------------------------------------------------------------
   Var et hvitt kort med tynn ramme mellom to hvite seksjoner.
   Rammen var det eneste som skilte det fra siden rundt, og et
   tilbud som er gratis fortjener mer enn en strek.

   Naa er det ett moerkt panel der fotografiet gaar helt ut i
   kanten og hele veien opp og ned. Kontrasten mot de lyse
   seksjonene over og under gjoer at oyet stopper her.

   Reglene treffer bare varianten med bilde og uten kortliste,
   saa borettslagsseksjonen med seks kort staar urort.
   ============================================================ */
/* --hel er varianten der bildet er en logo som skal vises helt.
   Den skal ikke bli et moerkt panel med beskaaret fotografi:
   utmerkelsen ble en tom sort flate. */
.borettslag:not(.section--dark)
  .borettslag__grid:has(.borettslag__media):not(:has(.borettslag__media--hel)):not(:has(.borettslag__cards)){
  max-width:1180px;
  background:var(--ink);
  border:0;
  border-radius:var(--radius);
  overflow:hidden;
  padding:0;
  gap:0;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  /* Temaets egen innglidning slaas av her. Blokken og innholdet
     i den skal ikke tone inn hver for seg; det leses som to
     bevegelser som ikke henger sammen. */
  opacity:1;
  transform:none;
  transition:none;
}
.tksj__copy{
  padding:clamp(38px,4.4vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.tksj .borettslag__copy>*{margin-bottom:22px}
.tksj .borettslag__copy>*:last-child{margin-bottom:0}

/* Tekst paa moerk flate. */
.tksj .eyebrow{color:rgba(255,255,255,.5)}
.tksj .eyebrow__dot{background:var(--brand)}
/* 15ch ga tre linjer. Med 24 staar tittelen paa to. */
.tksj .section__title{color:#fff;max-width:24ch}
.tksj .section__lead{color:rgba(255,255,255,.68);max-width:46ch}

/* ---- Bildet ----
   align-self:stretch og hoeyde 100 prosent, saa fotografiet
   fyller panelet i stedet for aa staa som en rute midt i det. */
.tksj .borettslag__media{
  aspect-ratio:auto;
  align-self:stretch;
  min-height:440px;
  border-radius:0;
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
/* Bildet ligger absolutt, ikke i flyten. Med height:100% i flyten
   har figuren ingen bestemt hoeyde aa loese prosenten mot, og
   bildet faller tilbake til sin egen: panelet ble 885 piksler
   hoeyt fordi fotografiet er staaende. Naa bestemmer teksten
   hoeyden, og fotografiet fyller det som blir igjen. */
.tksj .borettslag__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  /* Bildet er litt stoerre enn ruta si. Overskuddet er det
     parallaksen flytter paa uten at det blir en stripe igjen. */
  transform:scale(1.14);
  will-change:transform;
}
/* Skygge langs venstrekanten, saa panelet og fotografiet gaar
   over i hverandre i stedet for aa moetes i en skjoet. */
.tksj .borettslag__media::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(22,22,29,.55) 16%,rgba(22,22,29,.12) 38%,transparent 52%);
}

/* ---- Knappen ----
   Gul med sort tekst, samme som «Kom i gang» i headeren.
   Sveipet fyller knappen fra venstre i stedet for aa bytte
   farge i ett hopp. */
.tksj .btn--primary{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--brand);border-color:var(--brand);color:var(--ink);
  align-self:flex-start;
}
.tksj .btn--primary::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.tksj .btn--primary:hover::before{transform:scaleX(1)}
.tksj .btn--primary:hover{border-color:#fff;color:var(--ink)}

/* ============ Bevegelse ============
   Alt starter i sluttilstanden. Klassene under legges paa av
   taksjekk.js naar seksjonen kommer i syne, saa ingenting er
   skjult for den som har javascript av. */

/* Ordene i overskriften stiger opp bak sin egen maske. */
.tksj-w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.tksj-w__i{display:inline-block;transform:translateY(115%);
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.tksj--inn .tksj-w__i{transform:translateY(0)}

/* Streken under «Få svaret gratis» tegnes fra venstre etter at
   ordene har landet. box-shadow kan ikke animeres i bredde, saa
   den byttes mot et element som kan skaleres. */
/* Temaet legger en hvit gradient bak .hl inne i dette baandet.
   Paa hvit bakgrunn er den usynlig; paa den moerke flaten ble den
   en hvit bjelke tvers over ordene. Den maa vekk, ikke bare
   box-shadow fra premium.css. */
.tksj .borettslag__copy .hl{background:none}
.tksj .hl{box-shadow:none;position:relative;color:#fff}
.tksj .hl::after{
  content:'';position:absolute;left:0;right:0;bottom:-.02em;
  height:.09em;background:var(--brand);
  transform:scaleX(0);transform-origin:left;
}
.tksj--inn .hl::after{
  transform:scaleX(1);
  transition:transform .75s cubic-bezier(.65,0,.35,1) var(--tksj-strek,.6s);
}

/* Label, ingress og knapp foelger etter i tur. */
.tksj-op{opacity:0;transform:translateY(16px)}
.tksj--inn .tksj-op{
  opacity:1;transform:none;
  transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.16,1,.3,1) var(--d,0s);
}

/* Fotografiet skyves inn fra hoyre bak en maske og legger seg
   samtidig til ro fra en litt stoerre skala. */
.tksj .borettslag__media{clip-path:inset(0 0 0 100%)}
.tksj--inn .borettslag__media{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s cubic-bezier(.76,0,.24,1) .1s;
}
.tksj .borettslag__media img{transition:transform 1.6s cubic-bezier(.16,1,.3,1) .1s}
.tksj--inn .borettslag__media:hover img{transform:scale(1.2) translateY(var(--par,0px))}

@media (max-width:900px){
  /* Velgeren maa vaere den samme som den som satte to spalter.
     Da regelen over fikk «:not(:has(--hel))» steg vekten dens til seks
     ledd, mens denne sto igjen paa fire — og baandet ble staaende i to
     spalter helt ned i 375 piksler, med bildet klemt til null bredde og
     teksten i en stripe paa 204. */
  .borettslag:not(.section--dark)
    .borettslag__grid:has(.borettslag__media):not(:has(.borettslag__media--hel)):not(:has(.borettslag__cards)){
    grid-template-columns:minmax(0,1fr);
  }

  /* Bildet oeverst, i en hoyde man ser motivet i uten at det tar hele
     skjermen. Toningen nedover binder det til teksten under. */
  .tksj .borettslag__media{
    min-height:0;height:230px;
    order:-1;align-self:auto;
    /* Rutenettet har justify-items:start. Fotografiet ligger absolutt
       inni figuren, saa figuren har ikke noe innhold aa maale seg mot
       og krympet til null bredde. Den skal fylle spalten. */
    justify-self:stretch;
    width:100%;
  }
  .tksj .borettslag__media::before{
    background:linear-gradient(0deg,var(--ink) 0%,transparent 46%);
  }
  /* Bildet sveipes inn fra hoyre paa brede skjermer. Paa et baand som
     er 230 piksler hoyt gir bevegelsen ingenting, og skulle
     observatoren aldri utloese, blir bildet staaende klippet til null
     bredde. Her staar det bare der. */
  /* Hele innglidningen slaas av paa smal skjerm. Den er koreografert
     for et bredt baand: bildet sveiper inn fra hoyre, teksten stiger,
     streken tegner seg. Paa en telefon ser man en tredjedel av det om
     gangen, og utloeses ikke observatoren, staar seksjonen igjen tom.
     Den skal bare vaere der. */
  .tksj .borettslag__media,
  .tksj--inn .borettslag__media{clip-path:none}
  .tksj .borettslag__media img{transform:scale(1)}
  .tksj-op,.tksj--inn .tksj-op{opacity:1;transform:none;transition:none}
  .tksj-w__i,.tksj--inn .tksj-w__i{transform:none}
  .tksj .hl::after,.tksj--inn .hl::after{transform:scaleX(1);transition:none}

  .tksj__copy{padding:26px 20px 30px}
  .tksj .section__title{max-width:none;font-size:clamp(24px,6.4vw,32px)}
  .tksj .section__lead{max-width:none}
  .tksj .borettslag__copy>*{margin-bottom:16px}
  .tksj__punkter{gap:9px}
  .tksj__punkter li{font-size:14.5px}
  /* Knappen tar bredden. En halvbred knapp paa telefon er en
     halvtruffet knapp. */
  .tksj .btn{width:100%;justify-content:center}
}

/* Prisankeret staar paa én linje: ordinaerprisen og den nye prisen ved
   siden av hverandre er hele poenget — det er sammenligningen som gjor
   at «gratis» betyr noe. Under hverandre leses de som to opplysninger. */
@media (max-width:480px){
  .tksj__verdi{
    flex-direction:row;align-items:baseline;flex-wrap:nowrap;
    gap:10px;
  }
  .tksj__for{font-size:13px;white-space:nowrap}
  .tksj__na{font-size:17px;white-space:nowrap}
}

/* Den som har bedt om mindre bevegelse faar seksjonen ferdig. */
@media (prefers-reduced-motion:reduce){
  .tksj-w__i,.tksj--inn .tksj-w__i{transform:none}
  .tksj-op,.tksj--inn .tksj-op{opacity:1;transform:none}
  .tksj .borettslag__media,.tksj--inn .borettslag__media{clip-path:none}
  .tksj .borettslag__media img{transform:scale(1)}
  .tksj .hl::after,.tksj--inn .hl::after{transform:scaleX(1);transition:none}
}

/* ============================================================
   Priskalkulatoren
   ------------------------------------------------------------
   Alt var bygget av 2 piksler ramme, 14 til 18 piksler radius og
   gule flater. Det leses som en app, ikke som et verktoy fra et
   firma som tar 90 000 kroner for en jobb.

   Naa: haarfine rammer, 4 pikslers radius som resten av siden,
   sort der det for var gult, og prispanelet som eneste moerke
   flate i kortet. Det er den ene tingen kunden er her for.
   ============================================================ */
.calc-section{background:var(--paper-2)}
.calc{align-items:start;gap:clamp(40px,5vw,72px)}
.calc__intro{position:sticky;top:calc(var(--hdr-h,72px) + 28px)}
@media (max-width:900px){.calc__intro{position:static}}

/* ---- Kortet ----
   Ett hevet ark paa papirflaten. Skyggen er lang og svak i stedet
   for kort og hard; det er forskjellen paa et ark som ligger paa
   et bord og en boks med kantlinje rundt. */
.calc__card{
  border-radius:var(--radius);
  padding:clamp(26px,2.9vw,40px);
  box-shadow:0 1px 2px rgba(22,22,29,.05),0 30px 70px -28px rgba(22,22,29,.22);
}
.calc-section .calc__card{border:1px solid var(--line)}

/* ---- Sporsmaalene ----
   Nummeret staar for seg i sort, teksten i sperret versal. Ett
   blikk gir rekkefolgen, det neste gir spoersmaalet. */
.calc__field{margin:0 0 26px}
/* Ledetekstene staar i sperret versal og blir brede. «Muggprikker
   eller flassing i malingen» fikk ikke plass paa én linje i en spalte
   paa 250 piksler.

   Foerst gjorde jeg skriften mindre. Det var feil loesning: den
   loeste bredden ved aa gjore ledetekstene mindre lesbare, og satte
   dem i to ulike stoerrelser avhengig av hvor brede feltene var.

   Riktig loesning er aa gi spoersmaalene hele bredden. Da faar hver
   ledetekst 510 piksler i stedet for 250, og alle staar paa én linje
   i full stoerrelse. Kortet blir hoyere, men det leses raskere:
   ett spoersmaal om gangen nedover, ikke to ved siden av hverandre. */
.calc__field legend{
  font-family:var(--display);
  font-weight:700;
  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.085em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:11px;
  white-space:nowrap;
}
/* To spalter, som temaet setter dem. Én spalte ga plass til alle
   ledetekstene, men gjorde kortet dobbelt saa hoyt.

   Spoersmaal med en ledetekst som ikke faar plass paa én linje i en
   halv spalte, tar hele bredden i stedet. Hvilke det er avhenger av
   ordlyden, saa det maales i nettleseren — se kalkulator.js. */
.calc__field.calc__sp--full{grid-column:1 / -1}
.kig__sp.kig__sp--full{grid-column:1 / -1}


/* ============================================================
   Priskalkulatoren
   ------------------------------------------------------------
   Alt var bygget av 2 piksler ramme, 14 til 18 piksler radius og
   gule flater. Det leses som en app, ikke som et verktoy fra et
   firma som tar 90 000 kroner for en jobb.

   Naa: haarfine rammer, 4 pikslers radius som resten av siden,
   sort der det for var gult, og prispanelet som eneste moerke
   flate i kortet. Det er den ene tingen kunden er her for.
   ============================================================ */
.calc-section{background:var(--paper-2)}
.calc{align-items:start;gap:clamp(40px,5vw,72px)}
.calc__intro{position:sticky;top:calc(var(--hdr-h,72px) + 28px)}
@media (max-width:900px){.calc__intro{position:static}}

/* ---- Kortet ----
   Ett hevet ark paa papirflaten. Skyggen er lang og svak i stedet
   for kort og hard; det er forskjellen paa et ark som ligger paa
   et bord og en boks med kantlinje rundt. */
.calc__card{
  border-radius:var(--radius);
  padding:clamp(26px,2.9vw,40px);
  box-shadow:0 1px 2px rgba(22,22,29,.05),0 30px 70px -28px rgba(22,22,29,.22);
}
.calc-section .calc__card{border:1px solid var(--line)}

/* ---- Sporsmaalene ----
   Nummeret staar for seg i sort, teksten i sperret versal. Ett
   blikk gir rekkefolgen, det neste gir spoersmaalet. */
.calc__field{margin:0 0 26px}

.calc__field legend .calc__sp-nr,
.calc__field legend .calc__n{
  color:var(--ink);
  font-weight:800;
  /* <i> er kursiv som standard. Tallet skal staa rett opp og ned. */
  font-style:normal;
  font-variant-numeric:tabular-nums;
  /* Sperringen spiser mellomrommet etter punktumet. */
  margin-right:.45em;
}

/* ---- Nedtrekkene ---- */
.calc-section .kalkvelg__knapp{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  padding:13px 15px;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.calc-section .kalkvelg__knapp:hover{border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.calc-section .kalkvelg.er-apen .kalkvelg__knapp{
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
}
.calc-section .kalkvelg__txt b{font-size:15px}

/* Ikonet var en gul avrundet rute. Sort rute med gult ikon holder
   det gule til de faa stedene der det skal bety noe. */
.calc-section .kalkvelg__ic{
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  background:var(--ink);
  border:0;
  color:var(--brand);
}
.calc-section .kalkvelg__ic svg{width:19px;height:19px}
.calc-section .kalkvelg__pil{transition:transform .28s cubic-bezier(.65,0,.35,1)}

/* Panelet. Rammen er haarfin, skyggen gjor jobben med aa loefte
   det fra siden bak. */
.calc-section .kalkvelg__panel{
  top:calc(100% + 6px);
  padding:6px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(22,22,29,.06),0 24px 54px -14px rgba(22,22,29,.26);
  transform-origin:top center;
}
/* Panelet folder seg ut i stedet for aa staa der ferdig. Det er
   [hidden] i markupen til det aapnes, saa bevegelsen maa vaere en
   keyframe og ikke en overgang: en overgang fra display:none
   kjoerer ikke. */
.calc-section .kalkvelg.er-apen .kalkvelg__panel{
  animation:kv-inn .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes kv-inn{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:none}
}
/* Valgene kommer etter hverandre, ikke alle paa en gang.
   Forsinkelsene settes av kalkulator.js. */
.calc-section .kalkvelg.er-apen .kalkvelg__opt{
  animation:kv-opt .26s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--d,0s);
}
@keyframes kv-opt{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.calc-section .kalkvelg__gruppe{color:var(--ink-3);letter-spacing:.1em;padding:0 8px;margin:12px 0 3px}
.calc-section .kalkvelg__opt{border-radius:var(--radius-sm);gap:11px}
.calc-section .kalkvelg__opt:hover{background:var(--paper-2)}
.calc-section .kalkvelg__oic{
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  background:var(--paper-2);
  border:1px solid var(--line);
}
/* Det valgte alternativet: sort rute, gult ikon, ingen sterk gul
   flate bak hele raden. Merket er nok. */
.calc-section .kalkvelg__opt:has(input:checked){background:var(--paper-2)}
.calc-section .kalkvelg__opt:has(input:checked) .kalkvelg__oic{
  background:var(--ink);border-color:var(--ink);color:var(--brand);
}
.calc-section .kalkvelg__opt:has(input:checked) .kalkvelg__hake{color:var(--ink)}

/* ---- Skyveren ----
   Sporet fylles til venstre for haandtaket, saa man ser hvor man
   er i skalaen og ikke bare hvor haandtaket staar. Prosenten
   regnes ut i kalkulator.js. */
.range-wrap{gap:20px}
.calc-section input[type=range]{
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--ink) 0 var(--pct,33%),var(--paper-3) var(--pct,33%) 100%);
}
.calc-section input[type=range]::-webkit-slider-thumb{
  width:20px;height:20px;
  background:var(--ink);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--ink),0 3px 10px rgba(22,22,29,.28);
  transition:transform .16s ease;
}
.calc-section input[type=range]::-moz-range-thumb{
  width:20px;height:20px;
  background:var(--ink);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--ink),0 3px 10px rgba(22,22,29,.28);
}
.calc-section input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
.range-wrap output{
  font-size:20px;
  font-variant-numeric:tabular-nums;
  min-width:96px;
  letter-spacing:-.01em;
}

/* ---- Prispanelet ----
   Den ene moerke flaten i kortet, og den gaar helt ut i kanten.
   Det er tallet folk kom hit for. */
/* Lyst panel innenfor kortet, ikke en sort stripe fra kant til kant.
   Prisen skal vaere det tyngste i kortet, men vekten kommer fra
   tallet og ikke fra flaten. */
.calc__result{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius);
  padding:20px 22px;
  margin:28px 0 20px;
  gap:6px;
}
.calc__price{align-items:baseline}
.calc__price-label{
  color:var(--ink-2);
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  font-family:var(--display);
}
.calc__price-val{
  color:var(--ink);
  /* Sekssifret pris maalte 344 piksler i en plass paa 342 ved 34 piksler
     skrift, og brakk til to linjer. «123 000 til 150 000» er ikke et
     sjeldent tall — det er et vanlig tak — saa stoerrelsen maa taale det.
     Ved 28 piksler tar den 284, og nowrap sikrer at den aldri brekker
     selv om et tall blir lengre enn vi regnet med. */
  font-size:clamp(20px,2.6vw,28px);
  white-space:nowrap;
  letter-spacing:-.02em;
  /* Tallene teller opp. Uten fast sifferbredde hopper linjen
     sidelengs mens de gaar. */
  font-variant-numeric:tabular-nums;
}
.calc__etter{color:var(--ink-2);margin:0}

/* Det man sparer staar rett under, med gult som understrekning og
   ikke som flate. */
.calc__spart{
  text-align:center;margin:16px 0 0;font-size:14px;color:var(--ink-2);
}
.calc__spart b{
  color:var(--ink);
  box-shadow:inset 0 -.5em 0 rgba(255,214,31,.55);
  font-variant-numeric:tabular-nums;
}

/* ---- Knappene ----
   Gult fyller sort nedenfra i stedet for et fargebytte i ett hopp. */
.calc__card .btn--primary{
  border-radius:var(--radius);
  position:relative;overflow:hidden;isolation:isolate;
}
.calc__card .btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--brand);
  transform:translateY(101%);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.calc__card .btn--primary:hover::before{transform:translateY(0)}
.calc__card .btn--primary:hover{color:var(--ink);border-color:var(--brand)}

/* ---- Oppsummeringen i steg 2 ---- */
.calc__oppsummering{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius);
}
.calc__oppsummering b{font-variant-numeric:tabular-nums}

/* ---- Punktene i venstrespalten ---- */
.calc__usp li::before{
  background:var(--ink);color:var(--brand);
  width:20px;height:20px;font-size:11px;border-radius:var(--radius-sm);
}
.calc__usp li{padding-left:32px}

/* ---- Feltene i steg 2 ---- */
.calc__steg .field input{
  border-radius:var(--radius);
  border:1px solid var(--line);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.calc__steg .field input:focus{
  border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none;
}

/* ---- Feltene glir opp naar kortet kommer i syne ---- */
.kalk-op{opacity:0;transform:translateY(14px)}
.kalk--inn .kalk-op{
  opacity:1;transform:none;
  transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.16,1,.3,1) var(--d,0s);
}

@media (prefers-reduced-motion:reduce){
  .kalk-op,.kalk--inn .kalk-op{opacity:1;transform:none}
  .calc-section .kalkvelg.er-apen .kalkvelg__panel,
  .calc-section .kalkvelg.er-apen .kalkvelg__opt{animation:none}
}


/* ============================================================
   For borettslag og sameier
   ------------------------------------------------------------
   Fire hvite kort med gult haakemerke paa gul bunn ga ingen
   rekkefolge: alt var like viktig, altsaa ingenting.

   Naa er det en fortelling. Venstre spalte staar stille med en
   tegning og knappen, hoyre spalte ruller gjennom de fire
   punktene, og tegningen folger med.

   Bunnen er hvit. Den gule flaten baerer merkevaren, men her
   staar den mot et fotografi som selv er gult av arbeidstoy,
   og to gule flater ved siden av hverandre tar bort dybden i
   bildet. Paa hvitt er fotografiet det eneste som har farge,
   og da er det ogsaa det oyet gaar til forst.
   ============================================================ */
/* Temaet legger en forskjovet skygge under knappene paa .section--dark
   og .hurtig--gul med hoyere vekt enn den generelle regelen. */
.section--dark .btn--primary,
.hurtig--gul .btn--primary{box-shadow:none}

/* Temaet gir seksjonen gul bunn gjennom .section--dark. Den skrives
   om her i stedet for i markupen, som staar urort. */
.brl.section--dark{
  background:var(--white);
  color:var(--ink);
  padding-block:clamp(72px,8vw,120px);
}
/* Temaet gjor .borettslag__grid til et rutenett med to spalter.
   Overskriften og scenen havnet da i hver sin spalte. */
.brl .borettslag__grid{display:block}

/* ---- Overskriften over begge spaltene ---- */
.brl__topp{max-width:60ch;margin-bottom:clamp(44px,5vw,72px)}
.brl__topp .section__lead{max-width:56ch;margin-bottom:0}
/* Paa gul bunn maatte uthevingen vaere en sort strek. Paa hvitt er
   markorflaten synlig igjen, og da skal den brukes: det er den samme
   uthevingen som staar i alle de andre overskriftene. */
.brl .hl{
  background:linear-gradient(180deg,transparent 68%,var(--brand) 68%);
  box-shadow:none;color:var(--ink);
  padding:0 .1em;margin:0 -.1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.brl .eyebrow{color:var(--ink-3)}
.brl .eyebrow__dot{background:var(--brand-edge,#e0b900)}
.brl__topp .section__lead,
.brl__topp .section__lead p{color:var(--ink-2)}

/* ---- Scenen ---- */
.brl__scene{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  gap:clamp(40px,5.5vw,88px);
  align-items:start;
}

/* ---- Venstre spalte: staar stille ---- */
/* Ytre boks strekkes over hele sporet slik at den indre har en vei aa
   gaa. Uten det er rutefeltet like hoyt som innholdet, og sticky har
   null bevegelsesrom: siste punkt fikk aldri sin tur. */
.brl__fast{align-self:stretch}
.brl__festet{position:sticky;top:clamp(96px,17vh,150px)}

.brl__ramme{
  position:relative;
  aspect-ratio:1/1;
  background:var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
}
/* Et svakt rutenett bak tegningen. Det gir flaten en maalestokk,
   slik teknisk tegnepapir har, uten aa bli et moenster man ser paa. */
.brl__ramme::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
}
/* Bildene ligger oppaa hverandre og toner over i hverandre. Det som
   ikke er paa, holdes ute av dokumentflyten med opacity alene, saa
   ingenting flytter seg naar motivet byttes. */
.brl__ark{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.brl__ark img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  /* Fotografiene er tatt i ulikt lys. En liten demping og et hint mer
     kontrast gjor at de fire leses som ett sett og ikke som fire
     tilfeldige bilder. */
  filter:saturate(.88) contrast(1.06);
  transform:scale(1.06);
  transition:transform 9s cubic-bezier(.22,.61,.36,1);
}
.brl__ark.er-pa{opacity:1}
.brl__ark.er-naer img{transform:scale(1)}
/* Moerkt fall nede og et gult streif oppe: bildet faar dybde, og
   tellerverket under rammen faar noe aa staa mot. */
.brl__ark::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(22,22,29,.34) 0%,transparent 34%,transparent 52%,rgba(22,22,29,.6) 100%),
    radial-gradient(72% 54% at 84% 8%,rgba(255,214,31,.16) 0%,transparent 68%);
}
/* Rutenettet bak var til for strektegningene. Med fotografi i rammen
   ville det ligget som et nett oppaa motivet. */
.brl__ramme::before{display:none}
/* En haarfin ring innenfor kanten. Den skiller bildet fra den gule
   flaten seksjonen staar paa uten aa legge en ramme rundt det. */
.brl__ramme::after{
  content:'';position:absolute;inset:0;z-index:2;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  pointer-events:none;
}

/* ---- Tellerverket ---- */
.brl__teller{
  display:flex;align-items:center;gap:14px;
  margin:26px 0 24px;
  font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:13px;letter-spacing:.04em;
}
.brl__na{color:var(--ink)}
.brl__av{color:var(--ink-3)}
.brl__strek{flex:1 1 auto;height:2px;background:var(--line);overflow:hidden}
.brl__strek i{
  display:block;height:100%;background:var(--ink);
  transform:scaleX(.25);transform-origin:left;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}

/* Knappen staar synlig hele veien gjennom de fire punktene. Paa gul
   bunn maatte den vaere sort; paa hvitt er den den samme gule
   hovedknappen som resten av siden bruker. */
.brl__fast .btn{width:100%;justify-content:center}
.brl__fast .btn--primary{
  --bg:var(--brand);--fg:var(--ink);
  border-color:var(--brand);
}
.brl__fast .btn--primary:hover{
  --bg:var(--brand-light,#ffdf4d);
  border-color:var(--brand-light,#ffdf4d);
}

/* ---- Hoyre spalte: punktene ---- */
.brl__punkt{
  min-height:clamp(240px,32vh,320px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3vw,38px) 0;
  border-top:1px solid var(--line);
  /* Det man ikke er ved skal vaere lesbart, men tydelig i bakgrunnen.
     Helt utblekt blir det en gimmick; uendret blir det ingen ledelse. */
  opacity:.4;
  transition:opacity .45s ease;
}
.brl__punkt:first-child{border-top:0}
.brl__punkt.er-pa{opacity:1}

.brl__nr{
  font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:12px;letter-spacing:.12em;
  color:var(--ink-3);
  margin-bottom:14px;
  display:inline-flex;align-items:center;gap:12px;
}
.brl__nr::after{
  content:'';width:0;height:1px;background:var(--ink);
  transition:width .55s cubic-bezier(.65,0,.35,1);
}
.brl__punkt.er-pa .brl__nr{color:var(--ink)}
.brl__punkt.er-pa .brl__nr::after{width:56px}

.brl__punkt h3{
  overflow-wrap:normal;word-break:normal;hyphens:none;
  text-wrap:balance;
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.5vw,30px);
  line-height:1.18;
  letter-spacing:-.015em;
  margin:0 0 12px;
  color:var(--ink);
  max-width:22ch;
}
.brl__punkt p{
  margin:0;
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.62;
  color:var(--ink-2);
  max-width:46ch;
}

/* ---- Smale skjermer ----
   En spalte som staar stille gir ingen mening naar den fyller hele
   bredden. Da faar hvert punkt sin egen tegning i stedet. */
@media (max-width:900px){
  .brl__scene{grid-template-columns:minmax(0,1fr);gap:32px}
  .brl__fast{align-self:start}
  .brl__festet{position:static}
  .brl__ramme{aspect-ratio:16/10;max-height:320px}
  .brl__punkt{min-height:0;opacity:1;padding:26px 0}
}

@media (prefers-reduced-motion:reduce){
  .brl__ark img{transition:none;transform:none}
  .brl__punkt{opacity:1}
}

/* Sporet forlenges saa siste punkt naar midten av vinduet mens
   venstre spalte fortsatt staar stille. */
.brl__spor{padding-bottom:clamp(140px,28vh,320px)}
@media (max-width:900px){.brl__spor{padding-bottom:0}}


/* ============================================================
   Bunnteksten
   ------------------------------------------------------------
   Var hvit, med en gul sirkel som lyste svakt nede i venstre
   hjoerne. Siden sluttet altsaa i samme farge som den begynte,
   og det siste man saa var en dekorasjon.

   Naa: et fotografi av det ferdige taket, med sort over. Bildet
   er hentet fra den samme filmen som ligger i heroen, men fra
   slutten av den. Siden aapner med arbeidet og lukker med
   resultatet.

   Sloeret er ikke ett jevnt lag. Det er tettest oeverst og
   nederst og tynnest paa midten, saa fotografiet kommer fram
   der det er plass til det og teksten blir lesbar der den staar.
   ============================================================ */

/* Bare den fulle bunnteksten faar bildet. Paa annonsesider og
   bestillingssiden er footeren en enkelt linje med org.nr, og et
   fotografi bak seksti piksler ser ut som en feil. */
.site-footer:has(.footer-main){
  background:var(--ink);
  color:rgba(255,255,255,.6);
  isolation:isolate;
}

.site-footer:has(.footer-main)::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:url("/wp-content/design/media/footer.jpg") 62% 38% / cover no-repeat;
}

/* Temaets gule sirkel laa paa ::after. Den overskrives her, saa
   den forsvinner av seg selv. */
.site-footer:has(.footer-main)::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  width:auto;height:auto;border-radius:0;
  /* To lag. Det loddrette gjor fotografiet til en bakgrunn i stedet
     for et bilde; det vannrette legger ekstra tyngde til venstre, der
     merkevarekolonnen staar og der bildet har sitt lyseste felt. */
  background:
    linear-gradient(90deg,rgba(22,22,29,.55) 0%,rgba(22,22,29,.12) 46%,transparent 72%),
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(22,22,29,.95) 12%,
      rgba(22,22,29,.86) 42%,
      rgba(22,22,29,.93) 74%,
      var(--ink) 100%);
  pointer-events:none;
}

/* ---- Merkevarekolonnen ---- */
/* Logoen er sort med gul Co. Paa sort flate blir bokstavene borte,
   saa den snus til rent hvitt, som i heroen. */
.site-footer:has(.footer-main) .logo__img{filter:brightness(0) invert(1)}

.site-footer__tag{color:rgba(255,255,255,.62);max-width:36ch}
.site-footer__tag b{color:#fff}

.footer-rating{color:rgba(255,255,255,.55)}
.footer-rating b{color:#fff}
.footer-rating__stars{color:var(--brand)}

.site-footer:has(.footer-main) .footer-social a{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.72);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.site-footer:has(.footer-main) .footer-social a:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--ink);
  transform:translateY(-2px);
}

/* Merket har gjennomsiktig bakgrunn og staar godt rett paa flaten.
   En hvit plate under gjorde det til et lysende rektangel. */
.site-footer:has(.footer-main) .footer-merke{
  margin-top:26px;background:none;padding:0;
}

/* ---- Lenkekolonnene ---- */
.site-footer:has(.footer-main) .footer-col h4{
  color:#fff;
  font-family:var(--display);font-weight:800;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.site-footer:has(.footer-main) .footer-gruppe{
  color:rgba(255,255,255,.38);
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
}
.site-footer:has(.footer-main) .footer-col a,
.site-footer:has(.footer-main) .footer-addr a{
  color:rgba(255,255,255,.66);
  transition:color .16s ease;
}
.site-footer:has(.footer-main) .footer-col a:hover,
.site-footer:has(.footer-main) .footer-addr a:hover{color:#fff}
.site-footer:has(.footer-main) .footer-addr{color:rgba(255,255,255,.6)}
.site-footer:has(.footer-main) .footer-col--contact .link-phone{
  color:#fff;
  font-family:var(--display);font-weight:800;
}
.site-footer:has(.footer-main) .footer-alle{color:rgba(255,255,255,.66)}

/* ---- Nederste linje ---- */
.site-footer:has(.footer-main) .footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);
}
.site-footer:has(.footer-main) .footer-bottom a{color:rgba(255,255,255,.62)}
.site-footer:has(.footer-main) .footer-bottom a:hover{color:#fff}
.site-footer:has(.footer-main) .footer-credit{color:rgba(255,255,255,.62)}
.site-footer:has(.footer-main) .footer-top{color:rgba(255,255,255,.62)}

/* Sekundaerknapper i bunnteksten, om de finnes. */
.site-footer:has(.footer-main) .btn--ghost{
  --fg:#fff;
  border-color:rgba(255,255,255,.28);
}
.site-footer:has(.footer-main) .btn--ghost:hover{border-color:#fff}

/* Paa smale skjermer staar kolonnene under hverandre og footeren blir
   hoy. Da maa fotografiet faa staa lenger opp, ellers ser man bare
   himmel og hage. */
@media (max-width:760px){
  .site-footer:has(.footer-main)::before{background-position:center 22%}
  .site-footer:has(.footer-main)::after{
    background:linear-gradient(180deg,
      var(--ink) 0%,
      rgba(22,22,29,.94) 8%,
      rgba(22,22,29,.89) 50%,
      var(--ink) 100%);
  }
}

/* Knappen i bunnteksten. Den som har lest seg helt ned har enten
   funnet det han lette etter eller ikke, og begge deler ender samme
   sted. */
.site-footer .footer-cta-knapp{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:22px;
  align-self:flex-start;
}


/* ============================================================
   Stegskjemaet og seksjonen rundt
   ------------------------------------------------------------
   Kortet var bygget som resten av det gamle: 2 piksler ramme,
   12 til 18 pikslers radius, gule flater bak det valgte og en
   gul haake foran hvert loefte. Det er tre gule signaler i ett
   bilde, og da betyr ingen av dem noe.

   Naa: haarfin ramme, 4 pikslers radius, sort som utvalgsfarge
   og gult spart til fremdriften. Det gule betyr «hvor langt er
   du kommet», og bare det.
   ============================================================ */

/* ---- Seksjonen ---- */
.cta-final{background:var(--paper-2)}
.cta-final__grid{align-items:start;gap:clamp(40px,5vw,72px)}

/* Temaet legger en gul markoerflate bak .hl her, med hoyere vekt
   enn den generelle regelen. Den maa slaas av eksplisitt. */
.cta-final .hl{
  background:none;
  box-shadow:inset 0 -.15em 0 var(--brand);
  color:var(--ink);
}

/* Haakene i venstrespalten: sort rute med gult merke, som ellers. */
.cta-final .check-list li{padding-left:32px;font-size:15px;line-height:1.55}
.cta-final .check-list li::before{
  width:20px;height:20px;
  border-radius:var(--radius-sm);
  background:var(--ink);
  color:var(--brand);
  font-size:11px;
}

.cta-final__call{
  border-top:1px solid var(--line);
  padding-top:20px;margin-top:28px;
}
.cta-final__call span{font-size:13px;color:var(--ink-2)}
.cta-final__call .link-phone{
  font-family:var(--display);font-weight:800;font-size:22px;
  letter-spacing:-.01em;
}

/* ---- Kortet ----
   Ett hevet ark, ikke en boks med kantlinje. Temaet setter 2 pikslers
   ramme via .cta-final .lead, saa regelen maa vaere like spesifikk. */
.cta-final .lead,
.lead{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(26px,2.6vw,36px);
  box-shadow:0 1px 2px rgba(22,22,29,.05),0 30px 70px -28px rgba(22,22,29,.22);
}

/* ---- Toppen ---- */
.lead__head{margin-bottom:26px}
.lead__meta{align-items:center;margin-bottom:12px}
.lead__steg{
  font-size:11px;letter-spacing:.09em;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.lead__tid{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--display);font-weight:700;
  color:var(--ink-3);
}

/* Ett sammenhengende spor. Antall steg varierer med tjenesten, saa
   delene maa dele bredden mellom seg: en fast prosent ville staatt
   feil i det oyeblikket et steg kom til eller falt bort. */
.lead__progress{
  display:flex;
  height:2px;
  border-radius:99px;
  background:var(--paper-3);
  overflow:hidden;
}
.lead__progress span{
  flex:1 1 0;
  height:100%;
  min-width:0;
  border-radius:0;
  background:transparent;
  transition:background-color .45s cubic-bezier(.65,0,.35,1);
}
.lead__progress span.is-paa{background:var(--brand)}

/* ---- Spoersmaalet ---- */
.lead__q{
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,1.9vw,25px);
  line-height:1.2;letter-spacing:-.015em;
  margin:0 0 6px;
  text-wrap:balance;
}
.lead__hjelp{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 16px}
.lead__q+.lead__opts,.lead__q+.field,.lead__q+.lead__skala{margin-top:18px}

.lead__gruppe{
  color:var(--ink-3);
  letter-spacing:.11em;
  font-size:10.5px;
}

/* ---- Valgene ---- */
.lead__opts{gap:8px}
.lead__opt{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  gap:13px;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.lead__opt:hover{
  border-color:var(--ink-3);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.lead__opt:hover .lead__opt-mark{border-color:var(--ink-3)}
.lead__opt:focus-visible{
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
}
/* Det valgte: sort ramme og sort merke, ingen gul flate bak hele
   raden. Merket er nok til aa si hva som er valgt. */
.lead__opt.is-selected{
  border-color:var(--ink);
  background:var(--white);
  box-shadow:0 0 0 1px var(--ink);
}
.lead__opt-mark{
  width:19px;height:19px;
  border:1.5px solid var(--line);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.lead__opt.is-selected .lead__opt-mark{
  border-color:var(--ink);
  background:var(--ink);
  /* Prikken inni er en innskygge, saa den ikke trenger et eget
     element i markupen. */
  box-shadow:inset 0 0 0 3.5px var(--white),inset 0 0 0 12px var(--ink);
}
.lead__opt-txt b{font-size:15px}
.lead__opt-txt small{font-size:12.5px;color:var(--ink-2)}

/* Listen ruller. Uten en kant mot bunnen ser den avkuttede raden ut
   som en feil i stedet for som noe man kan bla til. */
.lead__opts{
  position:relative;
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  padding-bottom:6px;
}
.lead__opts::-webkit-scrollbar{width:3px}
.lead__opts::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.lead__opts::-webkit-scrollbar-track{background:transparent}

/* ---- Skyveren ---- */
.lead__range{
  height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--ink) 0 var(--pct,50%),var(--paper-3) var(--pct,50%) 100%);
}
.lead__range::-webkit-slider-thumb{
  width:20px;height:20px;background:var(--ink);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--ink),0 3px 10px rgba(22,22,29,.28);
  transition:transform .16s ease;
}
.lead__range::-moz-range-thumb{
  width:20px;height:20px;background:var(--ink);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--ink),0 3px 10px rgba(22,22,29,.28);
}
.lead__range:active::-webkit-slider-thumb{transform:scale(1.14)}
.lead__skala-topp b,.lead__fasit{
  font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;
}
.lead__skala-ender{font-size:11.5px;color:var(--ink-3)}

/* ---- Feltene ---- */
.lead .field input,
.lead .field textarea,
.lead__tekst{
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.lead .field input:focus,
.lead__tekst:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
  outline:none;
}

/* ---- Knappene ---- */
.lead .btn--primary{
  border-radius:var(--radius);
  box-shadow:none;
  position:relative;overflow:hidden;isolation:isolate;
}
.lead .btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--brand);
  transform:translateY(101%);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.lead .btn--primary:hover::before{transform:translateY(0)}
.lead .btn--primary:hover{color:var(--ink);border-color:var(--brand)}
.lead .btn--ghost{
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}
.lead .btn--ghost:hover{border-color:var(--ink)}
.lead__nav{margin-top:20px;gap:10px}
.lead__privacy{font-size:12px;color:var(--muted);margin-top:14px}

/* Stegbyttet: opp, ikke bare inn. Da leses det som en bevegelse
   framover og ikke som at siden tegnet seg om. */
.lead__step.is-active{
  animation:lead-inn .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lead-inn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .lead__step.is-active{animation:none}
}


/* ============================================================
   Foer og etter
   ------------------------------------------------------------
   Sentrert overskrift, to spalter, og lys bunn i stedet for
   temaets gule: fotografiene er poenget, og en mettet gul flate
   rundt dem tar oppmerksomhet fra det man skal se paa.
   ============================================================ */
#for-og-etter .eyebrow{display:flex;justify-content:center}
#for-og-etter .section__title,
#for-og-etter .section__lead{text-align:center;margin-inline:auto}
#for-og-etter .section__lead{max-width:56ch}

#for-og-etter .fegrid,
#for-og-etter .fegrid:has(.fekort:nth-child(3)):not(:has(.fekort:nth-child(4))){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Forsiden viser to kort og lenker videre. Det tredje skjules her; den
   riktige endringen er antallet i seksjonsfeltet under Resultater.

   Bare paa forsiden. Resultater-siden bruker samme seksjons-id, og der
   er kortene hele poenget: regelen skjulte nitten av tjueen, og siden
   saa ut som om bildene var borte. */
body.home #for-og-etter .fekort:nth-child(n+3){display:none}
#for-og-etter .femer{text-align:center}

@media (max-width:760px){
  #for-og-etter .fegrid,
  #for-og-etter .fegrid:has(.fekort:nth-child(3)):not(:has(.fekort:nth-child(4))){
    grid-template-columns:minmax(0,1fr);
  }
}

#for-og-etter.section--dark{background:var(--paper-2);color:var(--ink)}
#for-og-etter .eyebrow{color:var(--ink-3)}
#for-og-etter .eyebrow__dot{background:var(--brand)}
#for-og-etter .section__title{color:var(--ink)}
#for-og-etter .section__lead{color:var(--ink-2)}
#for-og-etter .hl{color:var(--ink)}
#for-og-etter .fekort__tekst{color:var(--ink-2)}
#for-og-etter .fekort__tekst b{color:var(--ink)}
/* Merkene ligger oppaa fotografiet og skal fortsatt vaere lyse. */
#for-og-etter .fe__merke--v{background:rgba(22,22,29,.72);color:#fff}
#for-og-etter .fe__merke--h{background:var(--brand);color:var(--ink)}
#for-og-etter .btn--primary{--bg:var(--brand);--fg:var(--ink);border-color:var(--brand)}
#for-og-etter .btn--primary:hover{--bg:var(--brand-light);border-color:var(--brand-light)}

/* Nedtrekket: luften flyttes opp, saa avstanden sier hva som
   hoerer sammen. */
@media (min-width:1041px){ .drop--mega .drop__item{padding:9px 12px} }

/* ============================================================
   Garantien
   ------------------------------------------------------------
   Var foerst et hvitt kort med gule haakeskiver, saa et moerkt
   panel, saa et «bevis» med ramme, segl og skygge. Alle tre
   gjorde den til en boks blant bokser.

   Naa samme form som «Derfor heter metoden vår»: teksten til
   venstre, tallene som et haarfint rutenett til hoyre, og ingen
   ramme rundt. Det er den formen som passer innhold som er en
   paastand og fire tall som beviser den — og to seksjoner med
   samme oppbygging boer se like ut.
   ============================================================ */
.tillit__kort{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  overflow:visible;
}
.tillit__kort::before,
.tillit__kort::after{content:none}

/* Seglet var ornamentet paa beviset. Et datablad har ingen. */
.tillit__segl{display:none}

.tillit__hoved{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4.4vw,64px);
  align-items:start;
}
@media (max-width:860px){
  .tillit__hoved{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ---- Venstre spalte ---- */
.tillit .eyebrow{color:var(--ink-3)}
.tillit .eyebrow__dot{background:var(--brand)}
.tillit__tekst .section__title{
  color:var(--ink);
  font-size:clamp(26px,2.9vw,36px);
  letter-spacing:-.022em;
  max-width:20ch;
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.tillit__tekst .section__lead,
.tillit__tekst .section__lead p{color:var(--ink-2);max-width:46ch}
.tillit__kort .hl{color:var(--ink)}

.tillit__kort .check-list{display:grid;gap:0;margin-top:22px}
.tillit__kort .check-list li{
  padding:12px 0 12px 28px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--ink-2);
}
.tillit__kort .check-list li:first-child{border-top:0;padding-top:0}
.tillit__kort .check-list li::before{
  top:12px;
  background:none;color:var(--brand-edge,#e0b900);
  width:auto;height:auto;border-radius:0;
  font-size:15px;font-weight:800;
}
.tillit__kort .check-list li:first-child::before{top:0}

/* ---- Tallene som datablad ----
   To og to, skilt av haarfine streker. Samme rutenett som i
   «Derfor heter metoden vår», bare med fire felt i stedet for seks. */
.tillit__tall{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  border:0;
  border-top:1px solid var(--line);
}
.tillit__tall>div{
  padding:clamp(18px,2vw,24px) clamp(14px,1.6vw,20px);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:left;
}
.tillit__tall>div:nth-child(odd){border-left:0}
.tillit__num{
  display:block;
  color:var(--ink);
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.tillit__stjerne{color:var(--brand-edge,#e0b900)}
.tillit__lbl{
  display:block;margin-top:8px;
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
.tillit__note{
  border-top:0;
  color:var(--ink-3);
  margin:clamp(24px,3vw,34px) 0 0;
  padding:0;
  font-size:12.5px;
}

/* ============================================================
   Utmerkelsen
   ------------------------------------------------------------
   Moerk stripe med et fotografi av arbeidet bak, og merket som
   hovedmotiv med et lys bak seg. Teksten sier at det er de samme
   menneskene som staar paa taket ditt, saa bildet er nettopp det.
   ============================================================ */
#gptw{position:relative;isolation:isolate;background:var(--ink);overflow:hidden;
  padding-block:clamp(56px,6vw,86px)}
#gptw::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("/wp-content/design/media/gptw.jpg") center 42% / cover no-repeat;
  /* Fotografiet laa paa 30 prosent under et slor som var 72 prosent
     tett helt ut til hoyre kant. Til sammen ble hoyre side naesten
     sort, og bildet var der uten aa vaere synlig. */
  opacity:.55;
}
#gptw::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Sloret trappes ned mot hoyre i stedet for aa ligge flatt. Venstre
     side maa fortsatt baere hvit tekst; hoyre side har bare merket,
     og det taaler at man ser hva som er bak. */
  background:
    radial-gradient(52% 62% at 74% 50%,rgba(255,214,31,.16) 0%,transparent 70%),
    linear-gradient(96deg,
      var(--ink) 0%,
      rgba(22,22,29,.9) 38%,
      rgba(22,22,29,.58) 68%,
      rgba(22,22,29,.28) 100%);
}
#gptw .borettslag__grid{
  background:none;border:0;padding:0;
  max-width:1144px;align-items:center;
  gap:clamp(32px,5vw,72px);
}
#gptw .eyebrow{color:rgba(255,255,255,.5)}
#gptw .eyebrow__dot{background:var(--brand)}
/* Overskriften er kort nok til aa staa paa én linje. Maalebredden paa
   14 tegn brot den midt i «nest beste» og gjorde en tre ords paastand
   til to halve. Den staar samlet, og bryter foerst naar spalten
   faktisk blir for smal. */
#gptw .section__title{
  color:#fff;
  font-size:clamp(28px,3.5vw,46px);
  letter-spacing:-.025em;
  max-width:none;
  text-wrap:nowrap;
}
@media (max-width:900px){
  #gptw .section__title{text-wrap:balance;font-size:clamp(28px,6vw,38px)}
}
#gptw .section__lead,#gptw .section__lead p{color:rgba(255,255,255,.66);max-width:48ch}
/* Temaet legger en hvit markoerflate bak .hl inne i borettslagskortet.
   Paa moerk bunn ble den en hvit bjelke tvers over ordene. */
#gptw .borettslag__copy .hl,
#gptw .hl{
  color:#fff;
  background:linear-gradient(180deg,transparent 68%,var(--brand) 68%);
  box-shadow:none;
  padding:0 .1em;margin:0 -.1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
#gptw .borettslag__media{
  background:none;border:0;padding:0;
  aspect-ratio:auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
#gptw .borettslag__media::before{
  content:"";position:absolute;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,31,.22) 0%,transparent 68%);
  pointer-events:none;
}
#gptw .borettslag__media img{
  position:relative;max-height:none;
  width:min(300px,80%);height:auto;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.5));
}
@media (max-width:900px){
  #gptw::before{background-position:center 30%}
  #gptw .borettslag__media img{width:min(220px,62%)}
}


/* ============================================================
   Prisboksen paa tjenestesidene
   ------------------------------------------------------------
   Ett moerkt panel med fotografiet bak, samme form paa felt og
   knapp, og gult bare paa knappen som skal trykkes.
   ============================================================ */
.sticky-cta__inner{
  position:sticky;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
  border:0;
  border-radius:var(--radius);
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px);
}
.sticky-cta__inner::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("/wp-content/design/media/boks.jpg") center 40% / cover no-repeat;
}
/* Tyngst nederst, der skjemaet staar. Oeverst faar fotografiet slippe
   til, saa panelet ikke bare er en moerk flate. */
.sticky-cta__inner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(22,22,29,.42) 0%,
    rgba(22,22,29,.7) 26%,
    rgba(22,22,29,.94) 46%,
    var(--ink) 64%);
}
.sticky-cta__ic{
  background:none;
  border:1.5px solid var(--brand);
  border-radius:var(--radius-sm);
  color:var(--brand);
}
.sticky-cta__label{color:rgba(255,255,255,.55);letter-spacing:.09em}
.sticky-cta__num{color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sticky-cta__num span{color:rgba(255,255,255,.55)}
.sticky-cta__num a{color:#fff}
.sticky-cta__num a:hover{color:var(--brand)}
.sticky-cta__txt{color:rgba(255,255,255,.66)}
.sticky-cta__eller{color:rgba(255,255,255,.42)}
.sticky-cta__foot,.sticky-cta__foot a{color:rgba(255,255,255,.7)}
.sticky-cta .hurtig__smaa,
.sticky-cta .hurtig__samtykke{color:rgba(255,255,255,.5)}

/* Feltene faar samme radius som knappen under. En rad der det ene er
   pille og det andre firkant, leses som to komponenter fra hver sin
   familie. */
.sticky-cta .hurtig__felt input,
.hurtig__skjema--smal .hurtig__felt input{
  border-radius:var(--radius);
  border-width:1px;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.sticky-cta .hurtig__felt input::placeholder{color:rgba(255,255,255,.45)}
.sticky-cta .hurtig__felt input:focus-visible,
.hurtig__skjema--smal .hurtig__felt input:focus-visible{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand);
}
.sticky-cta .btn--primary{
  --bg:var(--brand);--fg:var(--ink);
  border-color:var(--brand);
  border-radius:var(--radius);
  box-shadow:none;
}
.sticky-cta .btn--primary:hover{--bg:var(--brand-light);border-color:var(--brand-light)}
.sticky-cta .btn:not(.btn--primary){
  --bg:transparent;--fg:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
  box-shadow:none;
}
.sticky-cta .btn:not(.btn--primary):hover{--bg:rgba(255,255,255,.08);border-color:#fff}

/* ---- Punktene i taksjekk-baandet ---- */
.tksj__punkter{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:11px}
.tksj__punkter li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.82);
}
.tksj__punkter svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--brand)}

/* ---- Verdien av det gratis er ----
   «Gratis» uten et tall ved siden av er bare et ord. Ordinaerprisen
   staar strøket ved siden av, saa stoerrelsen blir noe man kjenner
   igjen. Nullen er det eneste gule her. */
.tksj__verdi{
  display:flex;align-items:baseline;gap:14px;
  margin:22px 0 20px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:14px;
}
.tksj__for{color:rgba(255,255,255,.5)}
.tksj__for s{
  text-decoration-color:rgba(255,255,255,.45);
  text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums;
}
.tksj__na{
  font-family:var(--display);font-weight:800;
  font-size:20px;letter-spacing:-.02em;
  color:var(--brand);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   «Hvorfor nå»
   ------------------------------------------------------------
   Tre kort med fotografi over og tekst under. Nummeret staar i
   margen ved siden av tittelen, saa raden leses som en rekke.
   ============================================================ */
.hvorfor{background:var(--paper-2)}
.hvorfor__topp{margin-bottom:clamp(34px,4vw,54px)}
.hvorfor__topp .section__lead{max-width:52ch;margin-inline:auto}
.hvorfor__rad{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
  align-items:start;
}
@media (max-width:860px){.hvorfor__rad{grid-template-columns:minmax(0,1fr)}}
.hvorfor__kort{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.hvorfor__kort:hover{
  border-color:var(--ink-3);
  box-shadow:0 2px 4px rgba(22,22,29,.04),0 22px 44px -22px rgba(22,22,29,.28);
  transform:translateY(-2px);
}
.hvorfor__media{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--paper-3)}
.hvorfor__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.hvorfor__kort:hover .hvorfor__media img{transform:scale(1.05)}
.hvorfor__txt{
  padding:clamp(20px,2.2vw,26px);
  display:grid;grid-template-columns:auto 1fr;
  gap:0 16px;align-items:start;
}
.hvorfor__nr{
  grid-row:1 / span 2;
  font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.06em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  padding-top:4px;
}
/* Siste kort er loesningen, ikke problemet. */
.hvorfor__kort:last-child .hvorfor__nr{color:var(--brand-dark,#e0b900)}
.hvorfor__txt h3{
  margin:0 0 9px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.3;letter-spacing:-.012em;
  text-wrap:balance;
}
.hvorfor__txt p{
  grid-column:2;margin:0;
  font-size:14.5px;line-height:1.62;
  color:var(--ink-2);
}

/* ============================================================
   Sammenligningstabellen
   ------------------------------------------------------------
   Den anbefalte spalten skiller seg ut i dybde, ikke i farge:
   hvitt ark med skygge og sort strek over.
   ============================================================ */
.compare{border-collapse:separate;border-spacing:0}
.compare th,.compare td{border-color:var(--line)}
.compare tbody th{
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink-2);
}
.compare__ic{
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--ink);
}
.compare thead th.compare__best .compare__ic{
  background:var(--ink);border-color:var(--ink);color:var(--brand);
}
.compare thead th .compare__navn{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.compare .compare__best{
  background:var(--white);
  box-shadow:0 1px 2px rgba(22,22,29,.05),0 18px 40px -22px rgba(22,22,29,.3);
}
.compare thead th.compare__best{border-top:3px solid var(--ink)}
.compare tbody tr:last-child .compare__best{
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}
.compare tbody td.compare__best{color:var(--ink);font-weight:600}
.compare .badge{
  background:var(--ink);color:var(--brand);
  border:0;border-radius:var(--radius-sm);
  font-family:var(--display);font-weight:800;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;
}
.compare__verdi{color:var(--ink-2)}
.compare__best .compare__verdi{color:var(--ink)}
.compare tbody tr td,.compare tbody tr th{border-bottom:1px solid var(--line)}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}

/* ============================================================
   Venstre spalte i avslutningsseksjonen og i kalkulatoren
   ============================================================ */
.cta-final{background:var(--paper-2)}
.cta-final__grid{align-items:start;gap:clamp(40px,5vw,72px)}
.cta-final__grid>*:first-child{display:flex;flex-direction:column}

/* Temaet legger en gul markoerflate bak .hl her med hoyere vekt enn
   den generelle regelen. */
.cta-final .hl{
  background:linear-gradient(180deg,transparent 56%,var(--brand) 56%);
  box-shadow:none;color:var(--ink);
  padding:0 .08em;margin:0 -.08em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.cta-final .check-list{display:grid;gap:0;margin:22px 0 0}
.cta-final .check-list li{padding:13px 0 13px 30px;border-top:1px solid var(--line)}
.cta-final .check-list li::before{
  top:13px;
  background:none;color:var(--brand-edge,#e0b900);
  width:auto;height:auto;border-radius:0;
  font-size:15px;font-weight:800;
}
.cta-final .check-list li:first-child{border-top:0;padding-top:0}
.cta-final .check-list li:first-child::before{top:0}

/* Telefonen i egen ramme. Et alternativ maa se ut som et valg. */
.cta-final__call{
  margin-top:18px;padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  gap:2px;
}
.cta-final__call span{font-size:12.5px;color:var(--ink-2)}
.cta-final__call .link-phone{
  font-family:var(--display);font-weight:800;font-size:22px;
  letter-spacing:-.01em;
}

/* Kalkulatorspalten */
.calc__intro{display:flex;flex-direction:column;align-items:flex-start}
.calc__usp{display:grid;gap:0;margin:24px 0 0;width:100%}
.calc__usp li{padding:13px 0 13px 32px;border-top:1px solid var(--line)}
.calc__usp li:first-child{border-top:0;padding-top:0}
/* Samme haker som i avslutningsseksjonen: merket alene, uten skive. */
.calc__usp li::before{
  top:13px;
  background:none;color:var(--brand-edge,#e0b900);
  width:auto;height:auto;border-radius:0;
  font-size:15px;font-weight:800;
}
.calc__usp li:first-child::before{top:0}

/* ---- Sitatet ----
   Kundens egne ord, loeftet fra anmeldelsen paa samme side. Hele
   bredden, med en vannrett strek over som skiller det fra tallene. */
.sitat,
.referanse__sitat{
  position:relative;
  margin:26px 0 30px;
  padding:0 0 0 26px;
  border-left:2px solid var(--brand);
  background:none;
  border-radius:0;
}
.sitat blockquote,
.referanse__sitat blockquote{
  margin:0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.5;letter-spacing:-.01em;
  color:var(--ink);
  max-width:42ch;
}
.sitat figcaption,
.referanse__sitat figcaption{margin-top:12px;font-size:13px;color:var(--ink-2)}
.sitat figcaption span,
.referanse__sitat figcaption span{color:var(--ink-3)}

.cta-final__grid .sitat,
.calc__intro .sitat{
  width:100%;
  margin:24px 0 0;
  padding:24px 0 0 20px;
  border-top:1px solid var(--line);
  border-left:0;
}
.cta-final__grid .sitat blockquote,
.calc__intro .sitat blockquote{font-size:15px;line-height:1.5;max-width:none}
/* Gulstreken tegnes paa nytt, nedenfor den vannrette. */
.cta-final__grid .sitat::before,
.calc__intro .sitat::before{
  content:"";
  position:absolute;left:0;top:24px;bottom:0;
  width:2px;background:var(--brand);
}

.referanse__grid{align-items:center}
.referanse__tekst{display:flex;flex-direction:column;align-items:flex-start}
.referanse__tekst .section__lead{max-width:46ch}
@media (max-width:900px){.referanse__sitat{margin:22px 0 24px}}


/* Ingen ramme, ingen skygge, ingen luft rundt. Et datablad staar
   rett paa siden; kortet rundt gjorde det til nok et element blant
   elementer, og tok 54 piksler paa hver side uten aa gi noe. */
#navnet .borettslag__grid{
  align-items:start;
  gap:clamp(32px,4.4vw,64px);
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* ---- Venstre spalte ---- */
#navnet .section__title{
  font-size:clamp(26px,2.9vw,36px);
  letter-spacing:-.022em;
  /* 18ch presset «vår» ned paa en egen linje og ga tre. Med 26 faar
     «Derfor heter metoden vår» plass, og tittelen staar paa to. */
  max-width:26ch;
  /* Temaet bryter lange ord hvor som helst. «Diamantbehandling™»
     brakk da rett foran varemerket. */
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
#navnet .section__lead{max-width:44ch}

/* ---- Databladet ---- */
#navnet .borettslag__cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  counter-reset:navnet;
  border-top:1px solid var(--line);
  margin:0;
}
@media (max-width:1040px){
  #navnet .borettslag__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  #navnet .borettslag__cards{grid-template-columns:minmax(0,1fr)}
}

#navnet .borettslag__cards li{
  counter-increment:navnet;
  position:relative;
  display:block;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
  border-radius:0;
  padding:clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px);
  transition:background-color .2s ease;
}
/* Foerste i hver rad har ingen strek til venstre. Regelen foelger
   antall spalter, saa den maa gjentas per bruddpunkt. */
#navnet .borettslag__cards li:nth-child(3n+1){border-left:0}
@media (max-width:1040px){
  #navnet .borettslag__cards li:nth-child(3n+1){border-left:1px solid var(--line)}
  #navnet .borettslag__cards li:nth-child(2n+1){border-left:0}
}
@media (max-width:560px){
  #navnet .borettslag__cards li{border-left:0}
}
#navnet .borettslag__cards li:hover{background:var(--paper-2)}

/* Haakeskiven ut, nummeret inn. */
#navnet .borettslag__ic{display:none}
#navnet .borettslag__cards li::before{
  content:counter(navnet,decimal-leading-zero);
  display:block;
  margin-bottom:12px;
  font-family:var(--display);font-weight:800;
  font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
#navnet .borettslag__cards li:hover::before{color:var(--brand-dark,#e0b900)}

#navnet .borettslag__cards b{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:15.5px;
  line-height:1.3;
  letter-spacing:-.012em;
  margin-bottom:7px;
  color:var(--ink);
  text-wrap:balance;
}
#navnet .borettslag__cards span:last-child{
  display:block;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-2);
}

/* ============================================================
   Vurderingen
   ------------------------------------------------------------
   Var fem stjerner etterfulgt av «4.8 av 5». Fem stjerner ved
   siden av tallet sier det samme to ganger, og de fem er en
   loegn i det oyeblikket snittet ikke er 5,0.

   Én stjerne er et merke og ikke en maaling: den sier hva slags
   tall som kommer, og saa faar tallet baere resten. Tallet er
   det eneste som skal vaere stort her.
   ============================================================ */
.vurd{
  display:flex;align-items:baseline;gap:9px;
  margin:22px 0 0;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);
}
.vurd__stjerne{
  color:var(--brand);
  font-size:22px;line-height:1;
  align-self:center;
  /* Gult paa lys bunn trenger en kant for aa faa form. */
  text-shadow:0 0 0 var(--brand),0 1px 0 rgba(224,185,0,.55);
}
.vurd__tall{
  font-family:var(--display);font-weight:800;
  font-size:22px;line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.vurd__av{color:var(--ink-2)}
.vurd__antall{position:relative;padding-left:13px}
.vurd__antall::before{
  content:"";position:absolute;left:5px;top:.42em;
  width:3px;height:3px;border-radius:50%;
  background:var(--ink-3);
}

/* ============================================================
   Broedteksten
   ------------------------------------------------------------
   Avsnittene i artikkelteksten sto paa --ink, altsaa naesten
   sort, mens ingressen over dem sto paa --ink-2. To graatoner i
   samme spalte leses som at det ene er viktigere enn det andre,
   og her er de like viktige.

   Alle avsnitt legges paa den moerke graafargen. Ledetekster og
   uthevinger beholder sort, saa det fortsatt finnes et nivaa over.
   ============================================================ */
.prose p,
.prose li,
.artikkel-innhold p,
.artikkel-innhold li,
.entry-content p,
.entry-content li{
  color:var(--ink-2);
}
/* Det som skal veie mer, veier fortsatt mer. */
.prose b,.prose strong,
.artikkel-innhold b,.artikkel-innhold strong,
.entry-content b,.entry-content strong{color:var(--ink)}

/* Knappen i bunnteksten. Den som har lest seg helt ned har enten
   funnet det han lette etter eller ikke, og begge deler ender samme
   sted. */
.site-footer .footer-cta-knapp{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:22px;
  align-self:flex-start;
}

/* ============================================================
   Tallene i avslutningsseksjonen
   ------------------------------------------------------------
   Én vurdering alene sier «folk er fornoyde». Fire tall sier
   hvor lenge, hvor mange og hvor ofte, og det er det man vil
   vite rett foer man fyller ut et skjema.
   ============================================================ */
/* Cellene tar plassen de trenger i stedet for en firedel hver. Med
   like spalter maatte «takinspeksjoner hver uke» over to linjer,
   mens «5000+» hadde luft til overs ved siden av seg. */
.tallrad,
.cta-final__tall{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  margin:24px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.tallrad li,
.cta-final__tall li{
  flex:0 1 auto;min-width:0;
  padding:16px 13px 0;
  border-left:1px solid var(--line);
}
/* Foerste celle har ingen strek til venstre. Uten dette fikk raden en
   loesrevet loddrett strek ytterst, som ikke skilte noe fra noe. */
.tallrad li:first-child,
.cta-final__tall li:first-child{padding-left:0;border-left:0}
.tallrad li:last-child,
.cta-final__tall li:last-child{padding-right:0}
.cta-final__tall li:first-child{border-left:0;padding-left:0}
.tallrad b,
.cta-final__tall b{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.7vw,23px);
  line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tallrad .stjerne,
.cta-final__tall .stjerne{color:var(--brand);font-size:.8em;margin-left:.06em}
.tallrad small,
.cta-final__tall small{
  display:block;margin-top:7px;
  font-size:10.5px;line-height:1.3;
  letter-spacing:-.004em;
  color:var(--ink-3);
  white-space:nowrap;
}
/* Kalkulatorspalten er smalere enn avslutningsseksjonens. Der maa
   tallene staa to og to. */
@media (max-width:620px),(min-width:901px) and (max-width:1200px){
  .calc__tall{flex-wrap:wrap}
  .calc__tall li{flex:0 0 50%;padding-left:13px}
  .calc__tall li:nth-child(odd){border-left:0;padding-left:0}
  .calc__tall li:nth-child(n+3){margin-top:14px}
}
@media (max-width:620px){
  .tallrad{flex-wrap:wrap}
  .tallrad li{flex:0 0 50%;padding-left:13px}
  .tallrad li:nth-child(odd){border-left:0;padding-left:0}
  .tallrad li:nth-child(n+3){margin-top:14px}
}

/* Filmene paa tjenestekortene.
   ------------------------------------------------------------
   Sto foer synlige og i gang hele tiden, ogsaa paa skrivebord. Fire
   opptak som ruller samtidig bak fire overskrifter er uro, ikke
   innhold — oyet vet ikke hvor det skal se.

   Med mus: plakatbildet staar, og filmen tones inn naar musen er over
   kortet. Uten mus finnes ingen hover, og da gaar de av seg selv som
   foer — ellers ville filmen aldri blitt sett paa telefon.

   Avspillingen henger sammen med dette: se karusell.js, som bare
   observerer kortene naar enheten mangler hover. */
@media (hover:hover) and (pointer:fine){
  .tjliste--samlet .tjrad__film{opacity:0}
  .tjliste--samlet .tjrad__plakat{opacity:1}
  .tjliste--samlet .tjrad--film:hover .tjrad__film,
  .tjliste--samlet .tjrad--film:focus-within .tjrad__film{opacity:1}
  .tjliste--samlet .tjrad--film:hover .tjrad__plakat,
  .tjliste--samlet .tjrad--film:focus-within .tjrad__plakat{opacity:0}
}
@media not all and (hover:hover){
  .tjliste--samlet .tjrad__film{opacity:1}
  .tjliste--samlet .tjrad__plakat{opacity:0;transition:opacity .35s ease}
}
/* Plakatbildet blir liggende under som reserve for den som har bedt
   om mindre bevegelse, og for opptak som ikke lastes. */
@media (prefers-reduced-motion:reduce){
  .tjliste--samlet .tjrad__film{opacity:0}
  .tjliste--samlet .tjrad__plakat{opacity:1}
}
.tjliste--samlet .tjrad:not(.tjrad--film) .tjrad__plakat{opacity:1}

/* ============================================================
   Stedsregisteret
   ------------------------------------------------------------
   57 navn i tre spalter under fire overskrifter ble en vegg.
   Naa staar fylket i margen med antallet under seg, og stedene
   tett ved siden av — slik en stikkordliste bakerst i en bok er
   satt. Formen sier «slaa opp» foer man har lest et ord.
   ============================================================ */
.steder{margin:8px 0 0}

.steder__gruppe{
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(0,1fr);
  gap:clamp(22px,3vw,48px);
  padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.steder__gruppe:first-child{border-top:0;padding-top:0}
@media (max-width:720px){
  .steder__gruppe{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ---- Fylket i margen ---- */
.steder__navn{position:sticky;top:calc(var(--hdr-h,72px) + 22px)}
@media (max-width:720px){.steder__navn{position:static}}
.steder__navn h3{
  margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.2;letter-spacing:-.018em;
  color:var(--ink);
  text-wrap:balance;
}
.steder__antall{
  display:block;margin-top:7px;
  font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ---- Stedene ----
   Spalter, ikke rutenett: da fylles de ovenfra og ned som i et
   register, i stedet for aa hoppe bortover. */
.steder__liste{
  list-style:none;margin:0;padding:0;
  columns:3;
  column-gap:clamp(18px,2.2vw,34px);
}
@media (max-width:1040px){.steder__liste{columns:2}}
@media (max-width:520px){.steder__liste{columns:1}}

.steder__liste li{
  break-inside:avoid;
  margin:0;padding:0;
  line-height:1.55;
}
.steder__liste li+li{margin-top:2px}

/* Steder med egen side ser ut som noe man kan gaa til: sort tekst
   og en pil som kommer fram naar musen er der. */
/* Temaet tegner gullstreken under lenker i .prose med et
   background-image, ikke med text-decoration eller border. Den maa
   nullstilles der den faktisk ligger.

   I et register er en strek under hvert femte navn stoey. Pilen sier
   det samme, og bare naar man er der. */
/* Temaet treffer med .prose li a, som er mer spesifikk enn
   .steder__liste a. Regelen maa naa like langt ned i treet. */
.prose .steder__liste li a,
.registre .prose .steder__liste li a,
.steder__liste a{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:3px 0;
  color:var(--ink);
  font-size:14.5px;
  text-decoration:none;
  background-image:none;
  background:none;
  box-shadow:none;
  transition:color .16s ease;
}
.prose .steder__liste li a:hover,
.registre .prose .steder__liste li a:hover,
.steder__liste a:hover{background-image:none;background-size:0 0}
.prose .steder__liste li a::after,
.steder__liste a::after{
  content:"\2192";
  color:var(--brand-dark,#e0b900);
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1);
}
.prose .steder__liste li a:hover,
.steder__liste a:hover{color:var(--brand-dark,#e0b900)}
.prose .steder__liste li a:hover::after,
.steder__liste a:hover::after{opacity:1;transform:none}

/* De andre er opplysning, ikke navigasjon. De skal ikke love en
   lenke som ikke finnes. */
.steder__uten{
  padding:3px 0;
  font-size:14.5px;
  color:var(--ink-2);
}

/* ============================================================
   «Det vi oftest får høre»
   ------------------------------------------------------------
   Innvendinger, ikke sporsmaal. Da skal de settes som sitater:
   det er kundens egne ord som staar der, og svaret kommer under.

   <details> gjor jobben uten javascript. Hoyden animeres med et
   rutenett som gaar fra 0fr til 1fr — det er den eneste maaten
   aa faa en myk aapning paa naar innholdet har ukjent hoyde.
   ============================================================ */
.misf{background:var(--paper-2)}
.misf .section__title{margin-bottom:clamp(30px,4vw,46px)}

.misf__liste{display:grid;gap:10px}

.misf__post{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.misf__post[open]{
  border-color:var(--ink);
  box-shadow:0 1px 2px rgba(22,22,29,.04),0 22px 44px -26px rgba(22,22,29,.3);
}
.misf__post:hover{border-color:var(--ink-3)}
.misf__post[open]:hover{border-color:var(--ink)}

.misf__post summary{
  display:flex;align-items:flex-start;gap:12px;
  padding:clamp(18px,2vw,22px) clamp(18px,2.2vw,26px);
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.misf__post summary::-webkit-details-marker{display:none}
.misf__post summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* Det store hermetegnet i margen. Det sier at dette er noe noen har
   sagt, ikke noe vi spor om. */
.misf__hermetegn{
  flex:0 0 auto;
  font-family:var(--display);font-weight:800;
  font-size:26px;line-height:.8;
  color:var(--brand);
  margin-top:2px;
}
.misf__sp{
  flex:1 1 auto;min-width:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(15.5px,1.4vw,18px);
  line-height:1.35;letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:balance;
}
.misf__sp::after{content:"\00bb";color:var(--brand);margin-left:.2em}

/* Pluss som blir minus. To streker, den ene snus bort. */
.misf__merke{
  flex:0 0 auto;position:relative;
  width:20px;height:20px;margin-top:2px;
}
.misf__merke::before,
.misf__merke::after{
  content:"";position:absolute;left:3px;top:9px;
  width:14px;height:1.5px;border-radius:2px;
  background:var(--ink);
  transition:transform .28s cubic-bezier(.65,0,.35,1),background-color .2s ease;
}
.misf__merke::after{transform:rotate(90deg)}
.misf__post[open] .misf__merke::after{transform:rotate(0)}
.misf__post.er-lukker .misf__merke::after{transform:rotate(90deg)}
.misf__post[open] .misf__merke::before,
.misf__post[open] .misf__merke::after{background:var(--brand-dark,#e0b900)}
.misf__post.er-lukker .misf__merke::before,
.misf__post.er-lukker .misf__merke::after{background:var(--ink)}

/* Svaret. Rutenettet gaar fra 0fr til 1fr, saa hoyden animeres uten
   at noen maa maale den. */
.misf__svar{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.65,0,.35,1);
}
.misf__post[open] .misf__svar{grid-template-rows:1fr}
/* Under lukking staar open fortsatt paa, mens hoyden gaar tilbake til
   null. Se trekkspillet i innhold.js. */
.misf__post.er-lukker .misf__svar{grid-template-rows:0fr}
.misf__svar>div{overflow:hidden}
.misf__svar p{
  margin:0;
  padding:0 clamp(18px,2.2vw,26px) clamp(20px,2.2vw,24px) calc(clamp(18px,2.2vw,26px) + 38px);
  font-size:15px;line-height:1.65;
  color:var(--ink-2);
  /* Hele bredden. En grense paa 64 tegn ga et tomrom til hoyre som
     saa ut som noe som manglet. */
  max-width:none;
}

@media (prefers-reduced-motion:reduce){
  .misf__svar{transition:none}
  .misf__merke::before,.misf__merke::after{transition:none}
}

/* Nedtrekk uten svar staar dempet, saa det er tydelig hva som
   gjenstaar. Ordet «Velg» i full styrke ville sett ut som et svar. */
.kalkvelg--tom .kalkvelg__txt b{color:var(--ink-3);font-weight:600}

/* ---- Haker i sammenligningstabellen ----
   Var sorte tegn i loepende tekst. Gronn ring med hake leses som «ja»
   uten at man trenger aa lese ordet. Krysset faar samme ring i rodt,
   slik at de to tegnene leses som et par og ikke som hake mot ingenting. */
.compare__ja,
.compare__nei{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;
  margin-right:8px;
  vertical-align:-3px;
  border-radius:50%;
  flex:0 0 auto;
}
.compare__ja{background:rgba(22,163,74,.14);color:#16a34a}
.compare__nei{background:rgba(220,38,38,.11);color:#dc2626}
.compare__ja svg,.compare__nei svg{width:10px;height:10px}

/* ============================================================
   Garantien: paastand og bevis
   ------------------------------------------------------------
   Paastanden staar fritt over seksjonen. Beviset ligger i et
   innrammet panel under den, med tallene i celler skilt av
   haarfine streker. Rammen er det som gjor tallene til et
   oppslag man kan etterproeve, og at den bare ligger rundt
   tallene sier hvilken del av seksjonen som er dokumentasjon.
   ============================================================ */
#garanti.gar{background:var(--paper-2);padding-block:clamp(60px,7vw,104px)}

.gar__topp{max-width:770px;margin:0 auto clamp(34px,4vw,52px);text-align:center}
/* Sjangermerket settes som en brikke. Sentrert tekst uten en form
   rundt seg mister festet naar den staar alene over en overskrift. */
.gar__topp .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 auto 20px;padding:7px 15px 7px 13px;
  border-radius:999px;
  background:rgba(255,214,31,.22);
  color:var(--ink);
  font-size:10.5px;letter-spacing:.13em;
}
.gar__topp .eyebrow__dot{background:var(--brand-edge,#e0b900)}
/* Storrelsen er temaets egen h2. En overskrift som er storre enn de
   andre seksjonenes, leser seg som et nivaa over dem, og det er den
   ikke. */
.gar__topp .section__title{
  margin:0;color:var(--ink);
  font-size:var(--t-h2);
  line-height:var(--t-h2-lh);
  letter-spacing:var(--t-h2-ls);
  max-width:20ch;margin-inline:auto;
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.gar__topp .section__lead,
.gar__topp .section__lead p{
  color:var(--ink-2);max-width:58ch;margin-inline:auto;
  margin-top:18px;
}

.gar__panel{
  max-width:1144px;margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(22,22,29,.04),0 34px 74px -40px rgba(22,22,29,.26);
}

.gar__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2vw,24px) clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--line);
}
.gar__bar-tittel{
  margin:0;color:var(--ink);
  font-size:clamp(17px,1.7vw,22px);
  letter-spacing:-.018em;
}
/* Seglet laa fritt oppe i hjornet av det gamle kortet. Her er det et
   ledd i topplinjen og maa staa i flyten. */
.gar__segl{
  display:block;position:static;
  width:42px;height:42px;
  margin:0;flex:0 0 auto;transform:none;
}
.gar__segl svg{width:100%;height:100%;display:block}
.gar__segl::after{display:none}

.gar__rad.tillit__tall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:0;padding:0;border:0;
}
.gar__rad>div{
  position:relative;
  padding:clamp(24px,2.8vw,34px) clamp(18px,2.2vw,28px);
  border-left:1px solid var(--line);
  text-align:left;
  transition:background .3s ease;
}
.gar__rad>div:first-child{border-left:0}
/* Den gamle tallraden sto i to spalter og fjernet streken paa annenhver
   celle. Her er de fire paa rad, og bare den forste skal vaere uten. */
.gar__rad>div:nth-child(odd):not(:first-child){border-left:1px solid var(--line)}
/* Cellen lyser saavidt opp naar man er i den. Et oppslag skal kjennes
   som noe man kan peke i, ikke som et bilde. */
.gar__rad>div::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:var(--brand);transform:scaleY(0);transform-origin:top;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.gar__rad>div:hover{background:var(--paper-2)}
.gar__rad>div:hover::before{transform:scaleY(1)}
.gar__rad .tillit__num{
  display:block;color:var(--ink);
  font-size:clamp(30px,3.6vw,46px);
  line-height:1;letter-spacing:-.038em;
  font-variant-numeric:tabular-nums;
}
.gar__rad .tillit__stjerne{color:var(--brand-edge,#e0b900)}
.gar__rad .tillit__lbl{
  display:block;margin-top:10px;
  font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}

.gar__vilkaar{
  border-top:1px solid var(--line);
  padding:clamp(15px,1.8vw,20px) clamp(20px,2.6vw,34px);
  background:var(--paper-2);
}
.gar__punkter.check-list{
  display:flex;flex-wrap:wrap;gap:10px 32px;margin:0;padding:0;list-style:none;
}
.gar__punkter li{
  position:relative;margin:0;padding-left:26px;
  color:var(--ink-2);font-size:13.5px;line-height:1.5;
}
.gar__punkter li::before{
  content:"\2713";
  position:absolute;left:0;top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(22,163,74,.13);color:#16a34a;
  font-size:10px;font-weight:800;line-height:1;
}
.gar__panel .tillit__note{
  margin:0;border-top:1px solid var(--line);
  padding:16px clamp(20px,2.6vw,34px);
  color:var(--ink-3);
}

/* Tallene kommer inn etter hverandre naar panelet naas. Rekkefolgen
   er det som gjor at de leses som fire ting og ikke som en flate. */
.gar__rad>div{opacity:1}
.gar.er-klar .gar__rad>div{opacity:0;transform:translateY(14px)}
.gar.er-inne .gar__rad>div{
  animation:garInn .62s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0) * 90ms);
}
@keyframes garInn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .gar__rad.tillit__tall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gar__rad>div:nth-child(3){border-left:0}
  .gar__rad>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .gar__bar{flex-wrap:wrap}
  /* To og to, ikke fire under hverandre. Fire tall paa rad nedover blir
     en liste; to ganger to leses som et oppslag, og panelet blir
     halvparten saa hoyt. */
  .gar__rad.tillit__tall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gar__rad>div{padding:20px 16px}
  .gar__rad>div:nth-child(odd){border-left:0}
  .gar__rad>div:nth-child(even){border-left:1px solid var(--line)}
  .gar__rad>div:nth-child(n+3){border-top:1px solid var(--line)}
  .gar__rad .tillit__num{font-size:26px}
  .gar__rad .tillit__lbl{font-size:9.5px;letter-spacing:.07em}

  /* Vilkaarene nederst starter paa samme kant som alt annet i panelet. */
  .gar__punkter.check-list{flex-direction:column;gap:9px}
  .gar__vilkaar{text-align:left}

  /* Tallene kommer inn etter hverandre paa brede skjermer. I en rute
     paa to ganger to ser man alle fire samtidig, saa forskyvningen
     har ingenting aa forskyve — og utloeses ikke observatoren, staar
     tre av fire tall igjen usynlige. */
  .gar.er-klar .gar__rad>div,
  .gar.er-inne .gar__rad>div{opacity:1;transform:none;animation:none}
}
@media (prefers-reduced-motion:reduce){
  .gar.er-klar .gar__rad>div{opacity:1;transform:none}
  .gar.er-inne .gar__rad>div{animation:none}
}

/* ============================================================
   Omtaler paa tjenestesidene
   ------------------------------------------------------------
   Sitatene hoerer hjemme paa forsiden, der de svarer paa
   «hvem er dere». Paa en tjenesteside er leseren forbi det
   spoersmaalet: der skal siden svare paa hva behandlingen er,
   hva den koster og hva som skjer hvis den ikke holder.
   ============================================================ */
body.lm-tjenesteside #anmeldelser{display:none}

/* ============================================================
   Prisruten i «Vanlige misforstaaelser»
   ------------------------------------------------------------
   Innvendingen er et tall folk baerer med seg. Da holder det
   ikke aa svare med et tall inne i en setning — de to maa staa
   ved siden av hverandre, slik at forskjellen er det forste
   oyet ser. Tallene kommer fra kalkulatorens egen modell.
   ============================================================ */
.misf__pris{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:0 clamp(14px,2vw,26px);
  margin:22px 0 4px;
  padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.misf__pris-del{display:flex;flex-direction:column;gap:7px;min-width:0}
.misf__pris-lbl{
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.misf__pris-tall{
  color:var(--ink);
  font-family:var(--display);font-weight:800;
  font-size:clamp(17px,2.1vw,23px);
  line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Det man trodde, staar strøket over. Streken sier «dette er ikke
   tallet» uten at det trengs et ord for det. */
.misf__pris-tall--for{
  color:var(--ink-3);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(220,38,38,.55);
}
.misf__pris-del--na .misf__pris-tall{color:var(--ink)}
.misf__pris-pil{
  width:26px;height:9px;flex:0 0 auto;
  background:var(--ink);
  clip-path:polygon(0 38%,68% 38%,68% 0,100% 50%,68% 100%,68% 62%,0 62%);
}
.misf__pris-note{
  grid-column:1 / -1;
  margin:16px 0 0;padding-top:13px;
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font-size:12.5px;line-height:1.55;
}
@media (max-width:560px){
  .misf__pris{grid-template-columns:minmax(0,1fr);gap:16px}
  .misf__pris-pil{transform:rotate(90deg);margin-inline:auto}
}

/* ============================================================
   Avrunding paa bilder og film
   ------------------------------------------------------------
   --radius er 4 piksler i denne overflaten, men flere
   mediefelt sto igjen paa 0 eller paa temaets gamle 14. Da
   leses siden som satt sammen av deler fra ulike steder, og
   det er nettopp det en premiumflate ikke skal gjore.
   Rammen maa klippe, ellers ligger filmen firkantet oppaa et
   avrundet kort.
   ============================================================ */
.media,
.media--cover,
.referanse__media,
.article__hero img,
.borettslag__media,
.hvorfor__media,
.step__viz,
.xform__stage,
.drop__kampanje-media,
.tjrad,
.tjrad__media{
  border-radius:var(--radius);
  overflow:hidden;
}
.media img,.media video,
.referanse__media img,.referanse__media video,
.borettslag__media img,
.hvorfor__media img,
.step__viz img,.step__viz video,
.drop__kampanje-media img,.drop__kampanje-media video,
.tjrad__plakat,.tjrad__film{
  border-radius:inherit;
}
/* Fotografiet i borettslagsseksjonen har egen ramme som klipper. */
.brl__ramme{border-radius:var(--radius)}

/* ============================================================
   Laget
   ------------------------------------------------------------
   Tolv innrammede kort med utklipte portretter paa mettet gul
   skive. Den flate, sterke fargen rett bak et ansikt leser seg
   som et klistremerke og ikke som et portrett, og flaggene var
   de eneste andre mettede fargene paa siden.

   Naa er det et register: ingen rammer rundt personene, bare
   haarfine streker mellom cellene, slik en ansattoversikt i en
   aarsrapport er satt. Portrettene staar i graatoner paa en
   noytral flate og faar farge naar man er ved dem. Da er
   ansiktet det eneste som lyser opp — og det er ansiktet man er
   der for.
   ============================================================ */
.lag .team-dept.lag__avd{
  display:flex;align-items:baseline;gap:16px;
  margin:clamp(46px,5vw,72px) 0 0;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.6vw,19px);
  letter-spacing:-.012em;
  color:var(--ink);
}
.lag__antall{
  margin-left:auto;
  font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}

/* Cellene deles av streker i stedet for aa staa i hver sin boks.
   Negativ margin paa raden gjor at strekene naar helt ut til
   spaltekanten, som er det som faar det til aa lese som et oppslag. */
.lag .team-grid.lag__rad{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  /* Luft mellom kortene i stedet for streker som skiller dem. Naar hver
     person staar paa sitt eget hvite ark, gjor mellomrommet jobben
     streken gjorde, og roligere. */
  gap:clamp(14px,1.7vw,24px);
  /* Luft under streken som avslutter avdelingsoverskriften. Uten den
     ligger det forste fotografiet klistret inntil streken. */
  margin:clamp(18px,2vw,26px) 0 0;
}
.lag__kort{
  position:relative;
  /* Temaet gjor kortet til et rutenett med justify-items:center. Da
     krymper alt inni til innholdsbredde, og platen ble null bred. */
  display:block;
  background:var(--white);
  border:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:none;
  /* Ingen luft over eller ved siden av fotografiet: det gaar helt ut
     til kortkanten. Teksten faar sitt eget innrykk lenger nede. */
  padding:0 0 clamp(24px,2.8vw,32px);
  text-align:left;
  transition:box-shadow .35s ease,transform .35s ease;
}
/* Kortet er hvitt fra for. Ved peking loftes det saavidt i stedet for
   aa skifte farge. */
.lag__kort:hover{box-shadow:0 16px 38px -20px rgba(22,22,29,.3)}

/* Portrettet staar paa en noytral plate. Toningen nedover gjor at
   utklippet faar fotfeste i flaten i stedet for aa sveve i den. */
.lag .team-card__img.lag__portrett{
  border-radius:0;
  /* Kortet klipper allerede hjornene; platen skal ikke runde av igjen. */
  /* Bildet fyller cellen i full bredde. En smalere plate midtstilt i
     ruta ga luft paa begge sider og fikk portrettet til aa se ut som en
     miniatyr; her gaar det kant til kant. Kvadratisk plate til et
     kvadratisk fotografi, saa ingenting beskjaeres. */
  width:100%;height:auto;
  margin:0 0 18px;
  max-width:none;
  aspect-ratio:1/1;
  overflow:hidden;
  background:
    linear-gradient(180deg,var(--paper-2) 0%,var(--paper-3,#eceae4) 100%);
  display:flex;align-items:flex-end;justify-content:center;
  position:relative;
}
.lag .team-card__img.lag__portrett img{
  width:100%;max-width:none;height:100%;
  display:block;
  /* Hele fotografiet skal vaere med, ikke bare midten. */
  object-fit:cover;object-position:center;
  /* Fargene staar som de er fotografert. Graatoner var riktig for de
     utklippede portrettene paa gul bunn; med ekte fotografier tatt paa
     samme sted er det fargene som binder dem sammen. */
  filter:none;
  transform:scale(1);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.lag__kort:hover .team-card__img.lag__portrett img{
  transform:scale(1.035);
}

/* Bare teksten rykkes inn, ikke bildet. */
.lag .team-card__body{padding:0 clamp(16px,1.8vw,26px)}
.lag .team-card__name{
  font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.3vw,17px);
  letter-spacing:-.012em;line-height:1.3;
  color:var(--ink);
  margin:0 0 5px;
}
.lag .team-card__role{
  font-size:12.5px;line-height:1.45;
  color:var(--ink-2);
  margin:0 0 14px;
}

/* Spraakene som bokstavkoder. To bokstaver sier hva man kan ringe paa,
   og de tar ingen farge fra portrettet over. */
.lag .team-card__lang.lag__spraak{
  display:flex;justify-content:flex-start;flex-wrap:wrap;
  gap:6px;margin:0 0 16px;padding:0;list-style:none;
}
.lag__spraak li{margin:0;display:flex}
/* Flaggene er temaets egne SVG-er, ikke emoji, saa de tegnes likt
   overalt. De settes litt mindre enn ellers og faar en haarfin kant,
   slik at det hvite i det finske flagget ikke flyter ut i kortet. */
.lag__spraak .flagg{
  width:22px;height:15px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(22,22,29,.14);
}

.lag .team-card__links{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
}
.lag .team-card__links a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--ink-2);
  font-size:12.5px;
  background-image:none;
  text-decoration:none;
}
.lag .team-card__links a:hover{color:var(--ink)}
.lag .team-card__links svg{width:13px;height:13px;opacity:.5}
.lag .team-card__links a:hover svg{opacity:1;color:var(--brand-edge,#e0b900)}

@media (max-width:1000px){
  .lag .team-grid.lag__rad{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .lag .team-grid.lag__rad{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .lag .team-grid.lag__rad{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .lag .team-card__img.lag__portrett img{transition:none}
}

/* ============================================================
   Mellomtitlene i broedteksten
   ------------------------------------------------------------
   h2 og h3 har allerede samme farge; forskjellen man ser er
   vekten, 700 mot 800. Paa en lang tjenesteside leser den
   forskjellen seg som at h3 er svakere enn den er, og teksten
   under mister sitt feste. Samme vekt, samme farge.
   ============================================================ */
.prose h3,
.article__body h3,
main .prose h3{
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.014em;
}

/* Ordmerket skal ikke brytes fra navnet det hoerer til. */
.lm-nobr{white-space:nowrap}

/* ============================================================
   Hero-overskriften paa undersidene
   ------------------------------------------------------------
   Forsiden har sin egen storrelse, 44 piksler, mens undersidene
   falt tilbake paa --t-h1 og ble 56,8. Det gjorde at samme
   element hadde to stemmer avhengig av hvor man sto. Nedslaget
   er hentet fra forsidens egen regel, ikke funnet paa.

   Landingsmalen (.lp) har sitt eget nedslag paa 42 og roeres
   ikke — den er en bevisst variant.
   ============================================================ */
body:not(.home):not(.lp) .hero__title{
  font-size:clamp(30px,3.1vw,44px);
}

/* ============================================================
   Naar man er innlogget i wp-admin
   ------------------------------------------------------------
   Forsidens header ligger fast oeverst, og kampanjebaandet over
   den. Ingen av dem visste om administrasjonslinja WordPress
   legger inn for innloggede, saa begge havnet under den.

   Linja er 32 piksler paa skjerm, 46 under 782, og under 600
   slutter den aa vaere fast og ruller bort med siden. Da skal
   headeren ikke forskyves i det hele tatt.
   ============================================================ */
body.admin-bar.home .campaign-bar{top:32px}
body.admin-bar.home .site-header{top:calc(var(--kb-h,38px) + 32px)}

@media screen and (max-width:782px){
  body.admin-bar.home .campaign-bar{top:46px}
  body.admin-bar.home .site-header{top:calc(var(--kb-h,38px) + 46px)}
}
@media screen and (max-width:600px){
  body.admin-bar.home .campaign-bar{top:0}
  body.admin-bar.home .site-header{top:var(--kb-h,38px)}
}

/* Undersidene har klebrig header, ikke fast. Den maa ogsaa stoppe
   under administrasjonslinja i stedet for bak den. */
body.admin-bar:not(.home) .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar:not(.home) .site-header{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar:not(.home) .site-header{top:0}
}

/* Den indre rammen rundt selve bildeflaten faller ogsaa bort, saa
   for- og etter-bildene moetes uten noe imellom. */
.fe{border:0}
.fekort__tekst{margin-top:12px}


/* ============================================================
   Mobilmenyen
   ------------------------------------------------------------
   Megamenyen er bygget for en skjerm som er over tusen piksler
   bred: to spalter, et kampanjepanel med film ved siden av, og et
   panel som maaler seg mot headeren. Paa en telefon la alt dette
   seg oppaa hverandre — to spalter i 375 piksler, tekst over
   tekst, og filmen midt i.

   Her er den én kolonne. Miniatyrbildene beholdes, for det er de
   som gjor at man ser hva man velger, men de staar i en rad man
   treffer med tommelen. Kampanjepanelet og bunnraden hoerer til
   den brede menyen og vises ikke.
   ============================================================ */
@media (max-width:1040px){

  /* Panelet dekker skjermen under headeren og ruller for seg selv. */
  .main-nav{
    background:var(--paper);
    padding-inline:16px;
  }

  /* Nedtrekket er ikke et panel her, bare innholdet i lista. */
  .drop--mega{
    position:static;
    width:auto;max-width:none;
    border:0;border-radius:0;box-shadow:none;
    background:none;padding:0;margin:0;
    opacity:1;visibility:visible;transform:none;
    overflow:visible;
  }
  .drop--mega::before,.drop--mega::after{display:none}

  /* Én spalte. Gruppene kommer etter hverandre i stedet for ved
     siden av hverandre. */
  .drop--mega .drop__grid{
    display:block;
    grid-template-columns:none;
    gap:0;
  }
  .drop--mega .drop__kol{
    display:block;
    padding:0;
    border-left:0;
  }

  /* Gruppetittelen: liten, rolig, med luft over. */
  .drop--mega .drop__tittel{
    margin:22px 0 8px;padding:0;
    font-family:var(--display);font-weight:700;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);
  }
  .drop--mega .drop__kol:first-child .drop__tittel:first-child{margin-top:4px}

  /* Tjenesteradene. Bildet til venstre, navn og undertekst i midten,
     en pil til hoyre — samme spraak som radene lenger nede paa siden. */
  .drop--mega .drop__item{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 12px;
    align-items:center;gap:13px;
    padding:10px;margin-bottom:8px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-height:72px;
    transition:border-color .16s ease,transform .16s ease;
  }
  .drop--mega .drop__item:active{transform:scale(.985);border-color:var(--ink)}
  .drop--mega .drop__item--featured{border-color:var(--brand)}
  .drop--mega .drop__item::after{
    content:"";width:9px;height:9px;
    border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);
    transform:rotate(45deg);
  }

  .drop--mega .drop__ic{
    width:52px;height:52px;
    border-radius:calc(var(--radius) - 1px);
    overflow:hidden;position:relative;flex:0 0 auto;
  }
  .drop--mega .drop__bilde{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
    transform:none;
  }
  .drop--mega .drop__ic svg{width:20px;height:20px}

  .drop--mega .drop__txt{min-width:0}
  .drop--mega .drop__txt b{
    display:block;font-size:15px;line-height:1.3;color:var(--ink);
  }
  .drop--mega .drop__txt small{
    display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2);
    margin-top:2px;
  }
  .drop--mega .drop__tag{
    display:inline-block;margin-left:7px;
    font-size:9.5px;padding:2px 6px;
  }

  /* Kampanjepanelet og bunnraden hoerer til den brede menyen. Paa en
     telefon er de en film og en gjentakelse av knappene som allerede
     staar festet nederst paa skjermen. */
  .drop--mega .drop__kampanje,
  .drop--mega .drop__bunn{display:none}

  /* Sidelenkene under tjenestene arvet temaets egen mobilstil: to
     pikslers ramme og 16 pikslers avrunding, mot ett og fire paa
     kortene rett over. To formsprak i samme liste. */
  .main-nav>a{
    border-width:1px;
    border-radius:var(--radius);
    padding:16px 14px;
    font-size:15.5px;
  }
  .main-nav>a::after{
    width:9px;height:9px;
    border-right-width:2px;border-top-width:2px;
    border-right-color:var(--ink-3);border-top-color:var(--ink-3);
    opacity:1;
  }
  .main-nav>a:first-of-type{margin-top:22px}

  /* Hamburgeren: temaet tegner tre streker med span-elementer, og de
     krysses ved aapning. Streken maa vaere like lang hele veien, ellers
     blir krysset skjevt. */
  .nav-toggle{width:44px;height:44px;gap:6px;padding:10px 7px}
  .nav-toggle span{width:100%;height:2px}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* Paa forsiden ligger headeren over videoen og alt er hvitt der. */
  body.home .site-header:not(.is-stuck) .nav-toggle span{background:#fff}

  /* Naar menyen er aapen skal siden bak staa stille. */
  body.meny-aapen{overflow:hidden}

  /* Paa forsiden ligger headeren over videoen, og alt i den er hvitt.
     Naar menyen felles ut blir bakgrunnen hvit — og da sto logoen,
     «Tjenester»-etiketten og telefonnummeret hvitt paa hvitt.
     Velgerne maa naa forbi temaets egne, som teller ett ledd mer. */
  body.meny-aapen.home .site-header{background:var(--paper);border-bottom-color:var(--line)}
  body.meny-aapen.home .site-header:not(.is-stuck) .logo__img{filter:none}
  body.meny-aapen.home .site-header:not(.is-stuck) .main-nav a,
  body.meny-aapen.home .site-header:not(.is-stuck) .link-phone,
  body.meny-aapen.home .site-header:not(.is-stuck) .link-phone__icon{color:var(--ink)}
  body.meny-aapen.home .site-header .nav-toggle span{background:var(--ink)}

  /* «Tjenester» staar som gruppetittel over listen, ikke som en knapp
     man kan trykke paa — hele listen ligger jo framme. */
  body.meny-aapen .main-nav .drop-toggle,
  .main-nav .drop-toggle{
    padding:2px 0 2px;
    font-family:var(--display);font-weight:700;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);
  }
}

/* Nettbrett: to spalter er nok plass til, men fortsatt uten
   kampanjepanelet — det trenger bredden det ikke har her. */
@media (min-width:700px) and (max-width:1040px){
  .drop--mega .drop__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:10px;
  }
  .drop--mega .drop__kol:first-child .drop__tittel:first-child{margin-top:4px}
  .main-nav>a{margin-top:10px}
}


/* ============================================================
   Hero og taksjekk-baandet paa smal skjerm
   ============================================================ */
@media (max-width:900px){
  /* Sloeret over videoen er to gradienter: tung til venstre, lettere
     mot hoyre, der teksten paa brede skjermer ikke naar. Paa en telefon
     gaar teksten tvers over hele bildet, og da ligger halvparten av den
     paa den lyse siden. En jevn moerk flate er det eneste som gir
     samme lesbarhet over hvert eneste bilde i filmen. */
  .hero--home .hero__media::after{
    background:rgba(10,10,14,.66);
  }

  /* Teksten i heroen sentreres paa smal skjerm. Venstrestilt over et
     fotografi som fyller hele bredden gir en tung venstrekant og en
     tom hoyre; midtstilt staar den i motivet. */
  .hero--home .hero__copy{text-align:center}
  .hero--home .hero__copy .eyebrow{justify-content:center}
  .hero--home .hero__title,
  .hero--home .hero__lead{margin-inline:auto}

  /* Temaet setter siste ledd i overskriften som egen blokk, saa «Spar
     over 200 000 kr.» tvinges ned paa ny linje. Paa mobil brytes
     overskriften uansett der det er plass; et paatvunget skift midt i
     gir bare en enslig «det.» over det. */
  .hero--home .hero__title-slutt{display:inline}

  /* Overskriften er to setninger i én streng. Paa 30 piksler tok den
     forste setningen halvannen linje, og «det.» ble staaende alene
     over «Spar over 200 000 kr.». Paa 28 gaar hver setning paa sin
     linje, og da trengs hverken paatvunget skift eller balansering. */
  .hero--home .hero__title{
    font-size:clamp(24px,7.4vw,28px);
    text-wrap:balance;
  }

  /* Teksten i taksjekk-baandet stod midtstilt. Med tre punkter og en
     prislinje som begge er venstrestilt under, ble det tre ulike
     startkanter i samme boks. */
  .tksj .borettslag__copy,
  .tksj .section__title,
  .tksj .section__lead,
  .tksj .eyebrow{text-align:left}
  .tksj .eyebrow{justify-content:flex-start}
}

/* ---------------------------------------------------------------------------
   Kalkulatoren: spoersmaal som maa besvares

   Prisen sto foer med et tall fra det oyeblikket siden lastet, selv om ingen
   av spoersmaalene var besvart. Modellen faller tilbake paa foerste
   alternativ, saa tallet bygget paa «middels takvinkel» og «vanlig saltak»
   uten at kunden hadde sagt noe slikt.

   Naa staar prisen tom til alt er valgt. Feilmerkingen kommer foerst naar man
   forsoeker aa gaa videre — et skjema som er roedt fra det oyeblikket det
   lastes, kjefter paa deg for noe du ikke har rukket aa gjoere.
   ------------------------------------------------------------------------ */
.calc__field legend .paakrevd{
  color:var(--brand-edge,#e0be00);
  text-decoration:none;
  font-weight:800;
  margin-left:.15em;
}

/* Linja under prisen som sier hvor mange som gjenstaar. */
.calc__mangler{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-2,#5a5a6b);
}

/* ---- Feltet som mangler svar, etter et forsoek paa aa gaa videre ---- */
/* Merket legges paa velgeren, ikke paa knappens egen border.
   Knappens border settes av .calc-section .kalkvelg__knapp med
   border-shorthand, og en overstyring der ble en rekkefolgekamp som ikke
   var verdt aa vinne. En ring rundt hele velgeren er dessuten tydeligere:
   den tegner boksen, ikke bare kanten. */
.calc__sp--feil .kalkvelg,
.calc__sp--feil .calc__velg,
.calc__sp--feil select{
  border-radius:var(--radius);
  outline:2px solid var(--error,#ea4747);
  outline-offset:0;
  box-shadow:0 0 0 4px rgba(234,71,71,.14);
}
.calc__sp--feil legend,
.calc__sp--feil legend .paakrevd{
  color:var(--error,#ea4747);
}
/* display:flex slaar [hidden] fra nettleserens eget stilark, saa meldingen
   ble staaende selv etter at attributtet var satt. Den maa skrus av her. */
.calc__feil[hidden]{display:none}
.calc__feil{
  margin:7px 0 0;
  font-size:13.5px;
  line-height:1.4;
  font-weight:600;
  color:var(--error,#ea4747);
  display:flex;
  align-items:center;
  gap:6px;
}
/* Et lite utropstegn foran, saa linja leses som en feil og ikke som hjelp. */
.calc__feil::before{
  content:"!";
  flex:0 0 auto;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--error,#ea4747);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:16px;
  text-align:center;
}

/* Feltet som mangler svar.
   
   Merket er en ring rundt feltet, ikke feltets egen border. Aa farge
   border-color her viste seg umulig: bredden slo gjennom, fargen ikke,
   uansett spesifisitet — samme oppfoersel som paa nedtrekkene i steg 1.
   En ring er dessuten tydeligere, fordi den tegner hele boksen.
   
   Samme virkemiddel begge steder, saa de to stegene leses likt. */
.calc__steg .field input.is-feil,
.calc__steg .field--adr input.is-feil,
.calc__steg input.is-feil{
  outline:2px solid var(--error,#ea4747);
  outline-offset:0;
  border-radius:var(--radius);
  box-shadow:0 0 0 4px rgba(234,71,71,.14);
}
.calc__steg .samtykke input.is-feil + .samtykke__boks{
  outline:2px solid var(--error,#ea4747);
  outline-offset:1px;
  box-shadow:0 0 0 4px rgba(234,71,71,.14);
}

/* Feilmelding under et skjemafelt.
   Samme form som i kalkulatorspoersmaalene, saa de to leses likt.
   [hidden] maa skrus av eksplisitt: display:flex her slaar regelen fra
   nettleserens eget stilark, og meldingen ble ellers staaende igjen etter
   at feltet var rettet. */
.field__feil[hidden]{display:none}
.field__feil{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.4;
  font-weight:600;
  color:var(--error,#ea4747);
  display:flex;
  align-items:center;
  gap:6px;
}
.field__feil::before{
  content:"!";
  flex:0 0 auto;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--error,#ea4747);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:16px;
  text-align:center;
}
/* Etiketten over feltet blir roed sammen med kanten, saa oyet finner
   feltet uten aa lese meldingen foerst. */
.calc__steg .field:has(input.is-feil) > span,
.calc__steg .field--adr:has(input.is-feil) > label{
  color:var(--error,#ea4747);
}

/* ---------------------------------------------------------------------------
   Menyen aapen: headeren MAA staa fast, og panelet maa henge i skjermen

   Feilen: paa alle sider unntatt forsiden sa regelen lenger oppe i denne
   filen «body:not(.home) .site-header{position:sticky}». Den lastes etter
   temaets «body.meny-aapen .site-header{position:fixed}» og vant.

   Sticky trenger en rulleboks aa henge fast i. Naar menyen aapner og
   html faar overflow:hidden, finnes ikke den boksen lenger, og headeren
   faller tilbake til sin statiske plass — oeverst i dokumentet. Hadde man
   rullet 1500 piksler ned, laa den 1500 piksler over skjermkanten. Panelet
   henger absolutt under headeren og ble med dit.

   Utenfra: du trykker paa menyknappen, og menyen er borte.

   To grep. Headeren tvinges fast naar menyen er aapen, uansett side. Og
   panelet festes til skjermen i stedet for til dokumentet, saa det ikke
   lenger spiller noen rolle hvor headeren maatte befinne seg.

   Meldt 09.09.2026.
   ------------------------------------------------------------------------ */
body.meny-aapen .site-header,
body.meny-aapen:not(.home) .site-header{
  position:fixed;
  top:0;left:0;right:0;
}

@media (max-width:1040px){
  body.meny-aapen .main-nav{
    position:fixed;
    top:var(--menytopp,70px);
    left:0;right:0;
    /* Hoyden settes i skjermenheter, ikke med bottom:0.
       
       Headeren har backdrop-filter. Det gjor den til containing block for
       fixed-plasserte barn, saa panelet maaler seg mot headeren og ikke mot
       skjermen. Med bottom:0 ble hoyden regnet mot headerens underkant —
       altsaa null — og panelet kollapset til 40 piksler.
       
       dvh er skjermen uansett hvem som er containing block, og tar hoyde
       for adresselinja paa telefon. */
    bottom:auto;
    height:calc(100dvh - var(--menytopp,70px));
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* ---------------------------------------------------------------------------
   Chatboblen over den faste linjen nederst

   Serviceform plasserer boblen med bottom:20px. Paa mobil ligger vaar egen
   handlingslinje der — Ring og Kom i gang — og boblen la seg oppaa
   «Kom i gang»-knappen, altsaa nettopp den knappen linjen finnes for.

   Boblen loeftes over linjen der linjen finnes:
     .mobile-cta   vises under 620 px, og body faar 74 px bunnpolstring
     .kig__mobil   vises under 900 px, men bare paa bestillingssiden

   Over de breddene staar boblen der Serviceform har satt den.

   !important er noedvendig: hoyden settes av deres eget stilark, som lastes
   etter vaart og bruker samme spesifisitet.
   ------------------------------------------------------------------------ */
@media (max-width:620px){
  .sf-mira-widget-container{
    bottom:90px !important;
  }

  /* Boblen kommer naar heroen er passert, som handlingslinjen.
     Over heroen dekker den et hjoerne av det foerste man ser, for aa
     tilby hjelp med noe man ikke har begynt paa enda.

     Klassen settes paa body i app.js.

     Boblen flyttes ut av skjermen; vi roerer verken opacity eller
     visibility. Foerste forsoek satte begge, og da ble boblen staaende
     paa opacity 0 etterpaa: Serviceform toner den inn selv én gang, og
     den innfadingen skjedde mens vaar regel holdt den skjult. Da var det
     ingen som satte den tilbake. En forflytning roerer ikke deres. */
  body:not(.lm-forbi-hero) .sf-mira-widget-container{
    /* Nok til aa komme helt under kanten: boblen staar 90 piksler over
       bunnen, saa den maa forbi sin egen hoyde pluss de nitti. Prosent
       alene holdt ikke — 180 prosent av 56 piksler er hundre. */
    transform:translateY(calc(100% + 110px)) !important;
    pointer-events:none !important;
  }
  .sf-mira-widget-container{
    transition:transform .28s cubic-bezier(.16,1,.3,1);
  }
}

/* Bestillingssiden har sin egen linje, og den staar helt opp til 900 px. */
@media (max-width:900px){
  body.kig .sf-mira-widget-container{
    bottom:90px !important;
  }
}