/* =========================================================================
   Tømrerfirma Øystein Kristiansen AS (TFOK) — Nesodden
   Stilark / Design System
   Palett: dyp skogsgrønn, varme tretoner, kremhvit, kullsort tekst
   ========================================================================= */

/* ---------- 1. Designtokens ---------- */
:root {
  /* Farger */
  --skog:        #2f4734;   /* dyp skogsgrønn */
  --skog-dyp:    #233628;
  --skog-lys:    #50705a;
  --tre:         #b07a4e;   /* varm tretone */
  --tre-lys:     #d8a978;
  --tre-mork:    #8a5a36;
  --krem:        #f6f0e6;   /* kremhvit / mykt hvitt */
  --krem-dyp:    #ece3d4;
  --hvit:        #fffdf9;
  --kull:        #2b2622;   /* kullsort tekst */
  --kull-myk:    #574e46;
  --sand:        #e7dcc8;
  --gull:        #c89b54;

  /* Funksjonelle */
  --bg:          var(--krem);
  --tekst:       var(--kull);
  --tekst-svak:  var(--kull-myk);
  --aksent:      var(--tre);
  --linje:       rgba(43, 38, 34, 0.12);

  /* Typografi */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-brod:    "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Mål */
  --maks:    1200px;
  --maks-tekst: 720px;
  --radius:  14px;
  --radius-stor: 26px;
  --skygge:  0 18px 50px -18px rgba(35, 54, 40, 0.35);
  --skygge-myk: 0 8px 24px -12px rgba(35, 54, 40, 0.25);

  /* Rytme */
  --seksjon: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- 2. Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-brod);
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.12rem);
  line-height: 1.7;
  color: var(--tekst);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--skog-dyp);
  font-optical-sizing: auto;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
p  { color: var(--tekst-svak); }

::selection { background: var(--tre-lys); color: var(--skog-dyp); }

/* Skip-link for tilgjengelighet */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--skog); color: var(--krem);
  padding: 0.7rem 1.2rem; border-radius: 8px; z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--tre);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Layout-hjelpere ---------- */
.wrap { width: min(100% - 2.5rem, var(--maks)); margin-inline: auto; }
.seksjon { padding-block: var(--seksjon); }
.tekst-smal { max-width: var(--maks-tekst); }
.midt { text-align: center; margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-brod);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tre-mork);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px;
  background: var(--tre); display: inline-block;
}
.midt .eyebrow::before { display: none; }

.lede {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--kull-myk);
  max-width: 56ch;
}
.midt .lede { margin-inline: auto; }

/* ---------- 4. Knapper ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  font-weight: 700; font-size: 1rem;
  padding: 0.95rem 1.7rem;
  border-radius: 100px; border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn-primar {
  background: var(--skog); color: var(--krem);
  box-shadow: 0 10px 24px -10px rgba(47, 71, 52, 0.7);
}
.btn-primar:hover { background: var(--skog-dyp); transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(47, 71, 52, 0.6); }
.btn-tre { background: var(--tre); color: #fff; }
.btn-tre:hover { background: var(--tre-mork); transform: translateY(-3px); }
.btn-linje {
  background: transparent; color: var(--skog-dyp);
  border-color: rgba(47, 71, 52, 0.4);
}
.btn-linje:hover { border-color: var(--skog); background: rgba(47, 71, 52, 0.06); transform: translateY(-3px); }

/* Linjeknapp på mørk flate. ALLE mørke bakgrunner skal stå her – legges det til
   en ny mørk seksjonstype, hører den hjemme i denne lista, ellers blir knappen
   mørk tekst på mørk bunn. */
.band-skog .btn-linje,
.cta-band .btn-linje,
.hero--film .btn-linje {
  color: var(--krem);
  border-color: rgba(246, 240, 230, 0.5);
}
.band-skog .btn-linje:hover,
.cta-band .btn-linje:hover,
.hero--film .btn-linje:hover {
  color: var(--krem);
  background: rgba(246, 240, 230, 0.14);
  border-color: var(--krem);
}
.btn-stor { padding: 1.1rem 2.1rem; font-size: 1.08rem; }

/* Tekstlenke med pil */
.lenke-pil {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; color: var(--tre-mork);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.lenke-pil:hover { gap: 0.7rem; border-color: var(--tre); }

/* ---------- 5. Header / navigasjon ---------- */
.topp {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 240, 230, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.topp.skrollet {
  border-color: var(--linje);
  box-shadow: 0 4px 20px -14px rgba(43,38,34,0.4);
}
.topp__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 78px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
/* Logoen er et bilde med fast høyde – bredden følger av bildets eget forhold,
   så den aldri strekkes. Kilden er 283x96, så høyder rundt 48-52 px holder seg
   skarpe også på skjermer med dobbel pikseltetthet. */
.logo__bilde { display: block; height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 0.4rem; }
.nav a {
  font-weight: 600; font-size: 0.98rem; color: var(--kull);
  padding: 0.55rem 0.85rem; border-radius: 9px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav a:hover { background: rgba(47,71,52,0.08); color: var(--skog-dyp); }
.nav a[aria-current="page"] { color: var(--tre-mork); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--tre);
  border-radius: 2px; margin-top: 2px;
}
.topp__cta { display: flex; align-items: center; gap: 0.8rem; }
.tlf-lenke { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--skog-dyp); white-space: nowrap; }
.tlf-lenke svg { width: 17px; height: 17px; color: var(--tre); }

.burger {
  display: none; background: none; border: 0; padding: 0.4rem;
  width: 46px; height: 46px; border-radius: 10px; color: var(--skog-dyp);
}
.burger span {
  display: block; width: 24px; height: 2.4px; background: currentColor;
  border-radius: 2px; margin: 5px auto; transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* Trangt område: full meny, men strammere enn på bred skjerm. */
@media (min-width: 921px) and (max-width: 1150px) {
  .nav { gap: 0.05rem; }
  .nav a { font-size: 0.9rem; padding: 0.5rem 0.5rem; }
  .topp__cta { gap: 0.55rem; }
  .topp__cta .btn { padding: 0.7rem 1.1rem; font-size: 0.9rem; }
  .logo__bilde { height: 46px; }
}

@media (max-width: 920px) {
  .burger { display: block; }
  .logo__bilde { height: 44px; }
  .nav {
    position: fixed; inset: 78px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--krem); padding: 1rem 1.25rem 1.75rem;
    border-bottom: 1px solid var(--linje);
    box-shadow: var(--skygge);
    transform: translateY(-130%); transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 0.95rem 0.85rem; font-size: 1.1rem; border-bottom: 1px solid var(--linje); }
  .nav a[aria-current="page"]::after { display: none; }
  .topp__cta .btn { display: none; }
  .topp__cta .tlf-lenke span { display: none; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(176,122,78,0.18), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(47,71,52,0.12), transparent 55%),
    var(--krem);
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__merker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.merke {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--hvit); border: 1px solid var(--linje);
  padding: 0.4rem 0.85rem; border-radius: 100px;
  font-size: 0.8rem; font-weight: 700; color: var(--skog-dyp);
  box-shadow: var(--skygge-myk);
}
.merke svg { width: 15px; height: 15px; color: var(--tre); }
.hero h1 { margin-bottom: 1.3rem; text-wrap: balance; }
.hero h1 em { display: block; font-style: italic; color: var(--tre-mork); }
.hero__lede { margin-bottom: 2rem; font-size: 1.2rem; }
.hero__knapper { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.2rem; }
.hero__tillit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- 6b. Hero med bakgrunnsfilm (kun forsiden) ----------
   Filmen ligger som eget lag bak innholdet; sløret gir tekstkontrast.
   Alt er scopet til .hero--film, så .hero på øvrige sider er urørt. */
.hero--film {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background: var(--skog-dyp);
  min-height: clamp(540px, 78vh, 800px);
  display: flex; align-items: center;
}
.hero--film .wrap { width: 100%; }
.hero__film {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--skog-dyp) url("../img/hero-plakat.jpg") center 42% / cover no-repeat;
}
.hero__film video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Plakaten ligger som bakgrunn på .hero__film. Filmen tones inn oppå den
     først når den faktisk ruller, så vi aldri blinker svart under lasting. */
  opacity: 0; transition: opacity 700ms ease;
}
.hero__film--ruller video { opacity: 1; }
.hero__slor {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(20,32,24,0.93) 0%, rgba(20,32,24,0.82) 34%,
                           rgba(20,32,24,0.46) 66%, rgba(20,32,24,0.34) 100%),
    linear-gradient(to top, rgba(20,32,24,0.66), transparent 42%);
}
.hero--film .hero__grid {
  position: relative; z-index: 1;
  grid-template-columns: 1fr;
  align-content: space-between;
  gap: clamp(2.2rem, 7vh, 4.5rem);
  min-height: clamp(400px, 58vh, 600px);
  padding-inline: clamp(0.5rem, 2.6vw, 3rem);
}
.hero--film h1 { max-width: 24ch; margin-bottom: 0; }

/* Bunnrad: tekst og handling til venstre, nøkkeltall til høyre */
.hero__bunn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: end;
}
.hero__bunn-tekst { max-width: 48ch; }
.hero--film .hero__lede { margin-bottom: 2rem; font-size: 1.12rem; }
.hero--film .hero__knapper { margin-bottom: 0; }
.hero--film .hero__merker { margin-bottom: 0; }

.hero__panel {
  display: flex; flex-direction: column; gap: 1.15rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: rgba(246, 240, 230, 0.1);
  border: 1px solid rgba(246, 240, 230, 0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero__tall { display: flex; flex-direction: column; line-height: 1; }
.hero__tall b {
  font-family: var(--font-display); font-weight: 560;
  font-size: 2.7rem; color: var(--tre-lys);
}
.hero__tall span {
  margin-top: 0.45rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(246, 240, 230, 0.8);
}
.hero--film .hero__tillit {
  flex-direction: column; align-items: flex-start; gap: 0.3rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(246, 240, 230, 0.18);
}
.hero--film .hero__tillit small { font-size: 0.82rem; line-height: 1.45; }
.hero--film h1 { color: var(--krem); }
.hero--film h1 em { color: var(--tre-lys); }
.hero--film .hero__lede { color: rgba(246, 240, 230, 0.9); }
.hero--film .merke {
  background: rgba(246, 240, 230, 0.13);
  border-color: rgba(246, 240, 230, 0.3);
  color: var(--krem); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero--film .merke svg { color: var(--tre-lys); }
.hero--film .hero__tillit small { color: rgba(246, 240, 230, 0.85); }

@media (max-width: 880px) {
  .hero--film { min-height: 0; padding-block: clamp(3.5rem, 9vw, 5.5rem); }
  .hero--film .hero__grid { min-height: 0; gap: 2rem; }
  .hero__bunn { grid-template-columns: 1fr; align-items: start; }
  .hero--film h1 { max-width: none; }
  .hero__slor {
    /* Tett i toppen der overskriften står, og flatt 0,74 nedover – teamet på
       mobilbildet står i nedre halvdel, og 0,88 gjorde dem nesten usynlige.
       0,74 gir 6,3:1 mot krem tekst selv mot en helhvit piksel, altså god
       margin til AA. */
    background:
      linear-gradient(180deg, rgba(20,32,24,0.84) 0%, rgba(20,32,24,0.74) 42%);
  }
  /* Blur oppå video koster mye på mobil-GPU og flimrer i flere Android-
     nettlesere. Vi dropper den og gjør flatene litt tettere i stedet, så
     panelet og merkene fortsatt løsner fra filmen. */
  .hero--film .hero__panel {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(246, 240, 230, 0.16);
  }
  .hero--film .merke {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(246, 240, 230, 0.18);
  }
}
/* Mobil får et eget stillbilde i stedet for filmen. Autoplay er ikke noe vi
   kan love på telefon – iOS blokkerer all autoavspilling i strømsparingsmodus,
   og Android gjør det samme i batterisparing. Da er et bilde som alltid vises
   bedre enn en film som noen ganger ikke gjør det, og vi sparer 2,5 MB
   mobildata på kjøpet. Bildet er beskåret stående og gammaløftet, slik at
   teamet og stillasbanneret fortsatt leses gjennom sløret. */
@media (max-width: 700px) {
  .hero__film {
    background-image: url("../img/hero-mobil-tomrerteam-nesodden.webp");
    /* Forankret i bunnen: blir heroen lavere enn beregnet, er det stillas-
       banneret øverst som ryker – ikke folkene, som er hele poenget. */
    background-position: center bottom;
  }
  .hero__film video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__film video { display: none; }
}

/* ---------- 6c. Tillitsbånd: egen seksjon med godkjenningsmerker ---------- */
.tillitsband {
  background: var(--krem-dyp);
  border-block: 1px solid rgba(43, 38, 34, 0.09);
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
}
.tillitsband__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.tillitsband__tekst { display: flex; flex-direction: column; gap: 0.75rem; max-width: 58ch; }
.tillitsband__tekst .eyebrow { margin-bottom: 0; }
.tillitsband__tekst h2 + p { margin-top: 0.15rem; }
.tillitsband__tekst h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.tillitsband__tekst p { color: var(--tekst-svak); font-size: 0.98rem; }

.tillitsbar {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: flex-start; gap: 1.75rem clamp(2.25rem, 4vw, 3.5rem);
  margin-top: 0; padding-inline-start: clamp(0rem, 2vw, 1.75rem);
}
.tillitsbar__merke {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.85rem; text-align: center;
}
.tillitsbar__merke img {
  display: block; width: auto; height: clamp(54px, 7vw, 72px);
  object-fit: contain;
}
.tillitsbar__merke { max-width: 12.5rem; }
.tillitsbar__merke span {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--skog);
}
@media (max-width: 820px) {
  .tillitsband__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .tillitsbar { justify-content: flex-start; padding-inline-start: 0; }
}
.stjerner { color: var(--gull); letter-spacing: 2px; font-size: 1.1rem; }
.hero__tillit small { color: var(--tekst-svak); font-weight: 600; }

/* Bildemontasje */
.hero__bilder { position: relative; }
.hero__bilde-stor {
  border-radius: var(--radius-stor); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--skygge);
  border: 1px solid rgba(255,255,255,0.5);
}
.hero__bilde-liten {
  position: absolute; bottom: -28px; left: -28px;
  width: 45%; aspect-ratio: 1; border-radius: 20px; overflow: hidden;
  box-shadow: var(--skygge); border: 5px solid var(--krem);
}
.hero__erfaring {
  position: absolute; top: -22px; right: -10px;
  background: var(--skog); color: var(--krem);
  border-radius: 18px; padding: 1rem 1.25rem; text-align: center;
  box-shadow: var(--skygge); transform: rotate(3deg);
}
.hero__erfaring b { font-family: var(--font-display); font-size: 2.2rem; display: block; line-height: 1; color: var(--tre-lys); }
.hero__erfaring span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__bilder { max-width: 460px; margin: 1.5rem auto 0; }
}

/* ---------- 7. Bilde-plassholdere (varm, designet) ---------- */
.ph {
  position: relative; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 6px, transparent 6px 13px),
    linear-gradient(150deg, var(--tre-lys), var(--tre) 45%, var(--tre-mork));
  display: grid; place-items: center; color: rgba(255,255,255,0.92);
  overflow: hidden;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events: none;
}
.ph--skog { background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 6px, transparent 6px 13px),
    linear-gradient(150deg, var(--skog-lys), var(--skog) 50%, var(--skog-dyp)); }
.ph__ikon { width: 46px; height: 46px; opacity: 0.85; position: relative; z-index: 1; }
.ph__merkelapp {
  position: absolute; bottom: 12px; left: 12px; z-index: 1;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(0,0,0,0.32); padding: 0.3rem 0.7rem; border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* Google Maps-innbygging på kontaktsiden. Iframen definerer egen høyde via
   width x aspect-ratio, samme selvsizing-prinsipp som fotoene, så den aldri
   arver en udefinert høyde og kollapser til 150px. */
.kart {
  margin-top: 2rem;
  border-radius: var(--radius-stor);
  overflow: hidden;
  box-shadow: var(--skygge);
}
.kart iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  border: 0;
}
@media (max-width: 640px){ .kart iframe { aspect-ratio: 4 / 3; } }
.kart__stedstittel {
  margin-top: 2.2rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--tre-mork);
}
.kart__adresse {
  margin-top: 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tekst-svak);
}

/* ---------- 8. Tjenester-grid ---------- */
.tjeneste-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem; margin-top: 3rem;
}
.tjeneste-kort {
  background: var(--hvit); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 2rem 1.8rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative; overflow: hidden;
}
.tjeneste-kort::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--tre); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s ease;
}
.tjeneste-kort:hover { transform: translateY(-6px); box-shadow: var(--skygge); border-color: transparent; }
.tjeneste-kort:hover::before { transform: scaleY(1); }
.tjeneste-kort__ikon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(150deg, var(--krem-dyp), var(--sand));
  display: grid; place-items: center; margin-bottom: 1.2rem; color: var(--skog);
}
.tjeneste-kort__ikon svg { width: 28px; height: 28px; }
.tjeneste-kort h3, .tjeneste-kort h2 { margin-bottom: 0.6rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.tjeneste-kort p { font-size: 0.98rem; margin-bottom: 1rem; }

/* ---------- 9. Seksjon-hoder ---------- */
.hode { max-width: 640px; margin-bottom: 0.5rem; }
.hode.midt { margin-inline: auto; }

/* Vekslende bånd */
.band-skog { background: var(--skog); color: var(--krem); }
.band-skog h1, .band-skog h2, .band-skog h3 { color: var(--krem); }
.band-skog p { color: rgba(246,240,230,0.82); }
.band-skog .eyebrow { color: var(--tre-lys); }
.band-skog .eyebrow::before { background: var(--tre-lys); }
.band-krem-dyp { background: var(--krem-dyp); }

/* ---------- 10. "Slik jobber vi" steg ---------- */
.steg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.6rem; margin-top: 3rem; counter-reset: steg; }
.steg { position: relative; padding-top: 1rem; }
.steg__nr {
  font-family: var(--font-display); font-size: 3rem; color: var(--tre-lys);
  line-height: 1; display: block; margin-bottom: 0.5rem; opacity: 0.9;
}
.steg h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.steg p { font-size: 0.96rem; }

/* ---------- 11. Prosjekter / galleri ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.filter__btn {
  background: var(--hvit); border: 1px solid var(--linje);
  padding: 0.6rem 1.2rem; border-radius: 100px;
  font-weight: 700; font-size: 0.9rem; color: var(--kull-myk);
  transition: all 0.2s ease;
}
.filter__btn:hover { border-color: var(--tre); color: var(--tre-mork); }
.filter__btn[aria-pressed="true"] { background: var(--skog); color: var(--krem); border-color: var(--skog); }

.galleri {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem; margin-top: 2.2rem;
}
.prosjekt {
  border-radius: var(--radius); overflow: hidden; background: var(--hvit);
  border: 1px solid var(--linje); box-shadow: var(--skygge-myk);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.4s ease;
}
.prosjekt.skjult { display: none; }
.prosjekt:hover { transform: translateY(-6px); box-shadow: var(--skygge); }
.prosjekt__bilde { aspect-ratio: 3 / 2; position: relative; }
.prosjekt__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(43,38,34,0.62); color: #fff; backdrop-filter: blur(4px);
  font-size: 0.74rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 100px;
}
.prosjekt__innhold { padding: 1.3rem 1.4rem 1.5rem; }
.prosjekt__innhold h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.prosjekt__innhold p { font-size: 0.92rem; margin-bottom: 0.8rem; }
.prosjekt__sted { font-size: 0.82rem; font-weight: 700; color: var(--tre-mork); display: inline-flex; align-items: center; gap: 0.35rem; }

/* Prosjektkort der hele bildet er en lenke til prosjektsiden */
.prosjekt > a { display: block; }
.prosjekt__innhold h3 a { transition: color 0.2s ease; }
.prosjekt__innhold h3 a:hover { color: var(--tre-mork); }

/* Før/etter */
.foretter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative;
}
.foretter > div { aspect-ratio: 3/2; position: relative; }
.foretter__merk {
  position: absolute; bottom: 10px; left: 10px; z-index:2;
  background: rgba(0,0,0,0.4); color:#fff; font-size:0.72rem; font-weight:700;
  padding: 0.25rem 0.7rem; border-radius:100px;
}

/* ---------- 12. Anmeldelser ---------- */
.anmeldelse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.5rem; margin-top: 3rem; }
.anmeldelse {
  background: var(--hvit); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 2rem 1.9rem; position: relative;
  box-shadow: var(--skygge-myk);
}
.anmeldelse__sitat { font-family: var(--font-display); font-size: 3.5rem; color: var(--tre-lys); line-height: 0.6; height: 1.2rem; display: block; }
.anmeldelse .stjerner { font-size: 1rem; margin-bottom: 0.8rem; display: block; }
.anmeldelse p { color: var(--kull); font-size: 1.02rem; margin-bottom: 1.3rem; font-style: italic; }
.anmeldelse__person { display: flex; align-items: center; gap: 0.8rem; }
.anmeldelse__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, var(--tre-lys), var(--tre-mork));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-display);
}
.anmeldelse__navn { font-weight: 800; color: var(--skog-dyp); line-height: 1.2; }
.anmeldelse__meta { font-size: 0.82rem; color: var(--tekst-svak); }

/* Review-widget plassholder */
.widget-boks {
  margin-top: 3rem; background: var(--hvit); border: 2px dashed rgba(176,122,78,0.5);
  border-radius: var(--radius-stor); padding: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 2rem; grid-template-columns: 1.1fr 1fr; align-items: center;
}
.widget-boks__merk { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tre-mork); }
@media (max-width: 760px){ .widget-boks { grid-template-columns: 1fr; } }

/* Stjernevelger i skjema */
.stjernevelg { display: inline-flex; flex-direction: row-reverse; gap: 0.2rem; }
.stjernevelg input { position: absolute; opacity: 0; width: 0; }
.stjernevelg label { font-size: 2rem; color: var(--sand); cursor: pointer; transition: color 0.15s ease; line-height: 1; }
.stjernevelg label:hover, .stjernevelg label:hover ~ label,
.stjernevelg input:checked ~ label { color: var(--gull); }

/* ---------- 13. Skjema ---------- */
.skjema { display: grid; gap: 1.2rem; }
.felt { display: flex; flex-direction: column; gap: 0.4rem; }
.felt.bred { grid-column: 1 / -1; }
.skjema__rad { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px){ .skjema__rad { grid-template-columns: 1fr; } }
.felt label { font-weight: 700; font-size: 0.92rem; color: var(--skog-dyp); }
.felt label .pakr { color: var(--tre-mork); }
.felt input, .felt select, .felt textarea {
  font-family: inherit; font-size: 1rem; color: var(--kull);
  background: var(--hvit); border: 1.5px solid var(--linje);
  border-radius: 11px; padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.felt textarea { resize: vertical; min-height: 140px; }
.felt input:focus, .felt select:focus, .felt textarea:focus {
  outline: none; border-color: var(--tre); box-shadow: 0 0 0 4px rgba(176,122,78,0.16);
}
.felt .feil { color: #a8392b; font-size: 0.82rem; font-weight: 600; display: none; }
.felt.har-feil input, .felt.har-feil select, .felt.har-feil textarea { border-color: #a8392b; }
.felt.har-feil .feil { display: block; }
.skjema__samtykke { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }
.skjema__samtykke input { width: auto; margin-top: 0.25rem; }
.skjema__ok {
  display: none; background: rgba(47,71,52,0.1); border: 1px solid var(--skog-lys);
  color: var(--skog-dyp); padding: 1rem 1.2rem; border-radius: 12px; font-weight: 600;
}
.skjema__ok.vis { display: block; }

/* Kontakt-layout */
.kontakt-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (max-width: 860px){ .kontakt-grid { grid-template-columns: 1fr; } }
.kontaktkort { background: var(--hvit); border: 1px solid var(--linje); border-radius: var(--radius); padding: 2rem; box-shadow: var(--skygge-myk); }
.kontaktkort + .kontaktkort { margin-top: 1.2rem; }
.kontaktlinje { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.7rem 0; }
.kontaktlinje svg { width: 22px; height: 22px; color: var(--tre); flex-shrink: 0; margin-top: 2px; }
.kontaktlinje b { display: block; color: var(--skog-dyp); }
.kontaktlinje a, .kontaktlinje span { color: var(--tekst-svak); }
.kontaktlinje a:hover { color: var(--tre-mork); }

/* ---------- 14. CTA-bånd ---------- */
.cta-band {
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(176,122,78,0.3), transparent 60%),
    var(--skog-dyp);
  color: var(--krem); border-radius: var(--radius-stor);
  padding: clamp(2.5rem, 5vw, 4.5rem); text-align: center;
  position: relative; overflow: hidden;
}
.cta-band h2 { color: var(--krem); margin-bottom: 1rem; }
.cta-band p { color: rgba(246,240,230,0.85); max-width: 50ch; margin: 0 auto 2rem; }
.cta-band .hero__knapper { justify-content: center; margin-bottom: 0; }

/* ---------- 15. Statistikk / tillit ---------- */
.statrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1.5rem; margin-top: 3rem; text-align: center; }
.stat b { font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3rem); color: var(--tre-mork); display: block; line-height: 1; }
.band-skog .stat b { color: var(--tre-lys); }
.stat span { font-size: 0.9rem; font-weight: 600; color: var(--tekst-svak); }
.band-skog .stat span { color: rgba(246,240,230,0.8); }

/* ---------- 16. Om-side split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split--omvendt .split__bilde { order: -1; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split--omvendt .split__bilde { order: 0; } }
.split__bilde { border-radius: var(--radius-stor); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--skygge); }
/* Ekte foto: bildet definerer sin egen høyde via egen aspect-ratio (width × 3/4),
   slik at det aldri arver en udefinert høyde og blir klippet til kun taket.
   object-fit/position holder motivet (garasjen/huset) sentrert og helt synlig. */
.split__bilde img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
/* Kvadratiske kildebilder: både rammen og bildet settes til 1/1, slik at hele
   bildet brukes. Med 4/3-rammen ville ~25 % av høyden blitt beskåret bort, og
   det har disse lavoppløste bildene ikke piksler å avse til. */
.split__bilde--kvadrat { aspect-ratio: 1 / 1; }
.split__bilde--kvadrat img { aspect-ratio: 1 / 1; }

/* Ekte foto i øvrige bilderammer – samme selvsizing-prinsipp (bildet definerer
   egen høyde via width × aspect-ratio, aldri height:100% mot udefinert høyde). */
.hero__bilde-stor img,
.hero__bilde-liten img,
.prosjekt__bilde img,
.foretter > div img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.hero__bilde-stor img { aspect-ratio: 4 / 5; }
.hero__bilde-liten img { aspect-ratio: 1; }
.prosjekt__bilde img,
.foretter > div img { aspect-ratio: 3 / 2; }
.sjekkliste { display: grid; gap: 0.9rem; margin-top: 1.5rem; }
/* Ikonet er absolutt plassert framfor å være et flex-element. Med flex blir hver
   sammenhengende tekstbit et eget anonymt flex-element, og en ledende <strong>
   havner i sin egen smale spalte. Med block + padding flyter teksten normalt. */
.sjekkliste li {
  position: relative; display: block; padding-left: 1.85rem;
  font-weight: 600; color: var(--kull);
}
.sjekkliste svg {
  position: absolute; left: 0; top: 0.28em;
  width: 22px; height: 22px; color: var(--skog-lys); flex-shrink: 0;
}

/* ---------- 17. Sidehode (under-sider) ---------- */
.sidehode {
  background:
    radial-gradient(900px 400px at 90% -20%, rgba(176,122,78,0.16), transparent 60%),
    var(--krem-dyp);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.brodsmule { font-size: 0.85rem; color: var(--tekst-svak); margin-bottom: 1rem; font-weight: 600; }
.brodsmule a:hover { color: var(--tre-mork); }
.sidehode h1 { margin-bottom: 1rem; }

/* ---------- 18. FAQ ---------- */
.faq { max-width: 800px; margin: 3rem auto 0; }
.faq details {
  border-bottom: 1px solid var(--linje); padding: 0.4rem 0;
}
.faq summary {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--skog-dyp);
  padding: 1.1rem 2.5rem 1.1rem 0; cursor: pointer; position: relative; list-style: none;
  font-weight: 560;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--tre); transition: transform 0.25s ease; line-height: 1;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1.2rem; }

/* ---------- 19. Footer ---------- */
.footer { background: var(--skog-dyp); color: rgba(246,240,230,0.78); padding-block: clamp(3rem,5vw,4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 820px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px){ .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: var(--krem); font-size: 1.05rem; margin-bottom: 1.1rem; font-family: var(--font-brod); font-weight: 800; letter-spacing: 0.02em; }
.footer a { color: rgba(246,240,230,0.78); transition: color 0.2s ease; }
.footer a:hover { color: var(--tre-lys); }
.footer li { padding: 0.32rem 0; }
.footer .logo__bilde { height: 64px; }
.footer__intro p { color: rgba(246,240,230,0.7); margin-top: 1rem; font-size: 0.95rem; max-width: 34ch; }
.footer__sosial { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.footer__sosial a {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(246,240,230,0.1);
  display: grid; place-items: center; transition: background 0.2s ease, transform 0.2s ease;
}
.footer__sosial a:hover { background: var(--tre); transform: translateY(-3px); }
.footer__sosial svg { width: 19px; height: 19px; }
.footer__bunn {
  border-top: 1px solid rgba(246,240,230,0.14); margin-top: 3rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.85rem; color: rgba(246,240,230,0.6);
}

/* ---------- 20. Scroll-reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.inn { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ---------- 21. Diverse ---------- */
.merkerad { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; align-items: center; margin-top: 2.5rem; opacity: 0.85; text-align: center; }
.merkerad span { font-weight: 800; color: var(--skog); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.merkerad svg { width: 20px; height: 20px; color: var(--tre); }

.note { font-size: 0.8rem; color: var(--tekst-svak); font-style: italic; }
.band-skog .note { color: rgba(246, 240, 230, 0.75); }

/* ---------- 24. FAQ (details/summary – ingen JS) ---------- */
.faq { display: grid; gap: 0.8rem; margin-top: 2rem; }
.faq details {
  background: var(--hvit); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 0 1.4rem; transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--tre-lys); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--skog-dyp);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--tre-mork); transition: transform 0.25s ease; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.25rem; color: var(--tekst-svak); }
.faq summary:focus-visible { outline: 3px solid var(--tre); outline-offset: 3px; border-radius: 6px; }

/* Service-side: lokal info-rute */
.tjeneste-intro { max-width: var(--maks-tekst); }
.relatert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.2rem; margin-top: 2.5rem; }

/* ---------- 25. Tjenester-undermeny (dropdown) ---------- */
.nav__drop-wrap { position: relative; }
.nav__drop-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__chev { transition: transform 0.25s ease; flex-shrink: 0; }

/* Desktop: hover/fokus åpner panel */
@media (min-width: 921px) {
  .nav__submenu {
    position: absolute; top: 100%; left: 0; min-width: 250px;
    background: var(--hvit); border: 1px solid var(--linje); border-radius: 14px;
    box-shadow: var(--skygge); padding: 0.5rem;
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 200;
  }
  .nav__drop-wrap:hover > .nav__submenu,
  .nav__drop-wrap:focus-within > .nav__submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav__drop-wrap:hover .nav__chev,
  .nav__drop-wrap:focus-within .nav__chev { transform: rotate(180deg); }
  .nav__submenu a {
    display: block; padding: 0.62rem 0.9rem; border-radius: 9px;
    font-size: 0.95rem; font-weight: 600; white-space: nowrap; color: var(--kull);
  }
  .nav__submenu a:hover { background: var(--krem-dyp); color: var(--skog-dyp); }
  .nav__submenu-all { color: var(--tre-mork) !important; border-top: 1px solid var(--linje); margin-top: 2px; border-radius: 0 0 9px 9px; }
}

/* Mobil: tapp for å folde ut undermeny inne i slide-menyen */
@media (max-width: 920px) {
  .nav__submenu { display: none; padding-left: 0.9rem; }
  .nav__drop-wrap.open .nav__submenu { display: block; }
  .nav__drop-wrap.open .nav__chev { transform: rotate(180deg); }
  .nav__submenu a { font-size: 1.04rem; }
}

/* ---------- 22. Rekruttering / jobb ---------- */
/* Markert nav-lenke for ledig stilling */
.nav a.nav--jobb { color: var(--tre-mork); font-weight: 800; }
.nav a.nav--jobb::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #3aa564; margin-right: 0.4rem; display: inline-block; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(58,165,100,0.5); animation: jobbpuls 2.4s infinite;
}
@keyframes jobbpuls { 0%{box-shadow:0 0 0 0 rgba(58,165,100,0.5);} 70%{box-shadow:0 0 0 7px rgba(58,165,100,0);} 100%{box-shadow:0 0 0 0 rgba(58,165,100,0);} }
@media (prefers-reduced-motion: reduce){ .nav a.nav--jobb::before { animation: none; } }

/* Teaser-banner på forsiden */
.jobb-teaser {
  background: linear-gradient(135deg, var(--tre-mork), var(--tre));
  color: #fff; border-radius: var(--radius-stor);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
  box-shadow: 0 24px 50px -22px rgba(138,90,54,0.7); overflow: hidden; position: relative;
}
.jobb-teaser__merke {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem;
  background: rgba(255,255,255,0.16); padding: 0.4rem 0.95rem; border-radius: 50px;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.jobb-teaser__merke b { width: 9px; height: 9px; border-radius: 50%; background: #7ff0a9; }
.jobb-teaser h2 { color: #fff; margin-bottom: 0.8rem; }
.jobb-teaser p { color: rgba(255,255,255,0.92); margin-bottom: 1.6rem; max-width: 52ch; }
.jobb-teaser .btn-primar { background: #fff; color: var(--tre-mork); }
.jobb-teaser .btn-primar:hover { background: var(--krem); }
.jobb-teaser__visual { display: flex; justify-content: center; }
.jobb-teaser__visual svg { width: clamp(96px, 14vw, 160px); height: auto; color: rgba(255,255,255,0.85); }
@media (max-width: 820px){ .jobb-teaser { grid-template-columns: 1fr; text-align: center; } .jobb-teaser p { margin-inline: auto; } .jobb-teaser__visual { order: -1; } }

/* Jobb-side: fordeler / fakta */
.jobb-fakta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1rem;
  margin: 2rem 0; padding: 0; list-style: none;
}
.jobb-fakta li {
  background: var(--krem); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.jobb-fakta b { display: block; color: var(--tre-mork); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.3rem; }
.jobb-fakta span { font-weight: 700; color: var(--kull); }
.band-skog .jobb-fakta li { background: rgba(255,255,255,0.06); border-color: rgba(246,240,230,0.18); }
.band-skog .jobb-fakta b { color: var(--tre-lys); }
.band-skog .jobb-fakta span { color: var(--krem); }

/* =========================================================================
   23. Responsiv finpuss & touch-optimalisering
   Mobil → iPad → laptop → ultrabred. Treffmål, ren tekstflyt og berøring.
   ========================================================================= */

/* Sticky-header-offset for ankerlenker (#anmeldelser, #sok, #nybygg …) */
html { scroll-padding-top: 96px; }

/* Premium tekstflyt – unngå enslige ord og stygge linjebrudd */
h1, h2, h3, h4 { text-wrap: balance; }
p, .lede, .hero__lede, blockquote { text-wrap: pretty; }

/* Fjern grå tap-blink og 300 ms klikkforsinkelse på berøringsskjermer */
a, button, .btn, .filter__btn, input, select, textarea, label,
.logo, .lenke-pil, .stjernevelg label, .footer__sosial a {
  -webkit-tap-highlight-color: transparent;
}
.btn, .filter__btn, .burger, .nav a, .lenke-pil,
.stjernevelg label, .footer__sosial a, .tlf-lenke { touch-action: manipulation; }

/* Berøringsvennlige treffmål (min. 48×48 px) på touch-enheter */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .filter__btn { min-height: 46px; display: inline-flex; align-items: center; }
  .stjernevelg { gap: 0.35rem; }
  .stjernevelg label { padding: 0.3rem 0.2rem; }          /* ~48 px høyt treffmål */
  .footer__sosial a { width: 48px; height: 48px; }
  .lenke-pil { padding-block: 0.4rem; }
  .felt input, .felt select, .felt textarea { padding: 0.95rem 1rem; }  /* lettere å tappe */
}

/* iPad / nettbrett (portrett + mindre landskap): galleri og kort i 2 kolonner */
@media (min-width: 641px) and (max-width: 1024px) {
  .galleri { grid-template-columns: repeat(2, 1fr); }
  .tjeneste-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobilmeny ≤ 920 px: berøringsvennlige lenker + tydelig telefon-knapp */
@media (max-width: 920px) {
  .nav a { min-height: 48px; display: flex; align-items: center; }
  .topp__cta .tlf-lenke {
    width: 48px; height: 48px; justify-content: center;
    border-radius: 12px; background: rgba(47,71,52,0.08);
  }
  .topp__cta .tlf-lenke svg { width: 20px; height: 20px; }
}

/* Små mobiler ≤ 520 px: stabel knappene i full bredde for enkel tommel-navigasjon */
@media (max-width: 520px) {
  .hero__knapper { flex-direction: column; align-items: stretch; }
  .hero__knapper .btn,
  .sidehode .btn,
  .cta-band .btn { width: 100%; justify-content: center; }
}

/* Ultrabrede skjermer: hold innholdet sentrert og luftig, ikke utstrukket */
@media (min-width: 1600px) {
  :root { --maks: 1280px; }
}


/* =========================================================================
   26. Informasjonskapsler – samtykkebanner
   Kremhvitt kort som glir opp nederst. Samme palett, radier og skygger
   som resten av nettstedet. Markup og logikk: js/samtykke.js
   ========================================================================= */
.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.6rem);
  pointer-events: none;               /* siden er fortsatt klikkbar rundt kortet */
}

.cookie__kort {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  width: min(100%, 600px);
  background: var(--hvit);
  border: 1px solid var(--linje);
  border-radius: var(--radius-stor);
  box-shadow: var(--skygge);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  transform: translateY(130%);
  opacity: 0;
  visibility: hidden;                 /* helt inert for mus og skjermleser når skjult */
  transition: transform 0.65s cubic-bezier(.2,.7,.2,1), opacity 0.45s ease,
              visibility 0s linear 0.65s;
}
.cookie.vis .cookie__kort {
  transform: none; opacity: 1; visibility: visible;
  transition: transform 0.65s cubic-bezier(.2,.7,.2,1), opacity 0.45s ease;
}

/* Varm hårfin stripe i toppen – skog → tre → gull */
.cookie__kort::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--skog) 0%, var(--tre) 55%, var(--gull) 100%);
}

.cookie__hode { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; }
.cookie__mark {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--skog); color: var(--tre-lys);
  display: grid; place-items: center;
  box-shadow: var(--skygge-myk);
}
.cookie__mark svg { width: 21px; height: 21px; }
.cookie__tittel {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--skog-dyp);
}
.cookie__tekst { font-size: 0.93rem; line-height: 1.6; color: var(--tekst-svak); }
.cookie__tekst a {
  color: var(--tre-mork); font-weight: 700;
  border-bottom: 1.5px solid rgba(176,122,78,0.4);
  transition: border-color 0.2s ease;
}
.cookie__tekst a:hover { border-color: var(--tre); }

/* ---- Knapperad ---- */
.cookie__knapper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  margin-top: 1.25rem;
}
.cookie__knapper .btn { padding: 0.8rem 1.5rem; font-size: 0.95rem; }
.cookie__tilpass {
  background: none; border: 0; padding: 0.5rem 0.2rem;
  margin-inline-start: auto;
  font-weight: 700; font-size: 0.88rem; color: var(--tekst-svak);
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s ease;
}
.cookie__tilpass:hover { color: var(--skog-dyp); }
.cookie__tilpass svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.cookie__tilpass[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- Valgpanel ---- */
.cookie__valg {
  display: grid; gap: 0.55rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
}
.cookie__valg[hidden] { display: none; }
.cookie__rad {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--krem);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.cookie__rad b { display: block; font-size: 0.92rem; color: var(--skog-dyp); font-weight: 800; }
.cookie__rad span { display: block; font-size: 0.83rem; line-height: 1.5; color: var(--tekst-svak); }

/* Bryter (checkbox stylet som skyvebryter) */
.cookie__bryter { position: relative; flex-shrink: 0; margin-top: 0.15rem; }
.cookie__bryter input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.cookie__bryter i {
  display: block; width: 46px; height: 26px; border-radius: 100px;
  background: rgba(43, 38, 34, 0.2);
  transition: background 0.25s ease;
}
.cookie__bryter i::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--hvit); box-shadow: 0 2px 5px rgba(43,38,34,0.3);
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.cookie__bryter input:checked ~ i { background: var(--skog); }
.cookie__bryter input:checked ~ i::after { transform: translateX(20px); }
.cookie__bryter input:focus-visible ~ i { outline: 3px solid var(--tre); outline-offset: 3px; }
.cookie__bryter input:disabled { cursor: default; }
.cookie__bryter input:disabled ~ i { background: var(--skog-lys); opacity: 0.55; }

/* Lenke i footeren for å endre valget i etterkant */
.cookie-lenke {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.cookie-lenke:hover { color: var(--tre-lys); }

/* ---- Mobil ---- */
@media (max-width: 560px) {
  .cookie { padding: 0.6rem; }
  .cookie__kort { border-radius: var(--radius); }
  .cookie__knapper .btn { width: 100%; }
  .cookie__tilpass { margin-inline-start: 0; width: 100%; justify-content: center; }
}

/* =========================================================================
   27. Prosjekt-case (oversikt + undersider under /prosjekter/)
   ========================================================================= */
.sak-hero {
  border-radius: var(--radius-stor); overflow: hidden;
  box-shadow: var(--skygge); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sak-hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center;
}
@media (min-width: 900px) { .sak-hero img { aspect-ratio: 2 / 1; } }

.sak-grid {
  display: grid; grid-template-columns: 1.4fr 0.75fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: start;
}
@media (max-width: 900px) { .sak-grid { grid-template-columns: 1fr; } }
.sak-tekst > * + * { margin-top: 1.1rem; }
.sak-tekst h2 { margin-top: 2.2rem; }

.sak-fakta {
  background: var(--hvit); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 1.7rem 1.6rem;
  box-shadow: var(--skygge-myk);
}
@media (min-width: 901px) { .sak-fakta { position: sticky; top: 104px; } }
.sak-fakta h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.sak-fakta dl { display: grid; gap: 0.95rem; margin-top: 1.2rem; }
.sak-fakta dt {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tekst-svak);
}
.sak-fakta dd { font-weight: 700; color: var(--skog-dyp); font-size: 0.98rem; }
.sak-fakta .btn { width: 100%; justify-content: center; margin-top: 1.5rem; }

.sak-bilder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.3rem; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.sak-bilder figure {
  border-radius: var(--radius); overflow: hidden; background: var(--hvit);
  border: 1px solid var(--linje); box-shadow: var(--skygge-myk);
}
.sak-bilder img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center;
}
.sak-bilder figcaption {
  padding: 0.85rem 1.1rem 1.1rem; font-size: 0.88rem; color: var(--tekst-svak);
}
.sak-bilder figure.bred { grid-column: 1 / -1; }
.sak-bilder figure.bred img { aspect-ratio: 2 / 1; }

/* Neste/forrige prosjekt */
.sak-naviger {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem; margin-top: 3rem;
}
.sak-naviger a {
  display: block; padding: 1.3rem 1.5rem; background: var(--hvit);
  border: 1px solid var(--linje); border-radius: var(--radius);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.sak-naviger a:hover { border-color: var(--tre); transform: translateY(-3px); }
.sak-naviger span {
  display: block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tekst-svak); margin-bottom: 0.3rem;
}
.sak-naviger b { font-family: var(--font-display); font-size: 1.1rem; color: var(--skog-dyp); }

/* =========================================================================
   28. Prosessløfter – konkrete frister (befaring, tilbud, oppstart)
   ========================================================================= */
.lofte-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.3rem; margin-top: 2.4rem;
}
.lofte {
  background: var(--hvit); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 1.7rem 1.6rem;
  box-shadow: var(--skygge-myk);
}
.lofte b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; color: var(--tre-mork);
}
.lofte b small { font-size: 0.42em; font-family: var(--font-brod); font-weight: 800; letter-spacing: 0.04em; }
.lofte h3 { font-size: 1.05rem; margin: 0.7rem 0 0.4rem; }
.lofte p { font-size: 0.93rem; color: var(--tekst-svak); }
.band-skog .lofte { background: rgba(246, 240, 230, 0.07); border-color: rgba(246, 240, 230, 0.18); }
.band-skog .lofte b { color: var(--tre-lys); }
.band-skog .lofte h3 { color: var(--krem); }
.band-skog .lofte p { color: rgba(246, 240, 230, 0.82); }
.lofte-fotnote { margin-top: 1.6rem; font-size: 0.92rem; color: var(--tekst-svak); }
.band-skog .lofte-fotnote { color: rgba(246, 240, 230, 0.8); }

/* Svartid-merke rett ved skjemaet */
.svartid {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--krem-dyp); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1.7rem;
}
.svartid svg { width: 22px; height: 22px; color: var(--skog-lys); flex-shrink: 0; margin-top: 2px; }
.svartid p { font-size: 0.93rem; margin: 0; color: var(--kull); }
.svartid b { color: var(--skog-dyp); }

/* Feilmelding når skjemainnsending ikke går gjennom */
.skjema__feil {
  display: none; background: #fbeae7; border: 1px solid #e2a79c;
  color: #8a2d1c; border-radius: var(--radius); padding: 1rem 1.2rem;
  font-size: 0.93rem; font-weight: 600;
}
.skjema__feil.vis { display: block; }
.skjema__feil a { text-decoration: underline; color: inherit; }

/* =========================================================================
   29. Guideinnhold – innholdsfortegnelse, pristabell, faktaboks, kilder
   Brukes av guide-*.html (bygges av scripts/bygg-guider.py)
   ========================================================================= */

/* -------- Guidesidens ramme: tekst til venstre, klebrig kolonne til høyre ----- */
.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--maks-tekst)) 258px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  /* Sidekolonnen legger seg mot høyre kant av wrap-en, slik at teksten står i
     flukt med h1-en over og siden ikke blir venstretung. */
  justify-content: space-between;
  align-items: start;
}
.guide-tekst {
  grid-column: 1; grid-row: 1;
  min-width: 0; max-width: var(--maks-tekst);
  counter-reset: guideseksjon;
}
.guide-side {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 6.4rem;
  display: grid; gap: 1.6rem;
}

/* Under 1080 px faller kolonnen ned og legger seg over teksten. */
@media (max-width: 1080px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .guide-tekst { grid-column: 1; grid-row: 2; }
  .guide-side { grid-column: 1; grid-row: 1; position: static; margin-bottom: 2.8rem; }
}

/* -------- Lesbarhet i selve artikkelen -------------------------------------- */
.guide-tekst > * + * { margin-top: 1.45rem; }
.guide-tekst p { line-height: 1.82; }
.guide-tekst > p:first-of-type { font-size: 1.07em; color: var(--kull); }

/* Nummererte seksjoner med hårstrek over. Nummeret kommer fra samme teller som
   innholdsfortegnelsen, slik at «03» i margen og «3.» i lista alltid stemmer. */
.guide-tekst > h2 {
  counter-increment: guideseksjon;
  font-size: clamp(1.62rem, 2.3vw, 2.05rem);
  line-height: 1.16;
  margin-top: clamp(3.2rem, 5.5vw, 4.6rem);
  padding-top: 2.4rem;
  border-top: 1px solid var(--linje);
  text-wrap: balance;
}
.guide-tekst > h2::before {
  content: counter(guideseksjon, decimal-leading-zero);
  display: block;
  font-family: var(--font-brod);
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--tre-mork);
  margin-bottom: 0.7rem;
}
.guide-tekst > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-tekst > h3 {
  font-size: clamp(1.18rem, 1.6vw, 1.4rem);
  margin-top: 2.7rem;
}
.guide-tekst > h2 + *, .guide-tekst > h3 + * { margin-top: 1.05rem; }
/* Så overskriften ikke havner under den klebrige toppmenyen ved hopp fra lista. */
.guide-tekst > h2, .guide-tekst > h3 { scroll-margin-top: 6.5rem; }

/* Innskutte elementer skal ha luft rundt seg, ikke klistre seg til brødteksten. */
.guide-tekst > .faktaboks,
.guide-tekst > .tabell-rull,
.guide-tekst > .sjekkliste,
.guide-tekst > .steder,
.guide-tekst > .faq { margin-top: 2.1rem; margin-bottom: 2.1rem; }
.guide-tekst > .note { margin-top: 2.4rem; }
.guide-tekst .sjekkliste { gap: 1.15rem; }

/* -------- Innholdsfortegnelse ----------------------------------------------- */
.guide-toc { margin: 0; }
.guide-toc h2 {
  font-family: var(--font-brod);
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tre-mork);
  margin: 0 0 1rem;
}
.guide-toc ol {
  margin: 0; padding: 0 0 0 1.1rem; list-style: none;
  counter-reset: toc; border-left: 2px solid var(--linje);
}
.guide-toc li { counter-increment: toc; position: relative; }
.guide-toc a {
  display: block; padding: 0.42rem 0;
  font-size: 0.92rem; font-weight: 600; line-height: 1.4;
  color: var(--tekst-svak);
  transition: color 0.2s ease;
}
.guide-toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 0.55rem; font-size: 0.74rem; font-weight: 800;
  color: var(--tre-lys); letter-spacing: 0.06em;
}
.guide-toc a:hover { color: var(--skog-dyp); }
/* Markøren i venstremargen viser hvor i guiden leseren står. */
.guide-toc a[aria-current="true"] { color: var(--skog-dyp); font-weight: 800; }
.guide-toc a[aria-current="true"]::after {
  content: ""; position: absolute; left: calc(-1.1rem - 2px); top: 0.42rem; bottom: 0.42rem;
  width: 2px; background: var(--tre); border-radius: 2px;
}
.guide-toc a[aria-current="true"]::before { color: var(--tre-mork); }

/* På mobil er lista en boks over teksten i stedet for en kolonne ved siden av. */
@media (max-width: 1080px) {
  .guide-toc {
    background: var(--krem-dyp); border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
  }
  .guide-toc ol { border-left: 0; padding-left: 0; }
  .guide-toc a[aria-current="true"]::after { display: none; }
}

/* -------- Liten tilbudsboks i sidekolonnen ---------------------------------- */
.guide-cta {
  background: var(--skog-dyp); color: var(--krem);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
}
.guide-cta b {
  display: block; font-family: var(--font-display);
  font-size: 1.15rem; color: var(--krem); margin-bottom: 0.5rem; line-height: 1.2;
}
.guide-cta p { font-size: 0.88rem; color: rgba(246, 240, 230, 0.78); margin-bottom: 1.1rem; }
.guide-cta .btn { width: 100%; justify-content: center; }
.guide-cta__tlf {
  display: block; text-align: center; margin-top: 0.8rem;
  font-size: 0.9rem; font-weight: 700; color: var(--tre-lys);
}
.guide-cta__tlf:hover { color: var(--krem); }
@media (max-width: 1080px) { .guide-cta { display: none; } }

/* Pristabeller. Rullerer vannrett på små skjermer i stedet for å sprenge siden. */
/* Skyggen i kanten viser at tabellen kan rulles sidelengs. Den forsvinner av seg
   selv når man har rullet helt ut, fordi de to første laget følger innholdet
   (background-attachment: local) og de to siste står stille. */
.tabell-rull {
  overflow-x: auto; margin: 1.8rem 0; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(246, 240, 230, 0)) left center,
    linear-gradient(to left, var(--bg) 30%, rgba(246, 240, 230, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(35, 54, 40, 0.16), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(35, 54, 40, 0.16), transparent) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.pristabell {
  width: 100%; min-width: 460px; border-collapse: collapse;
  background: var(--hvit); border: 1px solid var(--linje);
  border-radius: var(--radius); overflow: hidden;
  font-size: 0.95rem;
}
.pristabell caption {
  caption-side: bottom; text-align: left; padding-top: 0.9rem;
  font-size: 0.87rem; color: var(--tekst-svak);
}
.pristabell th, .pristabell td { padding: 0.85rem 1.1rem; text-align: left; vertical-align: top; }
.pristabell thead th {
  background: var(--skog-dyp); color: var(--krem);
  font-family: var(--font-brod); font-weight: 800;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.pristabell tbody tr + tr { border-top: 1px solid var(--linje); }
.pristabell tbody tr:nth-child(even) { background: rgba(236, 227, 212, 0.4); }
.pristabell tbody th { font-weight: 700; color: var(--skog-dyp); }
.pristabell td b, .pristabell tbody th b { color: var(--tre-mork); white-space: nowrap; }

/* Uthevet nøkkeltall / kort svar – det Google gjerne plukker som utdrag */
.faktaboks {
  background: var(--krem-dyp); border-left: 4px solid var(--tre);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.4rem 1.6rem; margin: 1.8rem 0;
}
.faktaboks p { margin: 0; }
.faktaboks p + p { margin-top: 0.7rem; }
.faktaboks b { color: var(--skog-dyp); }

/* Kildeliste nederst i en guide */
.kilder { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linje); }
.kilder h2 {
  font-family: var(--font-brod); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tre-mork);
  margin-bottom: 0.8rem;
}
.kilder ul { display: grid; gap: 0.4rem; }
.kilder li { font-size: 0.88rem; color: var(--tekst-svak); }
.kilder a { border-bottom: 1px solid var(--linje); }
.kilder a:hover { color: var(--tre-mork); border-bottom-color: var(--tre); }

/* Lokal dekningsliste – stedsnavn på Nesodden og i omegn */
.steder { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.steder li {
  background: var(--krem-dyp); border-radius: 100px;
  padding: 0.4rem 0.95rem; font-size: 0.87rem; font-weight: 600; color: var(--kull-myk);
}
.band-skog .steder li { background: rgba(246, 240, 230, 0.1); color: rgba(246, 240, 230, 0.9); }
/* På det dypere krembåndet er chip-fargen lik bakgrunnen, så pillene forsvinner.
   Lys dem opp med den lyse kremtonen i stedet. */
.band-krem-dyp .steder li { background: var(--krem); }

/* Lenkeblokk fra tjenesteside til de guidene som hører til */
.guide-lenker { display: grid; gap: 0.5rem; margin-top: 1.1rem; }