/* =========================================================
   Handy Dandy – stilark
   Tokens først. Endre farger og typografi KUN her.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Merkefarger – faste verdier. Endre farger KUN her. */
  --hav:   #163A63;   /* havblå – lysglød i toppen, stripe under helten, monogram */
  --spon:  #EFE8D8;   /* høvelspon – hovedbakgrunn */
  --bjork: #F8F5EE;   /* bjørk – lyse seksjoner */
  --stokk: #FECC44;   /* tommestokk-gul fra logoen – aksent */
  --mork:  #151D27;   /* nesten svart – tekst på gult og bunnfelt */

  /* Roller – brukes av komponentene. Fra v19 er det mørke «asfalt»-temaet standard for hele siden.
     Vil dere ha et lyst tema senere, lag en klasse som bare bytter disse verdiene. */
  --side:   #12161C;       /* asfalt – sidebakgrunn */
  --flate:  #1C232D;       /* annenhver seksjon */
  --tekst:  var(--spon);   /* brødtekst og streker (12,9:1 på flate) */
  --dempet: #C7D2E0;       /* dempet tekst (10,3:1 på flate) */
  --aksent: var(--stokk);  /* tall, roller, fokusring, stempelkant */
  --band:   #0B0F14;       /* nesten svart: topp, helt, kontakt */
  --lys:    var(--spon);   /* tekst på mørke felt */
  --band-dempet: #C7D2E0;  /* dempet tekst på mørke felt (12,6:1) */
  --band-kant:   #6A86A6;  /* knappekant (5,1:1) */
  --band-linje:  #2A3442;  /* skillelinje */
  --strok:  #245A99;       /* malingsstrøk under overskrifter (tekst over: 5,7:1) */

  color-scheme: dark;

  /* Typografi */
  --font: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --smal: 62%;        /* kondensert bredde for titler */

  /* Rytme */
  --rom: clamp(4rem, 10vw, 8rem);
  --kant: clamp(1.25rem, 5vw, 3rem);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }

html { scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--side);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-stretch: var(--smal); line-height: .95; }
p { margin: 0; }
img, svg { max-width: 100%; }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--aksent); outline-offset: 3px; }
.helt :focus-visible, .topp :focus-visible, .kontakt :focus-visible, .aerlig :focus-visible { outline-color: var(--stokk); }

.ramme { width: min(100% - 2 * var(--kant), 72rem); margin-inline: auto; }

.hopp {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .75rem 1rem; background: var(--stokk); color: var(--mork); font-weight: 700;
}
.hopp:focus { top: 1rem; }

/* ---------- Topp ---------- */

.topp { background: var(--band); color: var(--lys); }
.topp__rad { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; flex-wrap: wrap; }

.logo { display: inline-block; line-height: 0; border-radius: 3px; }
.logo img { display: block; height: clamp(2.5rem, 6vw, 3.25rem); width: auto; }

.meny { display: flex; gap: clamp(1rem, 3vw, 2rem); margin: 0; padding: 0; list-style: none; }
.meny a { text-decoration: none; font-weight: 600; padding-block: .5rem; }
.meny a:hover { text-decoration: underline; text-decoration-color: var(--stokk); }

/* ---------- Helt ---------- */

.helt { background: var(--band); color: var(--lys); padding-block: clamp(2.5rem, 7vw, 5rem) var(--rom); overflow: hidden; }

.helt__tittel { font-size: clamp(3.6rem, 11.5vw, 9rem); font-weight: 800; letter-spacing: -.01em; }
.helt__linje { display: block; }

.helt__ingress { max-width: 34rem; font-size: 1.2rem; margin-top: 1rem; }

.knapper { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.knapp {
  display: inline-block; padding: .9rem 1.4rem; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; border-radius: 3px;
  transition: transform .15s ease, background-color .15s ease;
}
.knapp:active { transform: translateY(1px); }
.knapp--gul { background: var(--stokk); color: var(--mork); }
.knapp--gul:hover { background: #FFD96E; }
.knapp--strek { border-color: var(--lys); color: var(--lys); }
.knapp--strek:hover { background: var(--lys); color: var(--band); }

/* ---------- Seksjoner ---------- */

.seksjon { padding-block: var(--rom); overflow-x: clip; } /* v14: ingen animasjon kan gjøre siden bredere enn skjermen */
.seksjon--lys { background: var(--flate); }
.seksjon__tittel { font-size: clamp(2.5rem, 7vw, 4.75rem); font-weight: 800; margin-bottom: 1.25rem; }
.seksjon__ingress { max-width: 38rem; color: var(--dempet); font-size: 1.15rem; margin-bottom: 2.5rem; }

/* Tjenester */
.tjenester {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem 3rem; margin: 2rem 0 0; padding: 0; list-style: none;
}
.tjenester li { border-top: 2px solid var(--tekst); padding-top: 1rem; }
.tjenester h3 { font-size: 1.75rem; font-weight: 750; margin-bottom: .5rem; }
.tjenester p { color: var(--dempet); max-width: 30rem; }

/* Stempel – «ikke tak» */
.stempel {
  max-width: 34rem; margin-top: 4rem; padding: 1.5rem 1.75rem;
  border: 4px double var(--aksent); border-radius: 4px;
  transform: rotate(-1.5deg);
  background: var(--flate);
}
.stempel__tittel { font-size: 2rem; font-weight: 800; font-stretch: var(--smal); line-height: 1; margin-bottom: .5rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .stempel { opacity: 0; transform: rotate(-1.5deg) scale(1.08); }
  .js .stempel.synlig { animation: stemple .35s cubic-bezier(.2, .9, .3, 1.3) forwards; }
}
@keyframes stemple { to { opacity: 1; transform: rotate(-1.5deg) scale(1); } }

/* Prosjekter */
.prosjekter { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2.5rem 2rem; }

.prosjekt { border-top: 2px solid var(--tekst); }
.prosjekt summary {
  list-style: none; cursor: pointer; display: grid; gap: .75rem; padding-top: 1rem; position: relative;
}
.prosjekt summary::-webkit-details-marker { display: none; }
.prosjekt summary::after { /* pluss som blir kryss */
  content: "+"; position: absolute; right: 0; bottom: 0;
  font-size: 2rem; line-height: 1; font-weight: 400;
  transition: transform .25s ease;
}
.prosjekt[open] summary::after { transform: rotate(45deg); }

.tegning { width: 100%; height: auto; aspect-ratio: 8 / 5; background: var(--side); }
.tegning path { fill: none; stroke: var(--aksent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .js .tegning path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .synlig .tegning path { animation: tegn 1.1s ease-in-out forwards; }
  .js .synlig .tegning path:nth-child(2) { animation-delay: .15s; }
  .js .synlig .tegning path:nth-child(3) { animation-delay: .3s; }
  .js .synlig .tegning path:nth-child(4) { animation-delay: .45s; }
  .js .synlig .tegning path:nth-child(5) { animation-delay: .6s; }
  .js .synlig .tegning path:nth-child(6) { animation-delay: .75s; }
  .js .synlig .tegning path:nth-child(7) { animation-delay: .9s; }
}
@keyframes tegn { to { stroke-dashoffset: 0; } }

.prosjekt__tekst { display: grid; padding-right: 2.5rem; }
.prosjekt__navn { font-size: 1.6rem; font-weight: 750; font-stretch: var(--smal); line-height: 1.05; }
.prosjekt__sted { color: var(--dempet); }
.prosjekt__mer { display: grid; gap: .6rem; padding-top: .9rem; color: var(--dempet); }
.prosjekt__mer strong { color: var(--tekst); }

/* Steg – faktisk rekkefølge, derfor nummerert */
.steg { counter-reset: steg; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.steg li { counter-increment: steg; }
.steg li::before {
  content: counter(steg); display: block;
  font-size: 4.5rem; font-weight: 800; font-stretch: var(--smal); line-height: 1; color: var(--aksent);
  border-bottom: 2px solid var(--tekst); padding-bottom: .5rem; margin-bottom: 1rem;
}
.steg h3 { font-size: 1.5rem; font-weight: 750; margin-bottom: .4rem; }
.steg p { color: var(--dempet); }

/* Kontakt */
.kontakt { background: var(--band); color: var(--lys); }
.kontakt .seksjon__ingress { color: var(--band-dempet); }

/* v37 – Kontakt i to kolonner: tekst og kontaktrader til venstre, kjøkkenbilde til høyre (skjules på mobil).
   Bildet fyller hele høyden på venstre kolonne, så topp og bunn flukter med teksten. */
.kontakt__oppsett { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: stretch; }
.kontakt__etikett { margin: 0 0 1.25rem; font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--stokk); }
.kontakt__tittel { margin: 0; font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 800; line-height: .95; max-width: 14ch; }
.kontakt__aksent { color: var(--stokk); }
.kontakt__ingress { max-width: 34rem; margin: 1.5rem 0 0; font-size: 1.15rem; color: var(--band-dempet); }
.kontakt__rader { display: grid; gap: 1.75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.kontakt__rad { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.kontakt__ikon { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--stokk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt__felt { display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.kontakt__felt > p { margin: 0; }
.kontakt__type { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #9AA6B6; }
.kontakt__verdi { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.3; color: var(--lys); text-decoration: none; overflow-wrap: anywhere; }
a.kontakt__verdi:hover, a.kontakt__verdi:focus-visible { color: var(--stokk); text-decoration: underline; text-underline-offset: .2em; }
.kontakt__merk { display: grid; gap: .35rem; max-width: 34rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--band-linje); font-size: .95rem; color: var(--band-dempet); }
.kontakt__merk p { margin: 0; }
.kontakt__merk strong { color: var(--lys); }
.kontakt__foto { min-height: 0; }
.kontakt__bilde { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; border-radius: 2px; filter: brightness(.86) saturate(.95); }
@media (max-width: 48rem) {
  .kontakt__oppsett { grid-template-columns: minmax(0, 1fr); }
  .kontakt__foto { display: none; }
}


/* Bunn */
.bunn { background: var(--mork); color: var(--band-dempet); font-size: .95rem; }
.bunn__rad { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 2rem; }
.bunn__signatur { flex-basis: 100%; margin-top: .25rem; color: #8E9BAD; font-size: .8rem; letter-spacing: .02em; } /* diskret kreditering, 6,0:1 på --mork */

/* Enkel innholdsside (personvern, 404) */
.side { padding-block: var(--rom); }
.side h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; margin-bottom: 1.5rem; }
.side h2 { font-size: 1.75rem; font-weight: 750; margin: 2rem 0 .5rem; }
.side p { max-width: 40rem; margin-bottom: 1rem; }
.renhold__videre { margin-top: 3rem; max-width: 40rem; }
.side ul { max-width: 40rem; margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .35rem; }
.side .side__dato { color: var(--dempet); font-size: .95rem; margin-top: -1rem; }

@media (max-width: 34rem) {
  .meny { gap: 1rem; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   v2 – Handy Dandy: salgsklar, før/etter, bad, team
   ========================================================= */

.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Overskrift med malingsrull som maler en stripe */
.malt { position: relative; display: inline-block; isolation: isolate; padding-bottom: .15em; }
.malt__tekst { position: relative; z-index: 1; }
.malt__strok {
  position: absolute; z-index: 0; left: -.1em; bottom: .12em; height: .38em; width: calc(100% + .2em);
  background: var(--strok); border-radius: .08em;
  transform-origin: 0 50%;
}
.malt { --rulle-slutt: 100%; }
@media (max-width: 72rem) { .malt { --rulle-slutt: calc(100% - .6em); } } /* hold rullen innenfor skjermen når overskriften brytes */
.malt__rulle { position: absolute; z-index: 2; bottom: -.1em; left: var(--rulle-slutt); width: .75em; height: .75em; } /* v23: blir stående etter strøket */
.malt__rulle rect:first-child { fill: var(--stokk); stroke: var(--mork); stroke-width: 3; }
.malt__rulle path { fill: none; stroke: #B7C1CE; stroke-width: 3; stroke-linejoin: round; }
.malt__rulle rect:last-child { fill: var(--aksent); }

@media (prefers-reduced-motion: no-preference) {
  .js .malt__strok { transform: scaleX(0); }
  .js .malt.synlig .malt__strok { animation: mal 1.2s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
  .js .malt__rulle { opacity: 0; }
  .js .malt.synlig .malt__rulle { animation: rull 1.2s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
}
@keyframes mal { to { transform: scaleX(1); } }
@keyframes rull {
  0%   { left: -.2em; opacity: 1; }
  100% { left: var(--rulle-slutt); opacity: 1; }
}

/* Prioritert rekkefølge – derfor nummerert */
.prioritet { counter-reset: p; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.prioritet li { counter-increment: p; border-top: 2px solid var(--tekst); padding-top: 1rem; }
.prioritet li::before { content: counter(p); display: block; font-size: 3rem; font-weight: 800; font-stretch: var(--smal); line-height: 1; color: var(--aksent); margin-bottom: .5rem; }
.prioritet h3 { font-size: 1.6rem; font-weight: 750; margin-bottom: .5rem; }
.prioritet p { color: var(--dempet); }

.aerlig { margin-top: 3.5rem; max-width: 44rem; padding: 1.5rem 1.75rem; background: var(--band); color: var(--lys); border-radius: 4px; }
.aerlig h3 { font-size: 2rem; font-weight: 800; margin-bottom: .6rem; color: var(--stokk); }

/* Bad – tre fag */
.fag { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem 2.5rem; }
.fag__kol { border-top: 2px solid var(--tekst); padding-top: 1rem; }
.fag__kol:first-child { border-top-width: 6px; border-top-color: var(--stokk); }
.fag__kol h3 { font-size: 1.6rem; font-weight: 750; margin-bottom: .75rem; }
.fag__kol ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.fag__merk { margin-top: 1rem; color: var(--dempet); font-size: .98rem; }
.dok { margin-top: 3rem; max-width: 44rem; font-size: 1.15rem; }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; max-width: 48rem; }
.person__monogram {
  display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: 1rem;
  border-radius: 50%; background: var(--hav); color: var(--stokk);
  font-size: 2.2rem; font-weight: 800; font-stretch: var(--smal);
}
.person__navn { font-size: 1.75rem; font-weight: 750; }
.person__rolle { font-weight: 600; color: var(--aksent); margin: .3rem 0 .5rem; }
.person p:last-child { color: var(--dempet); }

/* v3 – språk og avfall */
.nowrap { white-space: nowrap; }
.sprak { display: grid; gap: .4rem; max-width: 36rem; padding: 1rem 1.25rem; border-left: 4px solid var(--stokk); background: rgba(255, 255, 255, .05); }
.sprak strong { color: var(--stokk); }
.avfall { margin-top: 3.5rem; max-width: 44rem; display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 2px solid var(--tekst); }
.avfall h3 { font-size: 1.75rem; font-weight: 750; }
.avfall p { color: var(--dempet); }
.stempel a { font-weight: 700; }
.stempel__merk { margin-top: .6rem; font-size: .85rem; color: var(--dempet); }

/* v4 – menyen skal ikke bryte ord på smale skjermer */
.meny { flex-wrap: wrap; row-gap: .25rem; }
.meny a { white-space: nowrap; }
@media (max-width: 34rem) { .meny { column-gap: .9rem; } }

/* v5/v14 – «Til toppen»-knapp. Fungerer uten JS (vanlig lenke); JS viser den først når toppen er ute av syne.
   v14: fjernet hard svart skygge og trykk-markering på mobil, som ga et svart merke når knappen ble trykket. */
.til-topp {
  position: fixed; z-index: 20;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--stokk); color: var(--mork);
  border: 2px solid var(--aksent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.til-topp svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.til-topp:focus-visible { outline: 3px solid var(--tekst); outline-offset: 3px; }
@media (hover: hover) {
  .til-topp:hover { background: #FFD96E; }
}
.til-topp:active { background: #FFD96E; }

.js .til-topp { opacity: 0; transform: translateY(1rem); pointer-events: none; visibility: hidden; }
.js .til-topp.vis {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

/* v6 – Om oss med historie og tidslinje */
.om { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 2.5rem 4rem; align-items: start; }
@media (max-width: 48rem) { .om { grid-template-columns: 1fr; } }
.om__historie { display: grid; gap: 1rem; max-width: 40rem; font-size: 1.12rem; line-height: 1.65; }
.om .person { border-top: 6px solid var(--stokk); padding-top: 1.25rem; }

.tidslinje { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1.5rem; position: relative; display: grid; gap: 1.5rem; }
.tidslinje::before { /* tommestokk-linjen */
  content: ""; position: absolute; left: .35rem; top: .5rem; bottom: .5rem; width: .5rem;
  background:
    repeating-linear-gradient(180deg, var(--mork) 0 1px, transparent 1px .6rem) left / 45% 100% no-repeat,
    var(--stokk);
  border-radius: 2px;
}
.tidslinje li { position: relative; display: grid; gap: .15rem; padding-left: 1rem; }
.tidslinje__aar { font-size: 2.25rem; font-weight: 800; font-stretch: var(--smal); line-height: 1; color: var(--aksent); }
.tidslinje li > span:last-child { color: var(--dempet); font-size: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .js .tidslinje::before { transform: scaleY(0); transform-origin: top; }
  .js .om.synlig .tidslinje::before { animation: tidslinje 1s ease-out .2s forwards; }
}
@keyframes tidslinje { to { transform: scaleY(1); } }


/* v8 – illustrasjonsfoto (ekte bilder erstatter dem senere) */
.foto { margin: 0 0 3.5rem; }
.foto img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--side); }
.foto figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; margin-top: .75rem; font-size: 1.05rem; }
.foto__kilde { color: var(--dempet); font-size: .75rem; letter-spacing: .01em; }
.foto__merknad { margin-top: .75rem; color: var(--dempet); font-size: .8rem; }
/* v20: bildene er stillestående (ingen avduking). */

/* v18 – «Tjenester»-undermeny. <details> virker uten JS; JS lukker den ved klikk utenfor og Escape. */
.undermeny { position: relative; }
.meny { align-items: center; }
.meny > li > a { display: inline-block; }
.undermeny > summary {
  list-style: none; cursor: pointer; font-weight: 600; padding-block: .5rem;
  display: flex; align-items: center; gap: .4rem; white-space: nowrap; border-radius: 3px;
}
.undermeny > summary::-webkit-details-marker { display: none; }
.undermeny > summary::after {
  content: ""; width: .42em; height: .42em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg); transition: transform .2s ease;
}
.undermeny[open] > summary::after { transform: translateY(.12em) rotate(-135deg); }
.undermeny > summary:hover { text-decoration: underline; text-decoration-color: var(--stokk); }
.undermeny__liste {
  position: absolute; z-index: 30; top: calc(100% + .35rem); left: -.8rem;
  min-width: 15rem; margin: 0; padding: .4rem; list-style: none;
  background: var(--band); border: 1px solid var(--band-kant); border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.meny .undermeny__liste a { display: block; padding: .7rem .8rem; border-radius: 3px; text-decoration: none; }
.meny .undermeny__liste a:hover,
.meny .undermeny__liste a[aria-current="page"] { background: rgba(255, 255, 255, .08); text-decoration: underline; text-decoration-color: var(--stokk); }
/* Smal skjerm: undermenyen åpner seg på egen linje i menyen i stedet for å flyte over innholdet */
@media (max-width: 40rem) {
  .meny__gruppe:has(.undermeny[open]) { flex-basis: 100%; }
  .undermeny__liste {
    position: static; min-width: 0; margin-top: .25rem; padding: 0 0 0 .75rem;
    background: transparent; border: 0; border-left: 3px solid var(--stokk); border-radius: 0; box-shadow: none;
  }
  .meny .undermeny__liste a { padding: .6rem .5rem; }
}

/* v19 – Mørkt tema som standard */
.helt {
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(22, 58, 99, .9), transparent 60%),
    var(--band);
  border-bottom: 6px solid var(--hav);
}
.helt > .ramme { position: relative; z-index: 1; }

/* v21 – Arbeidstegning: en reisverksvegg med mål tegner seg selv bak toppen, én gang.
   Inline SVG + CSS (CSP-sikkert, ingen JS). Vises fra 48rem; på mobil er det for lite plass ved siden av overskriften. */
.arbeidstegning { display: none; }
@media (min-width: 48rem) {
  .helt {
    background:
      repeating-linear-gradient(0deg, rgba(127, 179, 255, .05) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, rgba(127, 179, 255, .05) 0 1px, transparent 1px 24px),
      radial-gradient(ellipse at 85% 0%, rgba(22, 58, 99, .9), transparent 60%),
      var(--band);
  }
  .arbeidstegning {
    display: block; position: absolute; z-index: 0;
    right: max(.5rem, calc((100vw - 72rem) / 2 - 8rem)); top: clamp(3rem, 8vw, 7rem);
    width: clamp(16rem, 34vw, 30rem); height: auto; opacity: .3; /* v25: lenger til høyre, fri av overskriften */
  }
}
@media (min-width: 64rem) { .arbeidstegning { opacity: .55; } }
.arbeidstegning path { fill: none; stroke: #7FB3FF; stroke-width: 1.6; stroke-linecap: round; } /* v23: uten non-scaling-stroke, som kuttet strekene i Chrome på enkelte skjermer */
.arbeidstegning .arbeidstegning__mal { stroke: var(--stokk); stroke-width: 1.2; }
.arbeidstegning text { fill: var(--stokk); font: 700 13px var(--font); }
@media (prefers-reduced-motion: no-preference) {
  .arbeidstegning path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tegn 1.2s ease-in-out forwards; }
  .arbeidstegning > :nth-child(2)  { animation-delay: .25s; }
  .arbeidstegning > :nth-child(3)  { animation-delay: .5s; }
  .arbeidstegning > :nth-child(4)  { animation-delay: .7s; }
  .arbeidstegning > :nth-child(5)  { animation-delay: .85s; }
  .arbeidstegning > :nth-child(6)  { animation-delay: 1s; }
  .arbeidstegning > :nth-child(7)  { animation-delay: 1.15s; }
  .arbeidstegning > :nth-child(8)  { animation-delay: 1.3s; }
  .arbeidstegning > :nth-child(9)  { animation-delay: 1.5s; }
  .arbeidstegning > :nth-child(10) { animation-delay: 1.7s; }
  .arbeidstegning > :nth-child(11) { animation-delay: 1.9s; }
  .arbeidstegning text { opacity: 0; animation: vis-inn .5s ease 2.3s forwards; }
}
@keyframes vis-inn { to { opacity: 1; } }
.topp { border-bottom: 1px solid var(--band-linje); }
.til-topp { border-color: var(--mork); }

/* Tommestokken – signaturelementet i toppen (tilbake i v20). Brettes ut én gang ved lasting.
   Rent CSS; av ved «redusert bevegelse». */
.tommestokk {
  --seg: min(17vw, 11.5rem);
  position: relative;
  width: calc(var(--seg) * 5);
  height: clamp(1.8rem, 4vw, 2.6rem);
  margin-block: 2.25rem 1.5rem;
}
.ledd {
  position: absolute; top: 0; left: 0;
  width: var(--seg); height: 100%;
  transform-origin: 0 50%;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, var(--mork) 0 1px, transparent 1px calc(var(--seg) / 10)) top left / 100% 28% no-repeat,
    repeating-linear-gradient(90deg, var(--mork) 0 2px, transparent 2px calc(var(--seg) / 2)) top left / 100% 52% no-repeat,
    var(--stokk);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.ledd .ledd { left: 100%; }
.ledd .ledd::before { /* hengselet */
  content: ""; position: absolute; left: -.3rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.3rem;
  border-radius: 50%; background: #B7C1CE; box-shadow: inset 0 0 0 2px var(--mork);
}
.ledd > span {
  position: absolute; right: .35rem; bottom: .1rem;
  font-size: clamp(.6rem, 1.4vw, .8rem); font-weight: 700; color: var(--mork);
}
@media (prefers-reduced-motion: no-preference) {
  .tommestokk > .ledd { animation: inn .5s ease-out both; }
  .ledd .ledd { animation: brett-ut .7s cubic-bezier(.3, 1.35, .5, 1) both; }
  .ledd > .ledd                             { --fra: 174deg;  animation-delay: .45s; }
  .ledd > .ledd > .ledd                     { --fra: -174deg; animation-delay: .7s; }
  .ledd > .ledd > .ledd > .ledd             { --fra: 174deg;  animation-delay: .95s; }
  .ledd > .ledd > .ledd > .ledd > .ledd     { --fra: -174deg; animation-delay: 1.2s; }
}
@keyframes inn { from { transform: translateX(-2rem); opacity: 0; } }
@keyframes brett-ut { from { transform: rotate(var(--fra)); } to { transform: rotate(0); } }

/* v19 – Bildegalleri (illustrasjonsfoto). Mobil først: sveip sideveis; fra 48rem et rutenett. */
.galleri { margin: 3.5rem 0; }
.seksjon + .seksjon { border-top: 1px solid var(--band-linje); }
.galleri__tittel { font-size: 1.6rem; font-weight: 750; margin-bottom: 1rem; }
.galleri__rad {
  display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 1rem;
  margin: 0; padding: 0 0 .75rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-color: var(--band-kant) transparent;
}
.galleri__rad:focus-visible { outline: 3px solid var(--aksent); outline-offset: 4px; }
.galleri__rad > li { scroll-snap-align: start; }
.galleri figure { margin: 0; position: relative; } /* holder skjult tekst inne i sveipefeltet, så siden ikke blir bredere */
.galleri img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--side); }
.galleri figcaption { display: grid; gap: .15rem; margin-top: .6rem; font-size: 1rem; }
@media (min-width: 48rem) {
  .galleri__rad { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; gap: 2rem 1.5rem; }
  .galleri__rad--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* v23 – Hammer ved logoen (forslag B). Egen SVG, ingen lisens. Slår to slag ved lasting,
   ett slag ved mus over / tastaturfokus. Står stille ved «redusert bevegelse». */
.logo--hammer { display: inline-flex; align-items: flex-end; gap: .3rem; }
.hammer { display: block; flex: none; width: clamp(2.3rem, 5.5vw, 3rem); height: auto; aspect-ratio: 1; overflow: visible; }
.hammer__skaft { fill: #C8955A; }
.hammer__hode { fill: #B7C1CE; stroke: var(--mork); stroke-width: 2; }
.hammer__spiker rect { fill: #B7C1CE; }
.hammer__planke { fill: #8A6A45; }
.hammer__arm { transform-origin: 10px 56px; transform: rotate(-8deg); }
.hammer__spiker { transform: translateY(5px); }
.hammer__stov { fill: none; stroke: var(--stokk); stroke-width: 3; stroke-linecap: round; opacity: 0; transform-origin: 60px 66px; }
@media (prefers-reduced-motion: no-preference) {
  .hammer__arm { animation: slag 1.6s cubic-bezier(.5, 0, .3, 1) .4s 2 both; }
  .hammer__stov { animation: stov 1.6s ease-out .4s 2 both; }
  .hammer__spiker { animation: spiker-ned 3.2s linear .4s both; }
  .logo--hammer:hover .hammer__arm,
  .logo--hammer:focus-visible .hammer__arm { animation: slag-igjen 1.6s cubic-bezier(.5, 0, .3, 1) both; }
  .logo--hammer:hover .hammer__stov,
  .logo--hammer:focus-visible .hammer__stov { animation: stov-igjen 1.6s ease-out both; }
}
@keyframes slag       { 0% { transform: rotate(-8deg); } 22% { transform: rotate(-55deg); } 30% { transform: rotate(4deg); } 36% { transform: rotate(0); } 100% { transform: rotate(-8deg); } }
@keyframes slag-igjen { 0% { transform: rotate(-8deg); } 22% { transform: rotate(-55deg); } 30% { transform: rotate(4deg); } 36% { transform: rotate(0); } 100% { transform: rotate(-8deg); } }
@keyframes stov       { 0%, 29% { opacity: 0; transform: scale(.6); } 32% { opacity: 1; } 50% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; } }
@keyframes stov-igjen { 0%, 29% { opacity: 0; transform: scale(.6); } 32% { opacity: 1; } 50% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; } }
@keyframes spiker-ned { 0%, 14.9% { transform: translateY(0); } 15%, 64.9% { transform: translateY(3px); } 65%, 100% { transform: translateY(5px); } }

/* v26 – Renhold: vaskeperson med kost og bøtte ved logoen (samme idé som hammeren på forsiden).
   Egen SVG, ingen lisens. Feier to ganger ved lasting, bobler stiger fra bøtta, støv forsvinner og det glitrer.
   Spilles av igjen ved hover/fokus. Ren CSS (CSP-sikkert), av ved «redusert bevegelse» – da vises sluttbildet. */
.logo--renhold { display: inline-flex; align-items: flex-end; gap: .3rem; }
.vasker { display: block; flex: none; width: clamp(3.45rem, 8.25vw, 4.5rem); height: auto; aspect-ratio: 3 / 2; overflow: visible; }
.vasker__gulv { fill: none; stroke: var(--band-kant); stroke-width: 1.5; stroke-linecap: round; opacity: .6; }
.vasker__smuss circle { fill: #8C7B5E; }
.vasker__smuss { opacity: 0; }
.vasker__hank { fill: none; stroke: #B7C1CE; stroke-width: 2; }
.vasker__spann { fill: var(--strok); stroke: var(--mork); stroke-width: 2; stroke-linejoin: round; }
.vasker__kant { fill: var(--band-kant); }
.vasker__skum { fill: var(--spon); }
.vasker__bobler circle { fill: none; stroke: #7FB3FF; stroke-width: 1.2; opacity: 0; }
.vasker__bein { fill: none; stroke: var(--strok); stroke-width: 6; stroke-linecap: round; }
.vasker__sko { fill: none; stroke: #B7C1CE; stroke-width: 3; stroke-linecap: round; }
.vasker__overkropp { fill: none; stroke: var(--stokk); stroke-width: 10; stroke-linecap: round; }
.vasker__hode { fill: var(--spon); }
.vasker__caps { fill: var(--strok); stroke: var(--strok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vasker__arm { transform-origin: 60px 30px; }
.vasker__skaft { fill: none; stroke: #C8955A; stroke-width: 3.5; stroke-linecap: round; }
.vasker__kost { fill: #8A6A45; }
.vasker__bust { fill: none; stroke: var(--stokk); stroke-width: 2; stroke-linecap: round; }
.vasker__armer { fill: none; stroke: var(--spon); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.vasker__gnister path,
.renholdstegning__gnister path { fill: var(--stokk); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .vasker__arm { animation: feie 1.6s cubic-bezier(.5, 0, .3, 1) .4s 2 both; }
  .vasker__smuss { animation: feid-bort .5s ease-out .75s both; }
  .vasker__bobler circle { animation: boble 1.6s ease-out .4s 2 both; }
  .vasker__bobler circle:nth-child(2) { animation-delay: .75s; }
  .vasker__bobler circle:nth-child(3) { animation-delay: 1.1s; }
  .vasker__gnister path { animation: gnist .5s ease-out 3.4s both; }
  .vasker__gnister g:nth-child(2) path { animation-delay: 3.6s; }
  .logo--renhold:hover .vasker__arm,
  .logo--renhold:focus-visible .vasker__arm { animation: feie-igjen 1.6s cubic-bezier(.5, 0, .3, 1) both; }
  .logo--renhold:hover .vasker__bobler circle,
  .logo--renhold:focus-visible .vasker__bobler circle { animation: boble-igjen 1.6s ease-out both; }
}
@keyframes feie       { 0% { transform: rotate(0); } 30% { transform: rotate(9deg); } 45% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
@keyframes feie-igjen { 0% { transform: rotate(0); } 30% { transform: rotate(9deg); } 45% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
@keyframes feid-bort  { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(-7px, -2px); } }
@keyframes boble       { 0% { opacity: 0; transform: translateY(4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes boble-igjen { 0% { opacity: 0; transform: translateY(4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes gnist { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 60% { opacity: 1; transform: scale(1.3) rotate(0); } 100% { opacity: 1; transform: scale(1); } }

/* v26 – Renholdstegning: samme plassering og strek som arbeidstegningen på forsiden.
   Et vindu tegner seg, en vindusnal vasker bort skitten rad for rad, glansen kommer, det glitrer
   og sjekklisten krysses av. Ferdig på under 5 sekunder (WCAG 2.2.2), spilles én gang. Vises fra 48rem. */
.renholdstegning { display: none; }
@media (min-width: 48rem) {
  .renholdstegning {
    display: block; position: absolute; z-index: 0;
    right: max(.5rem, calc((100vw - 72rem) / 2 - 8rem)); top: clamp(3rem, 8vw, 7rem);
    width: clamp(16rem, 34vw, 30rem); height: auto; opacity: .3;
  }
}
@media (min-width: 64rem) { .renholdstegning { opacity: .6; } }
.renholdstegning__ramme path,
.renholdstegning__bokser path { fill: none; stroke: #7FB3FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.renholdstegning__ramme path:nth-child(4) { stroke-width: 1; opacity: .7; }
.renholdstegning__mal path { fill: none; stroke: var(--stokk); stroke-width: 1.2; stroke-linecap: round; }
.renholdstegning text { fill: var(--stokk); font: 700 13px var(--font); }
.renholdstegning__punkter text { fill: var(--spon); font-weight: 600; }
.renholdstegning__overskrift { letter-spacing: .08em; text-transform: uppercase; }
.renholdstegning__skitt path { fill: none; stroke: #A8916B; stroke-width: 2.5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.renholdstegning__glans path { fill: none; stroke: var(--spon); stroke-width: 2.2; stroke-linecap: round; }
.renholdstegning__nal { transform-box: view-box; transform-origin: 0 0; transform: translate(50px, 195px) scaleX(-1); }
.renholdstegning__gummi { fill: var(--stokk); }
.renholdstegning__holder { fill: #B7C1CE; }
.renholdstegning__handtak { fill: #C8955A; }
.renholdstegning__haker path { fill: none; stroke: var(--stokk); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .renholdstegning__ramme path, .renholdstegning__mal path, .renholdstegning__bokser path,
  .renholdstegning__glans path, .renholdstegning__haker path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tegn 1s ease-in-out forwards; }
  .renholdstegning__ramme > :nth-child(2) { animation-delay: .2s; }
  .renholdstegning__ramme > :nth-child(3) { animation-delay: .35s; }
  .renholdstegning__ramme > :nth-child(4) { animation-delay: .5s; }
  .renholdstegning__ramme > :nth-child(5) { animation-delay: .65s; }
  .renholdstegning__mal path { animation-delay: .8s; }
  .renholdstegning__bokser > :nth-child(1) { animation-delay: .5s; }
  .renholdstegning__bokser > :nth-child(2) { animation-delay: .6s; }
  .renholdstegning__bokser > :nth-child(3) { animation-delay: .7s; }
  .renholdstegning__bokser > :nth-child(4) { animation-delay: .8s; }
  .renholdstegning text { opacity: 0; animation: vis-inn .5s ease 1s forwards; }

  /* Skitten kommer til syne, og forsvinner idet nala passerer (tidene følger banen under) */
  .renholdstegning__skitt path { animation: skitt-inn .4s ease .5s both, skitt-ut .3s ease-out var(--vask, 2s) forwards; }
  .renholdstegning__skitt > :nth-child(1) { --vask: 1.45s; }
  .renholdstegning__skitt > :nth-child(2) { --vask: 1.63s; }
  .renholdstegning__skitt > :nth-child(3) { --vask: 2.02s; }
  .renholdstegning__skitt > :nth-child(4) { --vask: 2.25s; }
  .renholdstegning__skitt > :nth-child(5) { --vask: 2.63s; }
  .renholdstegning__skitt > :nth-child(6) { --vask: 2.86s; }
  .renholdstegning__skitt > :nth-child(7) { --vask: 3.18s; }
  .renholdstegning__skitt > :nth-child(8) { --vask: 3.41s; }

  .renholdstegning__nal { animation: nal 2.6s linear 1.2s both; }
  .renholdstegning__glans path { animation-duration: .6s; animation-delay: 2s; }
  .renholdstegning__glans > :nth-child(2) { animation-delay: 3.1s; }
  .renholdstegning__gnister path { animation: gnist .5s ease-out 3.6s both; }
  .renholdstegning__gnister g:nth-child(2) path { animation-delay: 3.75s; }
  .renholdstegning__gnister g:nth-child(3) path { animation-delay: 3.9s; }
  .renholdstegning__haker path { animation-duration: .35s; animation-delay: 3.7s; }
  .renholdstegning__haker > :nth-child(2) { animation-delay: 3.95s; }
  .renholdstegning__haker > :nth-child(3) { animation-delay: 4.2s; }
  .renholdstegning__haker > :nth-child(4) { animation-delay: 4.45s; }
}
@keyframes skitt-inn { from { opacity: 0; } to { opacity: .9; } }
@keyframes skitt-ut  { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(.3); } }
@keyframes nal {
  0%       { opacity: 0; transform: translate(50px, 90px) scaleX(1); }
  6%       { opacity: 1; transform: translate(50px, 90px) scaleX(1); }
  44%      { transform: translate(250px, 90px) scaleX(1); }
  50%      { transform: translate(250px, 195px) scaleX(-1); }
  90%, 100% { opacity: 1; transform: translate(50px, 195px) scaleX(-1); }
}

/* v28 – Språkvalg NO / EN / PL som nedtrekksvindu (ADR-0010). Vanlige lenker til egne språksider, lagrer ingenting.
   <details> virker uten JS. Klassen .undermeny gir samme oppførsel som «Tjenester»: main.js lukker vinduet ved klikk
   utenfor, Escape og når fokus forlater det. Bred skjerm: til høyre for menyen. Smal skjerm: oppe til høyre på logo-raden. */
.hovedmeny { margin-left: auto; }
.topp__rad > .sprakvalg:only-of-type { margin-left: auto; } /* personvern/404: bare logo og språkvalg */
.sprakvalg__meny > summary {
  gap: .35rem; padding: .4rem .65rem; border: 1px solid var(--band-kant); border-radius: 3px;
  font-size: .9rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; color: var(--lys);
}
.sprakvalg__meny > summary:hover { text-decoration: none; border-color: var(--stokk); }
.sprakvalg__meny[open] > summary { border-color: var(--stokk); color: var(--stokk); }
.sprakvalg__liste {
  position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0;
  min-width: 10.5rem; margin: 0; padding: .35rem; list-style: none;
  background: var(--band); border: 1px solid var(--band-kant); border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.sprakvalg__liste a {
  display: flex; align-items: baseline; gap: .75rem; padding: .7rem .8rem; border-radius: 3px;
  color: var(--lys); font-weight: 600; text-decoration: none;
}
.sprakvalg__kode { min-width: 1.6rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--band-dempet); }
.sprakvalg__liste a:hover { background: rgba(255, 255, 255, .08); }
.sprakvalg__liste a[aria-current="page"] { color: var(--stokk); box-shadow: inset 3px 0 0 var(--stokk); }
.sprakvalg__liste a[aria-current="page"] .sprakvalg__kode { color: var(--stokk); }
@media (min-width: 72rem) {
  .hovedmeny + .sprakvalg { padding-left: 1rem; border-left: 1px solid var(--band-linje); }
}
@media (max-width: 21rem) { /* svært smale skjermer (320 px): logo, ikon og språkvalg på samme rad */
  .topp__rad { column-gap: .5rem; }
  .logo img { height: 2.25rem; }
  .vasker { width: 3rem; }
  .hammer { width: 2.1rem; }
}

/* v27 – Lange sammensatte ord («Personvernerklæring», «przeprowadzki») skal brytes, ikke flyte ut av skjermen.
   Gjelder særlig i øyeblikket før webfonten er lastet, når reservefonten er bredere (WCAG 1.4.10). */
h1, h2, h3 { overflow-wrap: break-word; }

/* v29 – Mørk «luksus»-forside (ADR-0011). Ren CSS; <details> virker uten JS (main.js lukker ved Escape og lenkeklikk).
   – Toppmenyen følger med nedover (sticky), lav og litt gjennomsiktig.
   – Hamburgermeny under 72rem; den vanlige menyen og «Gratis befaring» vises fra 72rem.
   – Forsiden: bakgrunnsbilde med mørkt overlegg, etikett over overskriften og en stripe med det kunden får. */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem); } /* ankre havner ikke bak toppmenyen */
.hopp { z-index: 60; }
.topp { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 20, .96); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topp { background: rgba(11, 15, 20, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.topp__rad { padding-block: .75rem; }
.topp__cta { padding: .7rem 1.1rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.burger { position: static; display: none; } /* static: panelet plasseres under hele toppmenyen */
.burger > summary { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
.burger > summary::after { content: none; }
.burger > summary:hover { text-decoration: none; }
.burger__ikon { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.burger__kryss { display: none; }
.burger[open] .burger__strek { display: none; }
.burger[open] .burger__kryss { display: inline; }
.burger[open] > summary { color: var(--stokk); }
.burger__panel {
  position: absolute; left: 0; right: 0; top: 100%; box-sizing: border-box;
  height: calc(100vh - 100%); height: calc(100dvh - 100%); /* % = toppmenyens høyde */
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2rem;
  padding: .5rem var(--kant) calc(2rem + env(safe-area-inset-bottom, 0px));
  background: var(--band); border-top: 1px solid var(--band-linje);
}
.burger__liste { margin: 0; padding: 0; list-style: none; }
.burger__liste a {
  display: block; padding: .85rem 0; border-bottom: 1px solid var(--band-linje);
  font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 800; font-stretch: var(--smal); line-height: 1.05;
  color: var(--lys); text-decoration: none;
}
.burger__liste a:hover, .burger__liste a[aria-current="page"] { color: var(--stokk); }
.burger__ring { text-align: center; }

@media (max-width: 71.99rem) { /* den bredeste menyen (engelsk renhold) trenger ca. 1140 px på én linje */
  .hovedmeny, .topp__cta { display: none; }
  .sprakvalg { margin-left: auto; }
  .burger { display: block; }
}
@media (max-width: 26rem) { /* logo, ikon, språk og meny på én rad ned til 360 px */
  .topp__rad { column-gap: .5rem; }
  .logo img { height: 2.25rem; }
  .vasker { width: 3rem; }
  .hammer { width: 2.1rem; }
  .sprakvalg__meny > summary { padding: .4rem .5rem; gap: .2rem; }
}
@media (max-width: 21rem) { .vasker, .hammer { display: none; } } /* 320 px: animasjonen ved logoen må vike */

.helt--foto {
  display: flex; align-items: flex-end; min-height: clamp(34rem, 82vh, 52rem);
  padding-block: clamp(5rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
  background: var(--band);
}
.helt__bilde { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.helt--foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 15, 20, .9) 0%, rgba(11, 15, 20, .66) 45%, rgba(11, 15, 20, .28) 100%),
    linear-gradient(0deg, var(--band) 0%, rgba(11, 15, 20, 0) 40%);
}
@media (max-width: 48rem) {
  .helt__bilde { object-position: 50% 50%; }
  .helt--foto::before { background: linear-gradient(180deg, rgba(11, 15, 20, .7) 0%, rgba(11, 15, 20, .62) 35%, rgba(11, 15, 20, .9) 65%, var(--band) 100%); }
}
.helt__etikett { margin-bottom: 1.25rem; font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--stokk); }
.helt--foto .helt__ingress { color: #D6DCE4; }

.lofter { background: var(--band); color: var(--lys); border-bottom: 1px solid var(--band-linje); }
.lofter__liste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem;
  margin-block: 0; padding: 2rem 0; list-style: none;
}
.lofter__liste li { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.lofter__nr { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600; letter-spacing: .2em; color: var(--stokk); }
@media (max-width: 48rem) { .lofter__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v30 – Renhold i «Dette gjør vi» med hurtigknapp til renhold-siden. */
.tjenester .tjenester__renhold { border-top-color: var(--stokk); } /* gul strek: renhold har egen side */
.tjenester__knapp { margin-top: 1rem; }

/* v31 – Profesjonell toppmeny, «Våre tjenester» med fem kort og «Slik jobber vi» med tider og trygghet (ADR-0012).
   Hammeren og vaskepersonen ved logoen er fjernet fra HTML (stilene for dem står igjen ubrukt). */
.logo img { height: clamp(2.25rem, 4vw, 2.75rem); }
.hovedmeny .meny { column-gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.hovedmeny .meny > li > a,
.hovedmeny .undermeny > summary { font-size: .95rem; font-weight: 500; letter-spacing: .01em; color: var(--band-dempet); }
.hovedmeny .meny > li > a:hover,
.hovedmeny .undermeny > summary:hover,
.hovedmeny .undermeny[open] > summary { color: var(--lys); }
.topp__cta { padding: .7rem 1.25rem; font-size: .9rem; font-weight: 600; letter-spacing: .02em; text-transform: none; border-radius: 2px; }
.sprakvalg__meny > summary { font-size: .85rem; border-color: var(--band-linje); }

.etikett { margin: 0 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--stokk); }
.intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.intro__tittel { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; line-height: .95; }
.intro__aksent { display: block; color: var(--stokk); }
.intro__tekst { max-width: 32rem; font-size: 1.1rem; color: var(--dempet); }
@media (max-width: 48rem) { .intro { grid-template-columns: minmax(0, 1fr); } }

.kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--band-linje); }
.kort__ledd { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 2rem 2rem 2.25rem; border-bottom: 1px solid var(--band-linje); }
.kort__ledd:not(:nth-child(3n+1)) { border-left: 1px solid var(--band-linje); }
.kort__ikon { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--stokk); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kort__nr { font-size: .8rem; letter-spacing: .2em; color: var(--dempet); }
.kort__ledd > .kort__nr { position: absolute; top: 2.1rem; right: 2rem; }
.kort__ledd h3 { margin-top: 1.25rem; font-size: 1.9rem; font-weight: 750; }
.kort__ledd p { flex-grow: 1; color: var(--dempet); }
.kort__lenke { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding-block: .5rem; font-weight: 600; color: var(--stokk); text-decoration: none; }
.kort__lenke:hover { text-decoration: underline; text-underline-offset: .25em; }
.kort__pil { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.kort__lenke:hover .kort__pil { transform: translateX(3px); }
@media (max-width: 63.99rem) {
  .kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kort__ledd:not(:nth-child(3n+1)) { border-left: 0; }
  .kort__ledd:nth-child(2n) { border-left: 1px solid var(--band-linje); }
}
@media (max-width: 40rem) {
  .kort { grid-template-columns: minmax(0, 1fr); }
  .kort__ledd, .kort__ledd:nth-child(2n) { border-left: 0; padding-inline: 0; }
  .kort__ledd > .kort__nr { right: 0; }
}

.prosess { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem 4rem; align-items: start; }
.prosess__steg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.prosess__steg li { display: grid; align-content: start; gap: .6rem; padding: 0 1.25rem 0 1.5rem; border-left: 1px solid var(--band-linje); }
.prosess__steg .kort__nr { color: var(--stokk); }
.prosess__steg h3 { font-size: 1.5rem; font-weight: 750; }
.prosess__steg p { font-size: .98rem; color: var(--dempet); }
@media (max-width: 72rem) { .prosess { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 48rem) { .prosess__steg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 30rem) { .prosess__steg { grid-template-columns: minmax(0, 1fr); } }

.trygg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 7vw, 5rem); }
@media (max-width: 48rem) { .trygg { grid-template-columns: minmax(0, 1fr); } }
.boks { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--band-linje); background: rgba(255, 255, 255, .02); }
.boks__tittel { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 750; }
.boks__ikon { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--stokk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.boks__liste { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.boks__liste li { display: flex; align-items: flex-start; gap: .75rem; }
.boks__hake { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; fill: none; stroke: var(--stokk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trygg + .avfall { margin-top: clamp(3rem, 7vw, 4rem); }
.helt--foto .helt__ingress { margin-top: 1.75rem; } /* luft under overskriften nå som linjalen er fjernet */

/* v32 – Ny toppoverskrift på forsiden: lengre første linje, andre linje i gult. */
.helt--foto .helt__tittel { font-size: clamp(3.2rem, 8.5vw, 7.25rem); max-width: 20ch; }
.helt__linje--aksent { color: var(--stokk); }

/* v33 – Bakgrunnsbilder på forsiden. Valnøttkjøkkenet vises først, deretter veksler det med
   marmorkjøkkenet, 4 sekunder hver, så lenge siden er åpen. Bare CSS, så det virker uten JS og under streng CSP.
   Med «redusert bevegelse» blir det første bildet stående. Overlegget er mørkere bak teksten
   og åpnere mot høyre, så bildet synes uten at kontrasten på teksten går ned.
   Det andre bildet (svart marmor) har kjøkkenet til høyre for teksten. */
.helt__bilde { object-position: 50% 55%; filter: brightness(1.18) saturate(1.06); }
.helt__bilde--neste { opacity: 0; object-position: 50% 50%; filter: brightness(1.08); }
@media (prefers-reduced-motion: no-preference) {
  .helt__bilde--neste { animation: helt-bytt 10s ease-in-out infinite; }
}
/* 10 s per runde: 4 s valnøtt, 1 s overgang, 4 s marmor, 1 s overgang tilbake. */
@keyframes helt-bytt { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.helt--foto::before {
  background:
    linear-gradient(90deg, rgba(11, 15, 20, .92) 0%, rgba(11, 15, 20, .85) 48%, rgba(11, 15, 20, .76) 64%, rgba(11, 15, 20, .2) 84%, rgba(11, 15, 20, 0) 100%),
    linear-gradient(0deg, var(--band) 0%, rgba(11, 15, 20, 0) 26%);
}
@media (max-width: 48rem) {
  .helt__bilde, .helt__bilde--neste { object-position: 50% 50%; }
  .helt--foto::before { background: linear-gradient(180deg, rgba(11, 15, 20, .3) 0%, rgba(11, 15, 20, .64) 22%, rgba(11, 15, 20, .82) 48%, rgba(11, 15, 20, .9) 75%, var(--band) 100%); }
}

/* v34 – Mobil: hele kjøkkenet synes øverst, som et kvadratisk bilde rett under menyen.
   Bildet toner ut nederst, og teksten starter på den nedre delen av bildet. */
@media (max-width: 48rem) {
  .helt--foto { min-height: 0; padding-top: calc(100vw * .7); }
  .helt__bilde {
    inset: 0 0 auto 0; height: 100vw; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  }
  .helt--foto::before {
    background: linear-gradient(180deg,
      rgba(11, 15, 20, .12) 0,
      rgba(11, 15, 20, .18) calc(100vw * .4),
      rgba(11, 15, 20, .72) calc(100vw * .68),
      rgba(11, 15, 20, .9) calc(100vw * .82),
      var(--band) 100vw);
  }
}

/* v35 – «Gratis befaring» i toppmenyen er like høy som språkknappen ved siden av. */
.topp__cta { padding: .4rem .85rem; font-size: .85rem; line-height: 1.2; border-width: 1px; border-radius: 3px; }

/* v36 – Bunnfelt i fire kolonner: om firmaet, kontakt, tjenester og navigasjon.
   Ikonene er gule streker som resten av siden. Under ligger copyright, personvern og kreditering. */
.bunn :focus-visible { outline-color: var(--stokk); }
.bunn__kolonner {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 3rem; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.bunn__tittel { margin: 0 0 1.1rem; color: var(--lys); font-size: 1.3rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.bunn__tekst { max-width: 26rem; margin: 0; line-height: 1.75; }
.bunn__kontakt, .bunn__lenker { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.bunn__kontakt li { display: flex; align-items: center; gap: .85rem; }
.bunn__ikon { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--stokk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bunn__kontakt a, .bunn__lenker a { color: var(--band-dempet); text-decoration: none; }
.bunn__kontakt a:hover, .bunn__lenker a:hover { color: var(--stokk); text-decoration: underline; text-underline-offset: .2em; }
.bunn__rad { border-top: 1px solid var(--band-linje); padding-block: 1.5rem 2rem; }
.bunn__rad p { margin: 0; }
.bunn__rad a { color: var(--band-dempet); }
@media (max-width: 64rem) { .bunn__kolonner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .bunn__kolonner { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } }

/* v38 – PC: toppbildet fyller hele skjermen under menyen, så neste seksjon ikke stikker opp nederst.
   4.3125rem = høyden på den faste menyen (69 px). Mobil (v34) er uendret. */
@media (min-width: 48.0625rem) {
  .helt--foto { min-height: calc(100vh - 4.3125rem); min-height: calc(100svh - 4.3125rem); }
}

/* v39 – Galleri: «Fotografert av …» står på samme linje under alle bildene, selv om bildeteksten over brytes ulikt. */
.galleri__rad > li { display: flex; }
.galleri figure { display: flex; flex-direction: column; width: 100%; }
.galleri figcaption { display: flex; flex-direction: column; flex: 1; gap: .15rem; }
.galleri figcaption .foto__kilde { margin-top: auto; padding-top: .35rem; }

/* v40 – «Normal gjennomføringstid» er fjernet (kunden vil ikke oppgi anslag). «Dette kan du stole på» får hele bredden. */
.trygg--en { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .trygg--en .boks__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; } }

/* v41 – «Bad og våtrom» er fjernet. Fire tjenestekort står i et symmetrisk 2 × 2-rutenett fra 40rem. */
@media (min-width: 40.0625rem) {
  .kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kort__ledd:not(:nth-child(3n+1)) { border-left: 0; }
  .kort__ledd:nth-child(2n) { border-left: 1px solid var(--band-linje); }
}