/* =========================================================
   Renovera AS – stiler
   Tokens fra designprototypens komponentark (mobil-først)
   ========================================================= */

:root {
  --marine:      #012A66;
  --blaa:        #1776CA;
  --blaa-tekst:  #146CBA; /* mørkere variant for tekstlenker – WCAG AA på off-white */
  --blaa-lys:    #4CAFF3;
  --isblaa:      #80D6FF;
  --eik:         #C8A77A;
  --bakgrunn:    #FAFAF8;
  --flate:       #FFFFFF;
  --flate-alt:   #F1F4F8;
  --tekst:       #111827;
  --tekst-sek:   #5B6472;
  --hairline:    #E3E7EC;
  /* Skjemafelt maa ha egen ramme. --hairline maalte 1.24:1 mot det hvite
     kortet, og rammen er det eneste som viser at feltet ER et felt
     (WCAG 1.4.11 krever 3:1). Aa moerkne --hairline i stedet ville gjort
     alle de 25 dekorative skillelinjene harde. */
  --feltramme:   #767F8C;   /* 3.9:1 mot hvitt */
  --feil:        #B3402F;

  --font-sans:   'Inter', -apple-system, system-ui, sans-serif;
  --font-hode:   'Manrope', 'Inter', sans-serif;

  --r-kort:      12px;
  --r-bilde:     16px;
  --skygge:      0 2px 12px rgba(1, 42, 102, .08);
  --maks:        1200px;
  --kant:        20px;  /* sideluft: container og innvendig kant i kort/paneler */

  /* --- Eik-streken: ett system, én tykkelse --- */
  --strek:       2px;   /* alle eik-streker – også rammen rundt bilder */
  --strek-s:     28px;  /* badge, kortoverskrift */
  --strek-l:     36px;  /* hero-kicker, sitatsignatur */

  /* --- Fokus: WCAG-synlig, men i paletten ---
     Lyse flater bruker marine (14:1 mot off-white),
     mørke flater bruker eik (6,2:1 mot marine). Aldri nettleserblå. */
  --fokus:       var(--marine);
  --fokus-mork:  var(--eik);
  --fokus-tykk:  2px;
  --fokus-luft:  3px;
  /* Foto-ringen: tegnes INNENFOR bildet, i to bånd. Se .glightbox nedenfor. */
  --fokus-foto:  3px;

  /* --- Typografisk skala: ren major third (1.25) med 1rem som base ---
     13 · 15 · 16 · 18 · 20 · 25 · 39 · 48,8 px                        */
  --tekst-xs:  .8125rem;   /* 13 – etiketter, bildetekst, attribusjon */
  --tekst-s:   .9375rem;   /* 15 – ui, småtekst, kortbrødtekst        */
  --tekst-m:   1rem;       /* 16 – brødtekst                          */
  --tekst-l:   1.125rem;   /* 18 – ingress                            */
  --tekst-xl:  1.25rem;    /* 20 – stor ingress / h3                  */
  --h3:        var(--tekst-xl);
  --h3-stor:   clamp(1.375rem, .8vw + 1.15rem, 1.5625rem); /* 22–25   */
  --h2:        clamp(1.75rem, 1.6vw + 1.1rem, 2.441rem);   /* 28–39   */
  --h1:        clamp(2.125rem, 2.4vw + 1.05rem, 3.052rem); /* 34–48,8 */

  /* --- Vertikal rytme: én puls, 8px-grid --- */
  --luft-2xs:  .5rem;   /*  8 */
  --luft-xs:   .75rem;  /* 12 */
  --luft-s:    1rem;    /* 16 */
  --luft-m:    1.5rem;  /* 24 */
  --luft-l:    2.5rem;  /* 40 */
  --luft-xl:   3.5rem;  /* 56 */
  --luft-2xl:  5rem;    /* 80 */
  --luft-sek:  clamp(4.5rem, 8vw, 7rem); /* 72–112 – seksjonspuls */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--tekst-m);
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bakgrunn);
  hanging-punctuation: first;      /* «-tegn henger i margen (Safari) */
}
::selection { background: var(--isblaa); color: var(--marine); }
img, video { max-width: 100%; height: auto; display: block; }

/* Lenker: felles grunntilstand. Alt under i fila kan overstyre. */
a {
  color: var(--blaa-tekst);
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
  transition: color .16s, text-decoration-color .16s;
}
a:hover { color: var(--marine); }
a:active { color: var(--marine); }

/* ---------- Fokus: én ring for hele nettstedet ---------- */
/* Nettleseren følger elementets egen border-radius, så ringen tar formen selv */
:focus-visible {
  outline: var(--fokus-tykk) solid var(--fokus);
  outline-offset: var(--fokus-luft);
}

/* Mørke flater: eik-ring i stedet for marine */
.hero-split :focus-visible, .side-hero :focus-visible, .sek-mork :focus-visible,
.site-footer :focus-visible, .cta-band :focus-visible, .cta-boks :focus-visible,
.nokkeltal :focus-visible, .tjeneste-hoved-innhold :focus-visible,
.detalj-kort :focus-visible, .ba-vindu :focus-visible, .skip-link:focus {
  outline-color: var(--fokus-mork);
}
/* Over foto: eik alene kan drukne – legg på en hvit kontrastkant */
.ba-handtak:focus-visible {
  outline-color: var(--isblaa);
  box-shadow: 0 0 0 calc(var(--fokus-luft) + var(--fokus-tykk) + 1px) rgba(1, 26, 62, .55);
}

/* Galleribildene: ringen må tegnes INNENFOR bildet, og ikke som en outline.

   To feil kom sammen her. Lenkene ligger helt inntil kanten av .kort, og kortet
   klipper alt utenfor seg (overflow: hidden + border-radius: 16px), så både den
   3px forskjøvne ringen og 6px-skyggeringen ble klippet bort. Og bildet zoomer
   4,5 % ved fokus (se «Bilde-zoom på kort» lenger nede): et transformert bilde
   danner sin egen stablingskontekst og males OVER lenkens outline. Målt: 1,0:1
   på ti av fjorten lenker – ingen synlig markering i det hele tatt.

   ::after er absolutt plassert og males etter bildet, så den blir liggende oppå.
   Begge bånd tegnes derfor der: border gir det hvite ytterst, en innvendig
   skygge gir marine rett innenfor. Paret har 18:1 mot hverandre, så markeringen
   er alltid synlig – én farge alene kan aldri love det over et foto. */
.glightbox { position: relative; }   /* holder ::after fast til lenken */
.glightbox:focus-visible { outline: none; box-shadow: none; }
.glightbox:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--fokus-foto) solid #fff;
  box-shadow: inset 0 0 0 var(--fokus-foto) var(--marine);
  pointer-events: none;
}
/* Tvunget kontrastmodus kaster skygger og bakgrunner. Da tar vi en vanlig
   outline i systemfargen i stedet, så markeringen aldri blir borte. */
@media (forced-colors: active) {
  .glightbox:focus-visible { outline: var(--fokus-foto) solid CanvasText; outline-offset: calc(-2 * var(--fokus-foto)); }
}

/* Tall som skal stå i kolonne – nøkkeltall, vurderinger, meta */
.nokkeltal-tall, .nokkeltal-lofter strong, .rating-stor, .rating-tall, .meta-kort strong,
.prosjekt-meta, .artikkel-meta, .footer-bunn { font-variant-numeric: tabular-nums; }

h1, h2, h3 {
  font-family: var(--font-hode);
  font-weight: 800;
  color: var(--marine);
  margin: 0 0 .5em;
  text-wrap: balance;
  /* Norsk lager lange sammensatte ord. «Personvernerklæring» måler 339px i h1
     og sprengte 320px-vinduet: hele siden fikk sideveis scroll fordi ett ord
     ikke kunne brytes. Målt, ikke antatt. hyphens deler pent der nettleseren
     har norsk orddeling, overflow-wrap er sikkerhetsnettet som garanterer at
     ingenting stikker ut uansett. */
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Sporingen strammes optisk: mye på display, lite på små overskrifter */
h1 { font-size: var(--h1); line-height: 1.05; letter-spacing: -.024em; }
h2 { font-size: var(--h2); line-height: 1.1;  letter-spacing: -.02em; }
h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: -.008em; }

/* Ingresser og brødtekst brytes «pent» – ingen enslige ord på siste linje */
.sek-ingress, .hero-ingress, .artikkel-ingress, .kort-innhold p, .skjema-ingress,
.omrade-note, .prosess-liste p, .sjekkliste li, .prose > p, .omtale p,
.tjeneste-ekstra, .cta-band p, .kontakt-lofte, .site-footer p, .omtale-stor p, .smajobb p,
.ba-slider figcaption, .prose figcaption { text-wrap: pretty; }

.container { max-width: var(--maks); margin-inline: auto; padding-inline: var(--kant); }
.sek { padding-block: var(--luft-sek); }
.sek-alt { background: var(--flate-alt); }
.sek-intro { text-align: center; max-width: 45rem; margin: 0 auto var(--luft-xl); }
.sek-ingress { color: var(--tekst-sek); font-size: var(--tekst-l); line-height: 1.7; margin: 0; }
/* Avsluttende linje/knapp under en blokk – samme puls overalt */
.sek-utgang { text-align: center; margin: var(--luft-l) 0 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2xs);
  background: none;
  color: var(--marine);
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 var(--luft-xs);
}
.badge::before,
.sek-intro .badge::after { content: ""; width: var(--strek-s); height: var(--strek); background: var(--eik); }

/* Skip-lenke */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--marine); color: #fff;
  padding: 10px var(--luft-s); z-index: 200; border-radius: 0 0 8px 0;
  text-decoration: none; font-weight: 600; font-size: var(--tekst-s);
}
.skip-link:focus { left: 0; }
.skip-link:hover { color: #fff; text-decoration: underline; }

/* ---------- Knapper ----------
   To høyder i hele systemet: 46px (standard) og 52px (btn-lg).
   min-height låser høyden så ikon-knapper ikke blir høyere enn tekst-knapper. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--luft-2xs);
  font: 600 var(--tekst-s)/1 var(--font-sans);
  letter-spacing: .01em;
  padding: 12px 22px;
  min-height: 46px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); transition-duration: .06s; }
.btn-lg { padding: 14px 32px; min-height: 52px; font-size: var(--tekst-m); }

/* Primær – eneste knapp med løft (skygge). Sekundærene skal aldri konkurrere. */
.btn-primary { background: var(--blaa); color: #fff; box-shadow: 0 8px 20px rgba(23,118,202,.28); }
.btn-primary:hover { background: var(--marine); color: #fff; box-shadow: 0 10px 24px rgba(1,42,102,.32); }
.btn-primary:active { background: #01234F; box-shadow: 0 3px 10px rgba(1,42,102,.30); }

.btn-outline { background: transparent; color: var(--blaa-tekst); border-color: var(--blaa); }
.btn-outline:hover { background: var(--blaa); color: #fff; border-color: var(--blaa); }
.btn-outline:active { background: var(--marine); border-color: var(--marine); color: #fff; }

.btn-outline-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.btn-outline-light:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.75); }
.btn-outline-light:active { background: rgba(255,255,255,.32); }
.ikon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ikon-stor { width: 36px; height: 36px; color: var(--blaa); margin-bottom: var(--luft-2xs); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);   /* var .9: tekst bak skinte gjennom som spoekelseslinjer */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;   /* touch-mål. Headeren er 72px, så ingenting flytter seg. */
  font: 800 1.15rem var(--font-hode);
  letter-spacing: -.02em;
  color: var(--marine);
  text-decoration: none;
  transition: opacity .18s;
}
.brand:hover { color: var(--marine); opacity: .78; }
.brand:active { opacity: 1; }
.main-nav { display: none; gap: 30px; margin-left: auto; }
.main-nav a {
  color: var(--tekst); text-decoration: none; font-weight: 500; font-size: var(--tekst-s);
}
.main-nav a { position: relative; padding-block: 4px; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: var(--strek); background: var(--eik); transition: right .22s; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--marine); }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }
.main-nav a:active { color: var(--blaa); }
.btn-phone { display: none; }
.menu-toggle {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; padding: 10px; cursor: pointer;
  /* Touch-mål: 44x44 er gulvet. Uten min-height ble knappen bare 38px høy. */
  min-width: 44px; min-height: 44px;
  border-radius: 8px; transition: background .18s;
}
.menu-toggle:hover { background: var(--flate-alt); }
.menu-toggle:active { background: #E6EBF2; }
.menu-toggle span { width: 24px; height: 2.5px; background: var(--marine); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-nav[hidden] { display: none; }
.mobile-nav {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--luft-xs) var(--kant) var(--kant);
  background: var(--flate);
  border-bottom: 1px solid var(--hairline);
  /* Headeren er sticky: er menyen høyere enn skjermen, blir de nederste
     lenkene uråd å nå (typisk i landskap). Da må menyen scrolle selv. */
  max-height: calc(100svh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav a {
  padding: var(--luft-xs) 4px; text-decoration: none; color: var(--tekst); font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
/* Tjenestelenkene ligger i en div[role=group] for skjermlesere. Uten denne
   regelen blir diven ETT flex-element, og lenkene inni flyter som tekst ved
   siden av hverandre i stedet for aa fortsette kolonnen. */
.mobile-nav [role="group"] { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a:not(.btn):hover, .mobile-nav a:not(.btn):focus-visible { color: var(--marine); }
.mobile-nav a:not(.btn):active { color: var(--blaa); }
.mobile-nav a:last-child { border: 0; margin-top: var(--luft-2xs); }

@media (min-width: 880px) {
  .main-nav { display: flex; }
  .btn-phone { display: inline-flex; }
  .menu-toggle, .mobile-nav { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: 92svh; padding-block: 112px 72px; overflow: hidden; }@media (max-width: 720px) { .hero { min-height: 86svh; padding-block: 96px 56px; }}.hero-kicker {
  display: flex; align-items: center; gap: var(--luft-xs);
  color: var(--eik); font-weight: 700; font-size: var(--tekst-xs);
  letter-spacing: .22em; text-transform: uppercase; margin: 0 0 var(--luft-s);
}
.hero-kicker::before { content: ""; width: var(--strek-l); height: var(--strek); background: var(--eik); }
.hero h1 { color: #fff; max-width: 15ch; line-height: 1.06; margin-bottom: .4em; text-wrap: balance; }
.hero-ingress { font-size: var(--tekst-l); line-height: 1.7; max-width: 44ch; color: #DCE9F6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--luft-xs); margin-top: var(--luft-m); }
/* Heltelinja for mindre jobber. Kundetest 2, 22. aug: «Den ligger i skyggen
   av knappen. Jeg fant den først da jeg gikk tilbake og lette.» Kontrasten var
   ikke feilen (#CFE4F7 på marine måler 10,6:1), plasseringen og formen var det:
   løs småtekst rett under en fylt knapp har ingen egen kant å bli sett på.
   Den får derfor samme merknadsform som .smajobb, i mørk variant: eik-strek til
   venstre, svak flate, telefonikon. Det gir den en egen silhuett uten å bli en
   tredje knapp. På mobil var linja allerede det første kunden så, så størrelsen
   heves bare fra 880px og opp, der problemet faktisk lå. */
.hero-ring {
  margin-top: var(--luft-m);
  display: flex; align-items: center; gap: var(--luft-xs);
  width: fit-content; max-width: 100%;
  padding: var(--luft-xs) var(--luft-s);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-left: var(--strek) solid var(--eik);
  border-radius: 0 var(--r-kort) var(--r-kort) 0;
  font-size: var(--tekst-s); line-height: 1.5; color: #fff;
}
.hero-ring .ikon { flex: none; color: var(--eik); }
/* Nummeret er én enhet: uten dette brøt «564» ned på egen linje ved 500px. */
.hero-ring a { color: #fff; font-weight: 700; white-space: nowrap; text-decoration-color: var(--eik); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hero-ring a:hover, .hero-ring a:focus-visible { color: var(--isblaa); text-decoration-color: currentColor; }
@media (min-width: 880px) { .hero-ring { font-size: var(--tekst-m); } }.rating-tall { font: 800 var(--h3-stor) var(--font-hode); color: #fff; }
.rating-tall span { color: var(--eik); }/* ---------- Kort og tjenester ---------- */
.kort {
  background: var(--flate);
  border: 1px solid var(--hairline);
  border-radius: var(--r-bilde);
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
/* Løftet gjelder kun kort som faktisk kan klikkes – skjemaet og
   omtale-kortene skal stå i ro (og beholde sin egen skygge). */
.kort:has(a):not(.skjema):hover,
a.kort:hover { box-shadow: 0 14px 40px rgba(1,42,102,.10); border-color: #D5DCE4; transform: translateY(-2px); }.tjeneste-kort img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.kort-innhold { padding: var(--luft-m); }
.kort-innhold p { color: var(--tekst-sek); font-size: var(--tekst-s); line-height: 1.65; margin: 0; }
.tjeneste-ekstra { margin: var(--luft-l) auto 0; max-width: 860px; text-align: center; color: var(--tekst-sek); font-size: var(--tekst-s); }
.kort-lenke { margin: var(--luft-m) 0 0; }
.kort-lenke a { font-weight: 600; text-decoration: none; }
.kort-lenke a:hover, .kort-lenke a:focus-visible { text-decoration: underline; }
.kort-innhold h3 a { text-decoration: none; color: inherit; }
.kort-innhold h3 a:hover, .kort-innhold h3 a:focus-visible { color: var(--blaa-tekst); }
.tjeneste-ekstra span {
  display: inline-block; margin: 4px 3px; padding: 4px 12px;
  background: var(--flate); border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--tekst); font-weight: 500;
}
@media (min-width: 720px) {}

/* ---------- Lavterskel-vei for mindre jobber ----------
   Én dør til ved siden av befaringen. Samme eik-strek som .kontakt-lofte
   og .tips-boks, så den leses som en merknad, ikke som en ny konkurrerende
   hoved-CTA. Telefonnummeret står som knapp fordi det er hele poenget. */
.smajobb {
  margin: var(--luft-l) auto 0; max-width: 860px;
  display: grid; gap: var(--luft-m); align-items: center;
  padding: var(--luft-m);
  background: var(--flate);
  border: 1px solid var(--hairline);
  border-left: var(--strek) solid var(--eik);
  border-radius: 0 var(--r-kort) var(--r-kort) 0;
}
.smajobb h3 { margin: 0 0 var(--luft-2xs); font-size: var(--h3); }
.smajobb p { margin: 0; color: var(--tekst-sek); font-size: var(--tekst-s); line-height: 1.65; }
.smajobb-tlf { justify-self: start; white-space: nowrap; }
@media (min-width: 720px) {
  .smajobb { grid-template-columns: minmax(0, 1fr) auto; gap: var(--luft-l); }
  .smajobb-tlf { justify-self: end; }
}

/* ---------- Før/etter-slider ---------- */
.ba-slider { margin: 0 auto var(--luft-l); max-width: 900px; }
.ba-vindu {
  position: relative; overflow: hidden;
  border-radius: var(--r-bilde);
  aspect-ratio: 3 / 2;
  box-shadow: var(--skygge);
  touch-action: pan-y;
}
.ba-vindu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-etter-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 50%); }
.ba-merke {
  position: absolute; top: 14px; z-index: 2;
  font: 700 .75rem var(--font-sans); letter-spacing: .1em;
  padding: 5px 12px; border-radius: 6px;
}
.ba-merke-for { left: 14px; background: rgba(17,24,39,.72); color: #fff; }
.ba-merke-etter { right: 14px; background: var(--blaa); color: #fff; }
.ba-handtak {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 4px; background: #fff; cursor: ew-resize;
  transform: translateX(-50%);
}
.ba-knapp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blaa); color: #fff;
  display: grid; place-items: center;
  font-size: 1.2rem;
  box-shadow: 0 2px 10px rgba(1,42,102,.35);
}
.ba-slider figcaption { text-align: center; margin-top: var(--luft-xs); font-size: var(--tekst-s); color: var(--tekst-sek); }

/* Prosjektgrid */
.prosjekt-grid { display: grid; gap: var(--luft-m); }
.ba-par { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba-par > div { position: relative; }
.ba-par img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: 100%; }
.ba-tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font: 700 .68rem var(--font-sans); letter-spacing: .1em;
  padding: 3px 9px; border-radius: 5px;
  background: rgba(17,24,39,.72); color: #fff;
}
.ba-tag-etter { background: var(--blaa); }
.prosjekt-meta { font-size: var(--tekst-xs) !important; margin-top: var(--luft-2xs) !important; }
/* Kortene i samme rad skal bunnjusteres: la bildeparet fylle resthøyden */
.prosjekt-kort { display: flex; flex-direction: column; }
.prosjekt-kort .ba-par { flex: 1; }
.detalj-kort { position: relative; margin: 0; }
.detalj-kort img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.detalj-kort figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px var(--luft-m) var(--luft-m);
  background: linear-gradient(transparent, rgba(1,26,62,.92));
  color: #fff; font: 700 var(--tekst-l)/1.3 var(--font-hode);
  letter-spacing: -.008em; text-wrap: balance;
}
.detalj-kort figcaption::before { content: ""; display: block; width: var(--strek-s); height: var(--strek); background: var(--eik); margin-bottom: var(--luft-2xs); }
@media (min-width: 880px) {
  .prosjekt-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Om oss ---------- */
.om-grid { display: grid; gap: var(--luft-l); align-items: center; }
.sjekkliste { list-style: none; margin: var(--luft-m) 0 0; padding: 0; display: grid; gap: var(--luft-s); }
.sjekkliste li { padding-left: 32px; position: relative; color: var(--tekst-sek); }
.sjekkliste li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--isblaa); color: var(--marine);
  font-weight: 700; font-size: var(--tekst-xs);
  display: grid; place-items: center;
}
.sjekkliste strong { color: var(--tekst); }
.om-media img {
  border-radius: var(--r-bilde); aspect-ratio: 3 / 2; object-fit: cover;
  width: 100%; margin-inline: auto;
  box-shadow: var(--skygge);
}
.om-media video {
  border-radius: var(--r-bilde); aspect-ratio: 9 / 16; object-fit: cover;
  width: 100%; max-width: 340px; margin-inline: auto; display: block;
  box-shadow: var(--skygge);
}
.om-media.bilde-ramme:has(video) { max-width: 340px; }
/* Nøkkeltall: vurderingen bærer stripen, løftene står ved siden av.
   Vi har små volumtall, så volum settes aldri i display-grad her, og antall
   jobber står som kildelinje under vurderingen, der det leser som
   dokumentasjon og ikke som et tall vi konkurrerer med. */
.nokkeltal {
  margin-top: var(--luft-xl);
  background: linear-gradient(135deg, #01204C 0%, var(--marine) 60%, #063B7E 100%); color: #fff;
  border-radius: var(--r-bilde);
  display: grid;
  gap: var(--luft-m); padding: var(--luft-l) var(--luft-m);
  text-align: center;
}
.nokkeltal-vurdering { align-content: center; }
.nokkeltal-score { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--luft-2xs); }
/* Vurderingen leder stripen, men settes under omtale-oppslagets 4,8: de to
   står i samme skjermbilde, og bare ett sted skal ha den store vurderingen. */
.nokkeltal-tall { font: 800 2rem/1 var(--font-hode); letter-spacing: -.02em; color: var(--isblaa); }
.nokkeltal-stjerner { color: #8A6E42; font-size: 1rem; letter-spacing: 2px; }  /* var --eik #C8A77A: maalte 2.27:1 mot hvitt, na 4.6:1 */
.nokkeltal-av { margin: 2px 0 0; font-weight: 600; font-size: var(--tekst-s); }
.nokkeltal-lofter {
  list-style: none; margin: 0; padding: 0;
  /* auto-fit, ikke fast antall: da fyller loeftene raden uansett om de er
     tre eller fire. Med repeat(2,1fr) og tre loefter sto siste flis alene
     med en tom celle ved siden av. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--luft-m) var(--luft-s);
}
.nokkeltal-lofter strong { display: block; font: 800 var(--tekst-xl)/1.15 var(--font-hode); letter-spacing: -.015em; color: var(--isblaa); margin-bottom: 2px; }
.nokkeltal-lofter span { display: block; font-size: var(--tekst-xs); line-height: 1.45; color: #CFE4F7; }
@media (min-width: 880px) {
  /* Toppjustert: overskriften i Om oss starter på samme linje som alle
     andre seksjoner – ellers sentrerer den høye videoen teksten nedover
     og bryter seksjonspulsen. */
  .om-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .nokkeltal { grid-template-columns: minmax(240px, .95fr) 2.5fr; gap: 0; padding: var(--luft-l); }
  .nokkeltal-vurdering { padding-right: var(--luft-l); border-right: 1px solid rgba(255,255,255,.2); }
  /* Antall loefter kan endre seg. Med fast repeat(4) ble det et tomt felt
     til hoeyre da det gikk fra fire til tre. auto-fit fordeler dem jevnt
     uansett hvor mange det er. */
  .nokkeltal-lofter { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--luft-m); padding-left: var(--luft-l); align-content: center; }
}

/* ---------- Omtaler ---------- */
.omtale-grid { display: grid; gap: var(--luft-m); }
.omtale-rating { display: grid; place-content: center; text-align: center; padding: var(--luft-l); gap: 4px; }
.rating-stor { font: 800 3.052rem/1 var(--font-hode); letter-spacing: -.02em; color: var(--marine); }
.rating-stjerner { color: var(--eik); font-size: 1.2rem; letter-spacing: 2px; }
.omtale-rating p { color: var(--tekst-sek); font-size: var(--tekst-xs); line-height: 1.55; margin: var(--luft-2xs) 0 0; }
/* Tallgrunnlaget står bare her, mellom de to omtalene som gjør det
   etterprøvbart. «av 5 på Mittanbud» er hovedlinja, så 4,8 bærer grunnlaget;
   grunnlaget er småtekst under, ikke et nøkkeltall ved siden av. */
.omtale-rating .rating-av { color: var(--tekst); font-size: var(--tekst-s); font-weight: 600; }
.omtale-rating .rating-grunnlag { margin-top: 6px; }
.omtale { margin: 0; padding: var(--luft-m); display: flex; flex-direction: column; gap: var(--luft-s); position: relative; }
.omtale::before { content: "\201C"; position: absolute; top: 6px; right: 22px; font: 800 4.5rem/1 Georgia, serif; color: var(--eik); opacity: .28; pointer-events: none; }
.omtale p { margin: 0; font-size: var(--tekst-m); line-height: 1.65; color: var(--tekst); }
.omtale footer { margin-top: auto; font-size: var(--tekst-xs); line-height: 1.5; color: var(--tekst-sek); display: grid; gap: 2px; }
.omtale cite { font-style: normal; font-weight: 600; color: var(--tekst); }
@media (min-width: 880px) {
  .omtale-grid { grid-template-columns: 1.65fr 1fr; gap: 28px clamp(40px, 5vw, 72px); align-items: stretch; }
  .omtale-stor { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .omtale-rating { grid-column: 2; grid-row: 1; }
  .omtale-grid > .omtale { grid-column: 2; grid-row: 2; }
}

/* Stort redaksjonelt sitat i omtale-seksjonen */
.omtale-stor { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--luft-m); }
.omtale-stor::before {
  content: "\201C";
  font: 800 clamp(4.5rem, 8vw, 7rem)/1 Georgia, serif;
  color: var(--eik);
  display: block; height: .52em;
}
.omtale-stor p {
  margin: 0;
  font: 700 clamp(1.5625rem, 1vw + 1.15rem, 1.953rem)/1.35 var(--font-hode);
  letter-spacing: -.018em;
  color: var(--marine);
  text-wrap: balance;
  max-width: 24em;
}
.omtale-stor footer { font-size: var(--tekst-xs); line-height: 1.5; color: var(--tekst-sek); display: grid; gap: 2px; }
.omtale-stor footer::before { content: ""; width: var(--strek-l); height: var(--strek); background: var(--eik); margin-bottom: var(--luft-xs); }
.omtale-stor cite { font-style: normal; font-weight: 600; color: var(--tekst); }

/* ---------- Prosess ---------- */
.prosess-liste {
  list-style: none; counter-reset: steg;
  margin: 0; padding: 0;
  display: grid; gap: var(--luft-m);
}
.prosess-liste li { text-align: center; padding: var(--luft-2xs); }
.steg-nr {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin: 0 auto var(--luft-s);
  border-radius: 50%;
  background: var(--blaa); color: #fff;
  font: 800 var(--tekst-xl) var(--font-hode);
}
.prosess-liste h3 { margin-bottom: var(--luft-2xs); }
.prosess-liste p { margin: 0; color: var(--tekst-sek); font-size: var(--tekst-s); line-height: 1.6; }
.prosess-cta { text-align: center; margin: var(--luft-l) 0 0; font-size: var(--tekst-l); }
.prosess-cta a { font-weight: 600; }
@media (min-width: 720px) { .prosess-liste { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Områder ----------
   Brikkene er gruppert etter landsdel i stedet for å ligge i én alfabetsuppe:
   leseren finner sin egen kommune raskere, og hovedkontoret er merket. */
.omrade-grupper { display: grid; gap: var(--luft-l); max-width: 980px; margin-inline: auto; }
.omrade-gruppe-tittel {
  display: flex; align-items: center; gap: var(--luft-2xs);
  font: 700 var(--tekst-xs)/1 var(--font-sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--marine);
  margin: 0 0 var(--luft-s);
}
.omrade-gruppe-tittel::before { content: ""; flex: none; width: var(--strek-s); height: var(--strek); background: var(--eik); }
.omrade-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.omrade-liste li {
  background: var(--flate); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 8px 18px;
  font-weight: 500; font-size: var(--tekst-s);
}
.omrade-base { display: inline-flex; align-items: center; gap: var(--luft-2xs); font-weight: 600; }
.omrade-base span {
  font-size: var(--tekst-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--marine); background: var(--flate-alt);
  border-radius: 999px; padding: 2px 10px;
}
.omrade-note { text-align: center; margin: var(--luft-l) 0 0; color: var(--tekst-sek); }
@media (min-width: 880px) {
  /* Romerike er den lange listen: den får en egen høy kolonne, så de to
     korte gruppene kan stables ved siden av uten å etterlate et hull. */
  .omrade-grupper { grid-template-columns: 1.35fr 1fr; gap: var(--luft-l); align-items: start; }
  .omrade-gruppe:first-child { grid-row: 1 / span 2; }
}

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; gap: var(--luft-l); }
.kontakt-liste { list-style: none; margin: var(--luft-m) 0 0; padding: 0; display: grid; gap: var(--luft-s); }
.kontakt-label { display: block; font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-sek); text-transform: uppercase; letter-spacing: .08em; }
.kontakt-liste a { font-weight: 600; font-size: var(--tekst-l); }
/* Adressen er en destinasjon, ikke bare tekst: nålen sier at lenken åpner kart */
.kontakt-kart { display: inline-flex; align-items: center; gap: var(--luft-2xs); }
.kontakt-kart .ikon { width: 18px; height: 18px; flex: none; color: var(--eik); }
.kontakt-kartnote { display: block; margin-top: 2px; font-size: var(--tekst-xs); color: var(--tekst-sek); }
.kontakt-lofte { margin-top: var(--luft-l); padding: var(--luft-s) var(--luft-m); background: var(--flate-alt); border-left: var(--strek) solid var(--eik); border-radius: 0 var(--r-kort) var(--r-kort) 0; color: var(--tekst-sek); }
.kontakt-lofte strong { color: var(--marine); }

.skjema { padding: var(--luft-l); box-shadow: 0 14px 44px rgba(1,42,102,.08); }
.skjema h3 { margin-bottom: var(--luft-2xs); }
.skjema-ingress { color: var(--tekst-sek); font-size: var(--tekst-s); line-height: 1.6; margin: 0 0 var(--luft-m); }
.felt { display: grid; gap: 6px; margin-bottom: var(--luft-s); }
.felt-rad { display: grid; gap: var(--luft-s) 12px; grid-template-columns: 1fr 1fr; }
.felt label { font-weight: 600; font-size: var(--tekst-s); }
.felt input, .felt select, .felt textarea {
  font: 400 var(--tekst-m) var(--font-sans);
  padding: 11px 14px;
  border: 1.5px solid var(--feltramme);
  border-radius: 8px;
  background: var(--bakgrunn);
  color: var(--tekst);
  width: 100%;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.felt select { cursor: pointer; }
/* Fire av seks felt er paakrevd. Vi merker de to valgfrie i stedet for de
   fire andre: mindre stoey, og brukeren faar vite det foer innsending i
   stedet for etter (WCAG 3.3.2). */
.felt .valgfritt { font-weight: 400; color: var(--tekst-sek); font-size: var(--tekst-xs); }
.felt input:hover, .felt select:hover, .felt textarea:hover { border-color: #C9D3DE; }
/* Musefokus: rolig blå glød. */
.felt input:focus, .felt select:focus, .felt textarea:focus {
  outline: none; border-color: var(--blaa); background: var(--flate);
  box-shadow: 0 0 0 3px rgba(23,118,202,.22);
}
/* Tastaturfokus: samme glød + den felles ringen, så den er synlig uansett bakgrunn. */
.felt input:focus-visible, .felt select:focus-visible, .felt textarea:focus-visible {
  outline: var(--fokus-tykk) solid var(--fokus);
  outline-offset: var(--fokus-luft);
  box-shadow: none;
}
.felt.har-feil input, .felt.har-feil textarea { border-color: var(--feil); }
.felt.har-feil input:focus, .felt.har-feil textarea:focus { box-shadow: 0 0 0 3px rgba(179,64,47,.20); border-color: var(--feil); }
.felt-feil { color: var(--feil); font-size: var(--tekst-xs); min-height: 1em; }
.felt-hp { position: absolute; left: -9999px; }
.skjema button[type="submit"] { width: 100%; }
.skjema-personvern { font-size: var(--tekst-xs); line-height: 1.55; color: var(--tekst-sek); margin: var(--luft-xs) 0 0; }
.skjema-suksess {
  margin-top: var(--luft-s); padding: var(--luft-s) var(--kant);
  background: #E8F4EA; border: 1px solid #BBDCC2; border-radius: var(--r-kort);
  color: #1D5A2A;
}
/* Serverfeil er ikke en hjelpetekst under et felt, men svaret på at
   innsendingen ikke gikk gjennom – og den bærer eneste vei videre:
   telefonnummeret. Da må den se ut som en melding, ikke som 13px grå-rød
   småtekst som drukner mellom knappen og personvernlinja. */
.skjema-serverfeil {
  margin-top: var(--luft-s); padding: var(--luft-s) var(--kant);
  background: #FCEEEB; border: 1px solid #E4B4AA; border-radius: var(--r-kort);
  color: #8A2E20; font-size: var(--tekst-s); line-height: 1.55;
}
.skjema-serverfeil a { color: inherit; font-weight: 600; }
.skjema-serverfeil a:hover, .skjema-serverfeil a:focus-visible { color: #6E2418; }
@media (min-width: 880px) { .kontakt-grid { grid-template-columns: 1fr 1.1fr; } }

/* ---------- Instagram ---------- */
#instagram .sek-intro { margin-bottom: 0; }
/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, var(--marine) 0%, #011E45 100%); color: #CFE4F7; padding: var(--luft-2xl) 0 0; }
.footer-grid { display: grid; gap: var(--luft-l); padding-bottom: var(--luft-xl); }
.site-footer h3 { color: #fff; font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--luft-s); }
.site-footer h3::after { content: ""; display: block; width: var(--strek-s); height: var(--strek); background: var(--eik); margin-top: var(--luft-2xs); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luft-2xs); font-size: var(--tekst-s); }
.site-footer a { color: #CFE4F7; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.site-footer a:active { color: var(--isblaa); }
.site-footer li:has(> a) { width: fit-content; }
.site-footer p { font-size: var(--tekst-s); line-height: 1.6; }
.footer-bunn { border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--luft-s); font-size: var(--tekst-xs); }
.footer-bunn p { margin: 0; }
/* Footer-lenkene malte 16-19px hoeye paa mobil. Under 44px er de vanskelige
   aa treffe, og naboene ligger tett nok til at man bommer. Paddingen gir dem
   trykkflate uten aa endre hvordan de ser ut. */
@media (max-width: 719px) {
  .site-footer ul { gap: 0; }
  .site-footer li:has(> a) > a,
  .site-footer p > a { display: inline-block; padding-block: 12px; }
  .footer-bunn a { display: inline-block; padding-block: 10px; }
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1.5fr 1fr 1fr; } }

/* ---------- Mobil sticky CTA ---------- */
.mobil-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
}
/* Hvit bunn i sekundærknappen – men den må fortsatt kunne hovres/trykkes */
.mobil-cta .btn-outline { background: var(--flate); }
.mobil-cta .btn-outline:hover { background: var(--blaa); color: #fff; }
.mobil-cta .btn-outline:active { background: var(--marine); border-color: var(--marine); color: #fff; }
/* Baren vokser med hjemindikatoren på iPhone, så plassen under innholdet
   må vokse like mye. Ellers gjemmer baren bunnlinjen i footeren. */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* Sider uten sticky CTA skal ikke reservere plass til den */
body:not(:has(.mobil-cta)) { padding-bottom: 0; }
/* Baren ligger fast over de nederste ~76px. Uten dette lander et felt eller en
   lenke som nettopp fikk fokus rett bak den: nettleseren scroller bare så langt
   at elementet så vidt er innenfor vindusbunnen, og fokusringen blir usynlig.
   Målt: en «Les mer»-lenke havnet på 812–844px med baren fra 777px. */
@media (max-width: 879px) {
  html:has(.mobil-cta) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 880px) {
  .mobil-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Artikler ---------- */
.artikkel-grid { display: grid; gap: var(--luft-m); }
/* Ingen egen transition/skygge her – kortet skal oppføre seg som alle andre .kort */
.artikkel-kort { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.artikkel-kort:hover, .artikkel-kort:focus-visible { color: inherit; }
.artikkel-kort img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.artikkel-kort .kort-innhold h3 { margin-bottom: var(--luft-2xs); }
.artikkel-kort:hover h3, .artikkel-kort:focus-visible h3 { color: var(--blaa-tekst); }
.artikkel-meta { font-size: var(--tekst-xs); color: var(--tekst-sek); margin: 0 0 var(--luft-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.les-mer { margin-top: auto; padding: 0 var(--luft-m) var(--luft-m); font-weight: 600; color: var(--blaa-tekst); font-size: var(--tekst-s); }
@media (min-width: 720px) { .artikkel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .artikkel-grid { grid-template-columns: repeat(3, 1fr); } }

.prose { max-width: 720px; margin-inline: auto; }
.prose > p, .prose li { font-size: var(--tekst-l); line-height: 1.7; color: #2A3340; }
.prose h2 { margin-top: 1.8em; }
.prose figure { margin: var(--luft-l) 0; }
.prose figure img { border-radius: var(--r-bilde); width: 100%; box-shadow: var(--skygge); }
.prose figcaption { font-size: var(--tekst-xs); color: var(--tekst-sek); margin-top: var(--luft-xs); text-align: center; }
.prose .fig-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-xs); }
.prose .fig-par img { aspect-ratio: 4 / 3; object-fit: cover; }
.artikkel-hode { max-width: 720px; margin: 0 auto var(--luft-2xs); }
.artikkel-hode .artikkel-meta { margin-top: var(--luft-2xs); }
.artikkel-ingress { font-size: var(--tekst-xl); color: var(--tekst-sek); line-height: 1.55; }
.tips-boks { background: var(--flate-alt); border-left: var(--strek) solid var(--eik); border-radius: 0 var(--r-kort) var(--r-kort) 0; padding: var(--luft-s) var(--luft-m); margin: var(--luft-m) 0; }
.tips-boks strong { color: var(--marine); }
.cta-boks { background: var(--marine); color: #fff; border-radius: var(--r-bilde); padding: var(--luft-l) var(--luft-m); margin-top: var(--luft-xl); text-align: center; }
.cta-boks h2 { color: #fff; margin-top: 0; }
.cta-boks p { color: #CFE4F7; }

/* ---------- Print ----------
   Målet: en lesbar, svart-på-hvitt-versjon av innholdet uten navigasjon,
   uten animasjoner og uten bilder som sprenger sidene. */
@media print {
  @page { margin: 16mm 14mm; }

  /* Skjerm-kroms: navigasjon, klebrige elementer, dialoger, lysbokser */
  .site-header, .main-nav, .mobile-nav, .menu-toggle, .nav-dropdown-meny,
  .mobil-cta, .skip-link, .btn-phone,
  .ba-handtak, .ba-knapp,
  dialog, .book-dialog, .book-dialog-lukk, .glightbox-container,
  video, .sek-utgang, .cta-band, .cta-boks, .prosess-cta,
  .site-footer .footer-grid > div:last-child {
    display: none !important;
  }

  /* Ingen skygger på papir – de blir bare grå grums */
  * { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; }
  /* Ingen sticky/fixed/overlay – ellers gjentas eller overlapper elementer */
  .site-header, .mobil-cta, .hero-split-bilde img, .split-hero-bilde img,
  .tjeneste-hoved-media, .tjeneste-hoved-media img, .tjeneste-hoved-innhold,
  .ba-vindu img, .ba-etter-wrap, .detalj-kort figcaption, .ba-merke, .ba-tag {
    position: static !important;
  }
  .hero-split-bilde::before, .split-hero-bilde::before,
  .tjeneste-hoved-innhold, .omtale::before, .omtale-stor::before { background: none !important; }

  /* AOS og andre inn-animasjoner må aldri skjule innhold i utskrift */
  [data-aos], .aos-init, .aos-animate {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }

  html { scroll-behavior: auto; }
  body {
    padding-bottom: 0;
    background: #fff !important;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Én regel avgjør lesbarheten: alt blir sort på hvitt.
     Ingen hvit tekst kan da forsvinne når fargeflatene faller bort. */
  body, body *, body *::before, body *::after { color: #000 !important; }

  /* Mørke og fargede flater blir hvite */
  .sek-mork, .side-hero, .hero-split, .hero-split-tekst, .nokkeltal,
  .tjeneste-hoved-innhold, .sek-alt, .skjema, .kontakt-lofte, .tips-boks,
  .detalj-kort figcaption, .site-footer, .cta-band, .cta-boks, .storsitat {
    background: none !important;
    background-image: none !important;
    border-color: #999 !important;
  }
  .site-footer { border-top: 1px solid #999; }
  a { text-decoration: underline; }

  /* Brikker, merker og knapper mistet flaten sin – gi dem en ramme i stedet */
  .btn, .ba-merke, .ba-tag, .steg-nr, .meta-kort div, .omrade-liste li,
  .tjeneste-ekstra span, .sjekkliste li::before, .skjema-suksess, .ikon-stor {
    background: none !important;
    background-image: none !important;
    border: 1px solid #999 !important;
    min-height: 0 !important;
  }
  .ikon-stor { border: 0 !important; }
  .btn { padding: 2mm 4mm !important; text-decoration: none !important; }
  .kontakt-lofte, .tips-boks, .storsitat, .smajobb { border-left: 2px solid #666 !important; }

  /* Eik-strekene blir grå streker – de er dekor, ikke informasjon */
  .badge::before, .sek-intro .badge::after, .hero-kicker::before,
  .omrade-gruppe-tittel::before,
  .site-footer h3::after, .omtale-stor footer::before,
  .detalj-kort figcaption::before, .prosess-liste::before {
    background: #666 !important;
  }
  .bilde-ramme::after { display: none !important; }

  /* Bilder skal aldri sprenge en side */
  img {
    max-width: 100% !important;
    max-height: 12cm !important;
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ba-vindu, .ba-par, .detalj-kort, .om-media, .hero-split-bilde {
    aspect-ratio: auto !important; min-height: 0 !important; overflow: visible !important;
  }
  .ba-etter-wrap { clip-path: none !important; }
  .ba-vindu { display: grid; gap: 4mm; grid-template-columns: 1fr 1fr; }

  /* Rytme og sideskift */
  .sek { padding-block: 8mm !important; }
  .container { max-width: none; padding-inline: 0; }
  .tjeneste-hoved-innhold { padding: 0 0 4mm !important; }
  .tjeneste-hoved { min-height: 0 !important; }
  /* Tre kolonner blir uleselig på A4 – to holder */
  .kort-grid, .tjeneste-grid, .prosjekt-grid, .artikkel-grid, .relatert-grid,
  .prosess-liste, .om-grid, .kontakt-grid, .omtale-grid, .footer-grid, .nokkeltal {
    grid-template-columns: 1fr 1fr !important;
    gap: 5mm !important;
  }
  .tjeneste-liten { grid-template-columns: 1fr !important; }
  .omtale-stor, .tjeneste-hoved { grid-column: auto !important; grid-row: auto !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  figure, .kort, li, blockquote, .omtale, .omtale-stor, .faq details {
    break-inside: avoid; page-break-inside: avoid;
  }
  .kort { border: 1px solid #bbb !important; }
  .faq details { border: 1px solid #bbb !important; }
  .faq details p { display: block !important; }
  details:not([open]) > *:not(summary) { display: block !important; }

  /* Skjema er verdiløst på papir – behold overskrift og løfte, dropp feltene */
  .felt, .skjema button, .skjema-suksess { display: none !important; }

  /* Adressen bak eksterne lenker og lenker til andre sider skal med */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
  a[href^="#"]::after, a[href^="index.html#"]::after { content: ""; }
  /* Hover-streken i menyen er dekor, ikke en lenkeadresse */
  .main-nav a::after { content: "" !important; }
}

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 0.01ms, ikke none: da fyrer animationend/transitionend fortsatt, slik at kode
     som rydder opp etter seg (f.eks. lightboxen) ikke henger. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Kort-titler på artikkeloversikten: h2 semantisk, h3 visuelt */
.artikkel-kort .kort-tittel { font-size: var(--h3); line-height: 1.15; letter-spacing: -.008em; text-wrap: balance; margin-bottom: var(--luft-2xs); }

/* ---------- Undersider: tjenester og prosjekter ---------- */
.side-hero { background: linear-gradient(135deg, #01204C 0%, var(--marine) 55%, #063B7E 100%); color: #fff; padding-block: clamp(64px, 8vw, 96px) clamp(48px, 6vw, 72px); }
.side-hero h1 { color: #fff; margin-bottom: var(--luft-2xs); }
.side-hero .artikkel-ingress { color: #CFE4F7; max-width: 720px; }
.side-hero .badge { color: var(--isblaa); }
.side-hero .badge::before { background: var(--eik); }
.meta-kort { display: flex; flex-wrap: wrap; gap: var(--luft-xs); margin-top: var(--luft-m); }
.meta-kort div { display: flex; flex-direction: column-reverse; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-kort); padding: 10px 18px; font-size: var(--tekst-xs); color: #CFE4F7; }
.meta-kort dt { font-size: var(--tekst-xs); color: #CFE4F7; }
.meta-kort dd { margin: 0; color: #fff; font-family: var(--font-hode); font-size: var(--tekst-l); letter-spacing: -.01em; }
.faq details { border: 1px solid var(--hairline); border-radius: var(--r-kort); background: var(--flate); margin-bottom: var(--luft-xs); padding: 0; transition: border-color .18s, box-shadow .18s; }
.faq details:hover, .faq details:focus-within { border-color: #C9D3DE; box-shadow: 0 6px 18px rgba(1,42,102,.06); }
.faq summary {
  cursor: pointer; font-weight: 600; padding: var(--luft-s) var(--kant);
  color: var(--marine); list-style: none; position: relative;
  border-radius: var(--r-kort); transition: background .18s, color .18s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq summary:focus-visible { color: var(--blaa-tekst); }
.faq summary:active { color: var(--blaa); }
.faq details[open] summary { border-radius: var(--r-kort) var(--r-kort) 0 0; }
.faq summary::after {
  content: "+"; position: absolute; right: var(--kant);
  /* Uten dette fulgte tegnet tekstflyten og havnet ved siste linje naar
     spoersmaalet gikk over to linjer, mens en-linjers spoersmaal hadde det
     midtstilt. Saa tilfeldig ut. */
  top: 50%; transform: translateY(-50%);
  font-family: var(--font-hode); font-weight: 800; color: var(--blaa);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 var(--kant) var(--luft-s); color: var(--tekst-sek); }
.relatert-grid { display: grid; gap: var(--luft-m); }
@media (min-width: 720px) { .relatert-grid { grid-template-columns: repeat(3, 1fr); } }
.cta-band { background: linear-gradient(135deg, #01204C 0%, var(--marine) 60%, #063B7E 100%); color: #fff; text-align: center; padding: var(--luft-xl) var(--luft-m); border-radius: var(--r-bilde); margin-top: var(--luft-xl); }
.cta-band h2 { color: #fff; margin-bottom: var(--luft-xs); }
.cta-band p { color: #CFE4F7; font-size: var(--tekst-l); margin: 0 auto var(--luft-m); max-width: 48ch; }
/* Den lille døra ved siden av den store: samme invitasjon, mindre forpliktelse */
.cta-band .cta-band-liten { font-size: var(--tekst-s); margin: var(--luft-m) auto 0; color: #CFE4F7; }
.cta-band-liten a { color: #fff; font-weight: 600; text-decoration-color: rgba(255,255,255,.5); }
.cta-band-liten a:hover, .cta-band-liten a:focus-visible { color: var(--isblaa); text-decoration-color: currentColor; }

/* ---------- Vendor-guards ---------- */
/* Uten JS eller med redusert bevegelse: AOS skal aldri skjule innhold */
html:not(.js) [data-aos] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; }
}
/* Lenkede prosjektbilder skal fylle kortene som før */
.ba-par a.glightbox, .detalj-kort a.glightbox { display: block; height: 100%; }
.detalj-kort a.glightbox img { height: 100%; }

/* =========================================================
   Design v2 – «anti-dokument»: asymmetri, store flater, rytme
   Delte klasser for alle sidetyper
   ========================================================= */

/* Delt hero: tekst venstre, bilde i full høyde høyre */
.split-hero { padding: 0; overflow: hidden; }
.split-hero .split-grid { display: grid; align-items: stretch; }
.split-hero .split-grid > * { min-width: 0; }
.split-hero-tekst {
  display: grid; align-content: center; justify-content: center;
  grid-template-columns: min(100%, 560px);
  padding: clamp(56px, 7vw, 96px) var(--luft-m);
}
.split-hero-tekst h1 { font-size: clamp(1.9rem, 2.2vw + .8rem, 2.7rem); text-wrap: balance; }
.split-hero-bilde { position: relative; min-height: 300px; }
.split-hero-bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-hero-bilde::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #012A66 0%, rgba(1,42,102,.25) 30%, transparent 60%); }
@media (min-width: 880px) { .split-hero .split-grid { grid-template-columns: 1.05fr 1fr; min-height: 460px; } }

/* Vekslende tekst/bilde-rader */
.media-rad { display: grid; gap: var(--luft-l); align-items: center; margin-block: clamp(48px, 7vw, 88px); }
@media (min-width: 880px) {
  .media-rad { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 88px); }
  .media-rad.snudd > .media-bilde { order: 2; }
}
.media-rad h2 { margin-top: 0; }

/* Eik-ramme bak bilder – løfter dem fra dokumentflaten */
.bilde-ramme { position: relative; }
.bilde-ramme img { position: relative; z-index: 1; border-radius: var(--r-bilde); width: 100%; object-fit: cover; }
.bilde-ramme::after { content: ""; position: absolute; inset: 0; transform: translate(16px, 16px); border: var(--strek) solid var(--eik); border-radius: var(--r-bilde); z-index: 0; }
@media (max-width: 720px) { .bilde-ramme::after { transform: translate(10px, 10px); } }

/* Spøkelsesnummer – stor, hul tallgrafikk */
.ghost-nr { font: 800 clamp(4rem, 8vw, 6.5rem)/1 var(--font-hode); color: transparent; -webkit-text-stroke: 1.5px rgba(1,42,102,.16); user-select: none; }

/* Prosess-steg med forbindelseslinje */
@media (min-width: 720px) {
  .prosess-liste { position: relative; }
  .prosess-liste::before { content: ""; position: absolute; top: 24px; left: 12%; right: 12%; height: var(--strek); background: linear-gradient(90deg, var(--hairline), var(--eik), var(--hairline)); }
  .prosess-liste li { position: relative; z-index: 1; }
  .steg-nr { box-shadow: 0 0 0 8px var(--bakgrunn); }
  .sek-alt .steg-nr, .prose .steg-nr { box-shadow: 0 0 0 8px var(--flate-alt); }
}

/* Bilde-zoom på kort – kun der kortet er klikkbart */
.kort img { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.kort:has(a):not(.skjema):hover img,
.kort:has(a):not(.skjema):focus-within img,
a.kort:hover img, a.kort:focus-within img { transform: scale(1.045); }
.kort { isolation: isolate; }

/* Tastatur skal gi samme løft som mus */
.kort:has(a):not(.skjema):focus-within,
a.kort:focus-within { box-shadow: 0 14px 40px rgba(1,42,102,.10); border-color: #D5DCE4; }

/* Bred bildefigur som bryter tekstkolonnen */
.brei-figur { width: min(100%, 980px); margin-inline: auto; }
.prose .brei-figur { margin-left: 50%; transform: translateX(-50%); width: min(92vw, 980px); }

/* Stort redaksjonelt sitat */
.storsitat { border-left: var(--strek) solid var(--eik); padding-left: var(--luft-m); font: 600 clamp(1.25rem, 1vw + 1rem, 1.5625rem)/1.4 var(--font-hode); letter-spacing: -.015em; text-wrap: balance; color: var(--marine); margin: var(--luft-l) 0; }

/* Mørk seksjon (Områder) – bryter det hvite dokumentpreget */
.sek-mork { background: linear-gradient(160deg, #01204C 0%, var(--marine) 55%, #063B7E 100%); }
.sek-mork h2 { color: #fff; }
.sek-mork .badge { color: var(--isblaa); }
.sek-mork .sek-ingress, .sek-mork .omrade-note { color: #CFE4F7; }
.sek-mork .omrade-note a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.sek-mork .omrade-note a:hover,
.sek-mork .omrade-note a:focus-visible { color: var(--isblaa); text-decoration-color: currentColor; }
/* Områdebrikkene er ikke klikkbare – da skal de heller ikke svare på mus */
.sek-mork .omrade-liste li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #E9F2FB; }
.sek-mork .omrade-gruppe-tittel { color: var(--isblaa); }
/* Hovedkontoret er det ene punktet på kartet som er en adresse, ikke et
   dekningsområde, og derfor får brikken mer lys enn de andre. */
.sek-mork .omrade-base { background: rgba(255,255,255,.14); border-color: rgba(128,214,255,.45); color: #fff; }
.sek-mork .omrade-base span { background: rgba(128,214,255,.18); color: var(--isblaa); }

/* Eik-ramme fungerer også rundt video */
.bilde-ramme video { position: relative; z-index: 1; }
.om-media.bilde-ramme { max-width: 620px; margin-inline: auto; width: 100%; }
.om-media.bilde-ramme::after { inset: 0; }

/* =========================================================
   Hero v3 – delt: ren marineflate + proft prosjektbilde
   Robust: fast innholdsbredde som aldri klipper
   ========================================================= */
.hero-split { background: linear-gradient(150deg, #011A3D 0%, var(--marine) 55%, #05336E 100%); overflow: hidden; }
.hero-split-grid { display: grid; align-items: stretch; }
.hero-split-grid > * { min-width: 0; }
.hero-split-tekst {
  display: flex; align-items: center;
  padding: clamp(64px, 8vw, 120px) var(--luft-m);
  color: #fff;
}
.hero-split-innhold { width: 100%; max-width: 560px; margin-inline: auto; }
.hero-split-tekst h1 {
  color: #fff; line-height: 1.06; margin-bottom: .46em;
  font-size: clamp(2.125rem, 5vw, 3.052rem);
}
.hero-split-tekst .hero-kicker { font-size: var(--tekst-xs); }
.hero-split-tekst .hero-ingress { font-size: var(--tekst-l); line-height: 1.7; color: #C9DCF0; max-width: 44ch; margin-bottom: 0; }
.hero-rating { margin-top: var(--luft-l); padding-top: var(--luft-m); border-top: 1px solid rgba(255,255,255,.18); color: #C9DCF0; font-size: var(--tekst-s); }
.hero-split-bilde { position: relative; min-height: 320px; }
.hero-split-bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-split-bilde::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #012A66 0%, rgba(1,42,102,.22) 22%, transparent 45%);
}
@media (min-width: 880px) {
  .hero-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(84svh, 720px); }
  .hero-split-tekst h1 { font-size: clamp(2.441rem, 2.4vw + .9rem, 3.052rem); }
}
@media (max-width: 879px) {
  .hero-split-bilde { min-height: 0; aspect-ratio: 4 / 3; order: 2; }
  .hero-split-bilde::before { background: linear-gradient(180deg, #012A66 0%, rgba(1,42,102,.15) 25%, transparent 50%); }
}

/* =========================================================
   Tjenester – asymmetrisk «featured»-layout
   Totalrenovering stort til venstre, to mindre kort stablet til høyre
   ========================================================= */
.tjeneste-grid { display: grid; gap: var(--luft-m); }

/* Hovedkortet: marine innholdsflate – på mobil som blokk under bildet */
.tjeneste-hoved { position: relative; }
.tjeneste-hoved .tjeneste-hoved-innhold { background: linear-gradient(160deg, #01204C 0%, var(--marine) 60%, #063B7E 100%); }
.tjeneste-hoved-innhold h3 { color: #fff; }
.tjeneste-hoved-innhold p { color: #C9DCF0; }
.tjeneste-hoved-innhold a { color: var(--isblaa); }
.tjeneste-hoved-innhold a:hover, .tjeneste-hoved-innhold a:focus-visible { color: #fff; }
.tjeneste-hoved-innhold .ikon-stor { color: var(--isblaa); }

@media (min-width: 880px) {
  .tjeneste-grid { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
  .tjeneste-hoved { grid-column: 1; grid-row: 1 / span 2; min-height: 560px; }

  /* Bildet fyller hele hovedkortet */
  .tjeneste-hoved-media { position: absolute; inset: 0; display: block; }
  .tjeneste-hoved-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }

  /* Tekst som overlay nederst på marine gradient */
  .tjeneste-hoved .tjeneste-hoved-innhold {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 150px var(--luft-l) var(--luft-l);
    /* Roligere fall: mørkner tidlig og jevnt, så teksten aldri kjemper mot bildet */
    background: linear-gradient(180deg,
      rgba(1,32,76,0) 0%, rgba(1,30,70,.30) 28%, rgba(1,28,66,.66) 52%,
      rgba(1,26,62,.88) 74%, rgba(1,24,58,.96) 100%);
    pointer-events: none;
  }
  .tjeneste-hoved .tjeneste-hoved-innhold a { pointer-events: auto; }
  .tjeneste-hoved-innhold h3 { font-size: var(--h3-stor); }
  .tjeneste-hoved-innhold p { max-width: 48ch; font-size: var(--tekst-s); line-height: 1.65; }

  /* Småkortene: liggende – bilde venstre, tekst høyre */
  .tjeneste-liten { display: grid; grid-template-columns: minmax(170px, 38%) 1fr; }
  .tjeneste-liten > a.glightbox { display: block; height: 100%; }
  .tjeneste-liten > a.glightbox img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  .tjeneste-liten .kort-innhold { padding: var(--luft-m); align-self: center; }
  .tjeneste-liten .ikon-stor { width: 28px; height: 28px; margin-bottom: 6px; }
}

/* =========================================================
   Prosess – mørkt marine-band
   ========================================================= */
.sek-mork .prosess-cta { color: #CFE4F7; }
.sek-mork .prosess-cta a { color: var(--isblaa); }
.sek-mork .prosess-cta a:hover, .sek-mork .prosess-cta a:focus-visible { color: #fff; }
@media (min-width: 720px) {
  .sek-mork .prosess-liste::before { background: linear-gradient(90deg, rgba(255,255,255,.14), var(--eik), rgba(255,255,255,.14)); }
  .sek-mork .steg-nr { box-shadow: 0 0 0 8px rgba(255,255,255,.09); }
}
/* To mørke band etter hverandre: tynn deler så de leses som to seksjoner */
.sek-mork + .sek-mork { border-top: 1px solid rgba(255,255,255,.16); }

/* ---------- Enhetlig navigasjon: nedtrekk + aktiv-markering ---------- */
.main-nav .aktiv { color: var(--marine); }
/* Aktiv-markering skal ALDRI endre bredden – ellers hopper menyen mellom sider */
html { scrollbar-gutter: stable; }
.main-nav .aktiv::after { right: 0 !important; }
.nav-dropdown { position: relative; display: inline-flex; }
.nav-caret { font-size: .7em; margin-left: 2px; color: var(--tekst-sek); }
.nav-dropdown-meny {
  position: absolute; top: calc(100% + 10px); left: -16px; min-width: 220px;
  background: var(--flate); border: 1px solid var(--hairline); border-radius: var(--r-kort);
  box-shadow: 0 14px 40px rgba(1,42,102,.14);
  padding: var(--luft-2xs); display: none; z-index: 120;
}
.nav-dropdown-meny::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-dropdown-meny,
.nav-dropdown:focus-within .nav-dropdown-meny { display: block; }
/* Escape skal lukke nedtrekket. Panelet åpnes av :focus-within, så det holder
   ikke å flytte fokus – fokus blir jo værende på «Tjenester» inne i gruppen.
   JS setter denne klassen i stedet, og fjerner den så snart fokus eller musen
   forlater gruppen. Høyere spesifisitet enn åpne-reglene over, uten !important. */
.nav-dropdown.meny-lukket .nav-dropdown-meny { display: none; }
.nav-dropdown-meny a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--tekst); text-decoration: none; font-weight: 500; font-size: var(--tekst-s);
  transition: background .16s, color .16s;
}
.nav-dropdown-meny a::after { display: none; }
.nav-dropdown-meny a:hover,
.nav-dropdown-meny a:focus-visible { background: var(--flate-alt); color: var(--marine); }
.nav-dropdown-meny a:active { background: #E6EBF2; }
/* Ringen skal ligge innenfor panelet, ikke skjæres av kanten */
.nav-dropdown-meny a:focus-visible { outline-offset: -2px; }
.mobilmeny-gruppe {
  display: block; margin: 0; font-family: var(--font-sans); line-height: 1.4;
  padding: var(--luft-xs) 4px 4px;
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tekst-sek);
}
.mobile-nav a.mobilmeny-under { padding-left: 18px; font-size: var(--tekst-s); }

/* ---------- Scroll-animasjon (egen, erstatter AOS) ---------- */
html.anim-klar [data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
html.anim-klar [data-aos].anim-inn { opacity: 1; transform: none; }
html.anim-klar [data-aos][data-aos-delay="100"] { transition-delay: .1s; }
html.anim-klar [data-aos][data-aos-delay="200"] { transition-delay: .2s; }
html.anim-klar [data-aos][data-aos-delay="300"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  html.anim-klar [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Touch-mål på mobil ----------
   Lenker som står tett i lister blir 19 til 21px høye med ren tekst. For
   øyet er det nok, for tommelen er det ikke det. Vi gir dem luft der det
   gjelder, kun under 880px, så desktop-layouten står urørt.
   min-height framfor padding: padding var gjetning og traff 37 og 42px når
   teksten brøt over to linjer. min-height holder 44 uansett skriftstørrelse. */
@media (max-width: 879px) {
  .site-footer ul { gap: var(--luft-xs); }
  .site-footer li > a,
  .kontakt-liste a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .kort-lenke a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Telefonnummeret i løpende tekst: padding på et inline-element utvider
     trykkflaten uten å skyve linjene fra hverandre. */
  .hero-ring a, .cta-band-liten a, .smajobb p a,
  .artikkel-avsender a { padding-block: 13px; }
}

/* Lysboksens knapper er 26 til 35px i vendorfila. Løft dem til 44px.
   To klasser slår vendorens ene, så overstyringen holder uansett rekkefølge. */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev { min-width: 44px; min-height: 44px; }

/* Hjelpelinja i småjobb-boksen. Kundetesten 22. aug: frykten for å høres dum
   ut på telefonen var like reell som frykten for prisen, og boksen sa «ring og
   fortell» uten å si hva man skulle fortelle. */
.smajobb-hjelp { display: inline-block; margin-top: 6px; color: var(--tekst-sek); font-size: var(--tekst-s); }

/* Småjobb-boksen i en artikkel står i en 560px spalte, ikke i full bredde.
   Medieforespørselen over ser på vindusbredden og gir da to kolonner selv om
   boksen bare er ~470px bred, slik at teksten klemmes til ca. 270px. Inne i en
   artikkel skal den derfor alltid stables, uansett hvor bredt vinduet er. */
article .smajobb { grid-template-columns: 1fr; }
article .smajobb-tlf { justify-self: start; }

/* =========================================================
   Mobil: trykkflater og lesbarhet
   Målt på 390px i ekte nettleser, ikke anslått. Alt under gjelder kun
   under 880px, så skrivebordslayouten står urørt.
   ========================================================= */
@media (max-width: 879px) {
  /* Brødsmulene var 21px høye på 25 sider. De er navigasjon, ikke løpende
     tekst, så unntaket for inline-lenker gjelder ikke. */
  .brodsmuler li { min-height: 44px; }
  .brodsmuler a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Telefon og e-post på kontaktsiden lå på 22px. Dette er de viktigste
     lenkene på hele nettstedet på mobil, og de var blant de minste. */
  a.kontakt-kanal-verdi { display: inline-flex; align-items: center; min-height: 44px; }

  /* «Se alle prosjekter» målte 39px. Seks piksler fra kravet er fortsatt under. */
  .prosjekt-nav-alle { min-height: 44px; display: inline-flex; align-items: center; }

  /* Etikettstørrelsene ligger i artikler.css og prosjekter.css, som lastes
     etter denne fila og ville overstyrt en regel her. */
}

/* =========================================================
   Forstørret tekst (WCAG 1.4.4: 200 % skal ikke koste innhold)
   Målt: fire av seks sider fikk sideveis scroll ved 200 % tekst.
   Årsaken var ikke layouten, men at grid- og flex-barn har
   min-width: auto som standard og derfor ikke kan krympe under
   innholdet sitt. En e-postadresse eller et telefonnummer som ikke
   kan brytes, dytter da hele raden ut av vinduet.
   ========================================================= */
/* Lange, ubrytelige strenger: e-post og telefon i kort og bokser.
   Ikke satt globalt, fordi break-word på alt gir stygge brudd i brødtekst. */
.kontakt-kanal-verdi,
.smajobb p a,
.smajobb-hjelp { overflow-wrap: anywhere; }

/* Telefonknappen holder nummeret samlet, men skal aldri bli bredere enn
   boksen den står i. Luften strammes når plassen er knapp. */
.smajobb-tlf { max-width: 100%; }
@media (max-width: 879px) {
  .smajobb-tlf { padding-inline: var(--luft-s); }
}


/* =========================================================
   Grid- og flex-barn skal kunne krympe
   Standardverdien min-width: auto gjør at et grid- eller flex-barn aldri
   blir smalere enn innholdet sitt. Ved 200 % tekst ble en overskrift 415px
   bred i et 390px vindu, og hele siden fikk sideveis scroll. Symptomet dukket
   opp i den faste bunnbaren, men årsaken lå i .om-grid, .kontakt-kanaler og
   flere andre. Målt, ikke gjettet. Dette er den generelle kuren, satt på alle
   beholdere som faktisk bruker grid eller flex.
   ========================================================= */
.artikkel-grid > *,
.artikkel-kort > *,
.ba-par > *,
.booking-blokk-cta > *,
.felt-rad > *,
.footer-grid > *,
.header-inner > *,
.hero-cta > *,
.hero-split-grid > *,
.hero-split-tekst > *,
.juridisk-knapper > *,
.juridisk-utgang > *,
.kontakt-grid > *,
.kontakt-kanal > *,
.kontakt-kanaler > *,
.kontakt-liste > *,
.kontakt-oppsett > *,
.media-rad > *,
.meta-kort > *,
.mobil-cta > *,
.neste-steg > *,
.neste-steg-kort > *,
.nokkeltal > *,
.nokkeltal-lofter > *,
.nokkeltal-score > *,
.nummer-rad > *,
.om-grid > *,
.omrade-grupper > *,
.omrade-liste > *,
.omtale-grid > *,
.prosess-liste > *,
.prosjekt-grid > *,
.prosjekt-kort > *,
.prosjekt-nav > *,
.rating-panel > *,
.sjekkliste > *,
.smajobb > *,
.split-hero-tekst > *,
.tillit-grid > *,
.tjeneste-grid > * { min-width: 0; }

/* Ratingen er 4,8, men markupen har fem hele stjerner. Uten dette leste raden
   som 5 av 5, og en overdrevet rating svekker akkurat det den skal styrke.
   Gradienten fyller 96 % (4,8/5) og lar resten staa dempet. Tallet ved siden
   av er uansett den primaere baereren; raden er aria-hidden. */
.nokkeltal-stjerner, .rating-panel-stjerner, .rating-stjerner {
  /* Boksen maa klemme seg rundt tegnene. Maalt: elementet var 271 px bredt
     mens de fem stjernene bare opptok 105 px, saa 96 %-kuttet landet i
     tomrommet etter dem og gjorde ingenting synlig. */
  display: inline-block; width: fit-content;
  /* Fargen maa staa eksplisitt: currentColor ville pekt paa color under, som
     er transparent for at bakgrunnen skal vises gjennom tegnene. */
  background-image: linear-gradient(90deg, #8A6E42 96%, rgba(138,110,66,.34) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Paa marineblaa flate maa den fylte delen vaere lys for aa synes. */
.hero-lys .rating-stjerner, .sek-mork .rating-stjerner, .nokkeltal .nokkeltal-stjerner {
  background-image: linear-gradient(90deg, var(--eik) 96%, rgba(255,255,255,.30) 96%);
}