/* =========================================================================
   SVENSEN BE / DESIGNSYSTEM v3
   =========================================================================
   Retning hentet fra den eldre Svensen-siden: fullskjerms hero med
   transparent navigasjon, rolig normalbred grotesk (Hanken Grotesk),
   hvit pill-primærknapp + ghost-knapp med telefonnummer, sentrerte
   seksjonshoder, store bilder, tynne linjer og mye kontrollert luft.

   Én fontfamilie. Lys hovedflate. Mørkt kun i hero-overlay, brøyteseksjon,
   footer og enkelte prosjektøyeblikk. Blå beholdes som profilfarge.
   ========================================================================= */

/* ---------- 1. Designtokens ---------- */

:root {
  /* Lyse flater */
  --bg: #f8f9f6;
  --bg-ren: #fcfcf9;
  --bg-alt: #eff1ee;

  /* Mørke flater */
  --mork: #101719;
  --dypbla-mork: #0b3d55;

  /* Tekst */
  --tekst: #151b1d;
  --tekst-sek: #5e686b;
  --tekst-invers: #eef1ef;
  --tekst-invers-sek: #a8b1b4;

  /* Profilfarge */
  --bla: #00a9e8;
  --dypbla: #075174;
  --bla-lys-bunn: #0d6d94;

  /* Linjer */
  --linje: #e2e5e0;
  --linje-sterk: #c9cec8;
  --linje-mork: #263130;

  /* Én fontfamilie */
  --font: "Schibsted Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;              /* brødtekst 17px */
  --t-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --h1: clamp(2.375rem, 1.6rem + 3.9vw, 4.25rem);      /* 38 -> 68px */
  --h1-side: clamp(2.125rem, 1.6rem + 2.4vw, 3.375rem);
  --h2: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);      /* 30 -> 44px */
  --h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);

  /* Rytme */
  --seksjon: clamp(4rem, 3rem + 4.5vw, 6.5rem);        /* ca. 96px desktop */
  --gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  --container: 1160px;
  --container-bred: 1400px;
  --kant: clamp(1.25rem, 4vw, 3rem);

  /* Hjørner */
  --r-pill: 999px;
  --r-btn: 8px;
  --r-felt: 7px;
  --r-bilde: 14px;
  --r-bilde-stor: 16px;

  --banner-h: 52px;
}

/* ---------- 2. Basis ---------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--tekst);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.45em;
  color: var(--tekst);
  text-wrap: balance;
}
h1 { font-size: var(--h1); font-weight: 650; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }

p { margin: 0 0 1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--dypbla); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tekst); }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

::selection { background: var(--bla); color: var(--mork); }

:focus-visible {
  outline: 3px solid var(--dypbla);
  outline-offset: 3px;
  border-radius: 2px;
}
.theme-dark :focus-visible,
.hero :focus-visible,
.site-header--over:not(.er-scrollet) :focus-visible,
.site-footer :focus-visible,
.mobilbar :focus-visible { outline-color: var(--bla); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  background: var(--mork);
  color: var(--bg-ren);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--r-btn) 0;
}
.skip-link:focus-visible { left: 0; top: 0; color: var(--bg-ren); }

.container { width: min(100% - 2 * var(--kant), var(--container)); margin-inline: auto; }
.container--bred { width: min(100% - 2 * var(--kant), var(--container-bred)); }
.container--smal { width: min(100% - 2 * var(--kant), 46rem); }

.theme-dark { background: var(--mork); color: var(--tekst-invers); }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 { color: #fff; }
.theme-dark a { color: var(--bla); }
.theme-dark a:hover { color: #fff; }
.theme-blue { background: var(--dypbla-mork); }

/* ---------- 3. Typografiske detaljer ---------- */

/* Liten, rolig seksjonslabel. Brukes sparsomt, aldri med dekorlinje. */
.overtekst {
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: 0.01em;
  color: var(--tekst-sek);
  margin: 0 0 0.8rem;
}
.theme-dark .overtekst, .hero .overtekst { color: rgba(238, 241, 239, 0.85); }

.ingress {
  font-size: var(--t-l);
  line-height: 1.55;
  color: var(--tekst-sek);
  max-width: 54ch;
}
.theme-dark .ingress { color: var(--tekst-invers-sek); }

/* Sentrert seksjonshode, som referansen */
.sek-hode {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
}
.sek-hode p { margin: 0.8rem auto 0; color: var(--tekst-sek); }

.seksjon-hode { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.malestrek { height: 1px; background: var(--linje); border: 0; }

/* ---------- 4. Knapper og lenker ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }

/* Pill-form til hero og nav */
.btn--pill { border-radius: var(--r-pill); min-height: 52px; padding: 0.8rem 1.7rem; font-size: 1rem; }

.btn--primar { background: var(--tekst); color: #fff; }
.btn--primar:hover { background: var(--dypbla); color: #fff; }

.btn--mork { background: var(--tekst); color: #fff; }
.btn--mork:hover { background: var(--dypbla); color: #fff; }

.btn--ramme { background: transparent; color: var(--tekst); border-color: var(--linje-sterk); }
.btn--ramme:hover { border-color: var(--tekst); }

/* Hvit primær + ghost på mørk bunn (hero-stilen fra referansen) */
.btn--hvit { background: #fff; color: var(--tekst); }
.btn--hvit:hover { background: var(--bg-alt); color: var(--tekst); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.theme-dark .btn--primar,
.theme-blue .btn--primar { background: #fff; color: var(--tekst); }
.theme-dark .btn--primar:hover,
.theme-blue .btn--primar:hover { background: var(--bg-alt); color: var(--tekst); }
.theme-dark .btn--ramme,
.theme-blue .btn--ramme { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.theme-dark .btn--ramme:hover,
.theme-blue .btn--ramme:hover { border-color: #fff; }

/* Tekstlenke med pil */
.lenke-pil {
  font-weight: 600;
  font-size: var(--t-s);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dypbla);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.lenke-pil::after { content: "→"; transition: transform 160ms ease; }
.lenke-pil:hover { border-bottom-color: currentColor; }
.lenke-pil:hover::after { transform: translateX(3px); }
.theme-dark .lenke-pil, .hero .lenke-pil { color: var(--bla); }

/* ---------- 5. Sesongbanner ---------- */

.sesongbanner {
  background: var(--dypbla-mork);
  color: var(--tekst-invers);
  font-size: var(--t-m);
}
.sesongbanner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-height: var(--banner-h);
  padding-block: 0.5rem;
  text-align: center;
}
.sesongbanner p { margin: 0; max-width: none; line-height: 1.35; }
.sesongbanner strong { color: #fff; font-weight: 600; }
/* Liten snøindikator som gir banneret litt liv uten å ta plass */
.sesongbanner .snoflak {
  color: var(--bla);
  font-size: 1.05em;
  margin-right: 0.15rem;
  vertical-align: -0.05em;
}
.sesongbanner .banner-lenke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--tekst);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms ease;
}
.sesongbanner .banner-lenke::after { content: "→"; transition: transform 160ms ease; }
.sesongbanner .banner-lenke:hover { background: var(--bg-alt); color: var(--tekst); }
.sesongbanner .banner-lenke:hover::after { transform: translateX(3px); }
.sesongbanner .kun-desktop { display: none; }
@media (min-width: 700px) {
  .sesongbanner .kun-desktop { display: inline; }
  .sesongbanner .kun-mobil { display: none; }
}

/* ---------- 6. Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 252, 249, 0.94);
  border-bottom: 1px solid var(--linje);
  transition: background-color 250ms ease, border-color 250ms ease;
}
.site-header .container--bred {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}
.site-header .site-nav { grid-column: 2; }
.site-header .nav-handling { grid-column: 3; justify-self: end; }

/* Transparent variant over hero-videoen (forsiden og snekring) */
.site-header--over {
  background: transparent;
  border-bottom-color: transparent;
  margin-bottom: -76px;
}
.site-header--over .logo,
.site-header--over .site-nav > ul > li > a,
.site-header--over .meny-knapp { color: #fff; }
.site-header--over .logo b { color: var(--bla); }
.site-header--over .nav-handling .btn { background: #fff; color: var(--tekst); border-color: transparent; }
.site-header--over .nav-handling .btn:hover { background: var(--bg-alt); }

.site-header--over.er-scrollet,
.site-header--over.er-apen {
  background: rgba(252, 252, 249, 0.96);
  border-bottom-color: var(--linje);
}
.site-header--over.er-scrollet .logo,
.site-header--over.er-apen .logo,
.site-header--over.er-scrollet .site-nav > ul > li > a,
.site-header--over.er-apen .site-nav > ul > li > a,
.site-header--over.er-scrollet .meny-knapp,
.site-header--over.er-apen .meny-knapp { color: var(--tekst); }
.site-header--over.er-scrollet .logo b,
.site-header--over.er-apen .logo b { color: var(--dypbla); }
.site-header--over.er-scrollet .nav-handling .btn,
.site-header--over.er-apen .nav-handling .btn { background: var(--tekst); color: #fff; }

.logo {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tekst);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.15;
  padding-block: 0.5rem;
  justify-self: start;
}
.logo img { width: 34px; height: 34px; flex: none; }
.logo small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--tekst-sek);
  letter-spacing: 0.01em;
}
.site-header--over:not(.er-scrollet):not(.er-apen) .logo small { color: rgba(255, 255, 255, 0.85); }
/* Uten overlay trenger headerteksten egen skygge for å holde seg lesbar. */
.site-header--over:not(.er-scrollet):not(.er-apen) .logo,
.site-header--over:not(.er-scrollet):not(.er-apen) .site-nav > ul > li > a,
.site-header--over:not(.er-scrollet):not(.er-apen) .meny-knapp {
  text-shadow: 0 1px 2px rgba(10, 14, 16, 0.5), 0 2px 12px rgba(10, 14, 16, 0.4);
}
/* Plass til grafisk logo: bytt innholdet i .logo med
   <img src="/assets/images/logo.svg" alt="Svensen Anlegg" width="150" height="40"> */

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.6rem + 1.4vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav > ul > li > a {
  font-weight: 500;
  font-size: var(--t-s);
  text-decoration: none;
  color: var(--tekst);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.site-nav > ul > li > a:hover { border-bottom-color: currentColor; }
.site-nav > ul > li > a[aria-current="page"] { border-bottom-color: var(--bla); }

.nav-handling { display: flex; align-items: center; gap: 0.75rem; }
.site-nav .nav-mobil-handling { display: none; }
.nav-handling .btn {
  background: var(--tekst);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 0.55rem 1.25rem;
  min-height: 42px;
  font-size: 0.9rem;
}
.nav-handling .btn:hover { background: var(--dypbla); color: #fff; }

.meny-knapp {
  display: none;
  background: none;
  border: 0;
  color: var(--tekst);
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--t-s);
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0;
  min-height: 48px;
  cursor: pointer;
}
.meny-knapp .strek {
  width: 20px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  display: block;
}
.meny-knapp .strek::before,
.meny-knapp .strek::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}
.meny-knapp .strek::before { top: -6px; }
.meny-knapp .strek::after { top: 6px; }

@media (max-width: 900px) {
  .site-header .container--bred {
    grid-template-columns: 1fr auto;
    min-height: 64px;
  }
  .site-header .nav-handling { display: none; }
  .site-header .site-nav { grid-column: 1 / -1; }
  .site-header--over { margin-bottom: -64px; }
  .meny-knapp { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-ren);
    border-bottom: 1px solid var(--linje);
    display: none;
  }
  .js .site-nav.er-apen { display: block; }
  .no-js .site-nav { display: block; position: static; border-bottom: 0; background: transparent; }
  .no-js .meny-knapp { display: none; }
  .site-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem var(--kant) 1.25rem;
  }
  .site-nav > ul > li:not(.nav-mobil-handling) > a {
    display: block;
    color: var(--tekst);
    font-size: 1.1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--linje);
  }
  .site-nav .nav-mobil-handling { display: grid; margin: 1rem 0 0; gap: 0.6rem; }
  .site-nav .nav-mobil-handling .btn { display: flex; width: 100%; min-height: 48px; }
  .no-js .site-header--over .site-nav > ul > li > a { color: #fff; border-color: rgba(255,255,255,0.25); }
}

/* ---------- 7. Hero (video, sentrert, som referansen) ---------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--mork);
  overflow: hidden;
}
.hero__media,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Handlingen i filmen ligger midt/høyre: behold høyresiden i mobilcrop */
@media (max-width: 700px) {
  .hero__media img, .hero__media video { object-position: 62% 50%; }
}
/* Ingen overlay. Filmen vises uberørt. Lesbarhet kommer fra tekstskygge. */

/* Tekstskygge holder hvit tekst lesbar over lyse klipp uten å legge
   en flate over filmen. Målt laveste klipp: 3.2:1 rent, skyggen løfter
   den lokale kontrasten rundt bokstavene. */
.hero__innhold {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--kant), 700px);
  margin-inline: auto;
  padding-block: clamp(7rem, 16vh, 9rem) clamp(3.5rem, 8vh, 5rem);
  text-shadow: 0 1px 2px rgba(10, 14, 16, 0.55), 0 2px 18px rgba(10, 14, 16, 0.45);
}
/* Knapper skal aldri arve hero-skyggen. Mørk skygge på hvit knapp ble
   til et glødende felt. */
.hero__knapper .btn, .hero__knapper .btn *,
.btn-rad .btn, .btn-rad .btn * { text-shadow: none; }
.hero__innhold h1 {
  color: #fff;
  margin-bottom: 0.4em;
}
.hero__innhold .overtekst { margin-bottom: 1rem; }
.hero__innhold .ingress {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 2rem;
}
.hero__knapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

/* Sidehero for undersider (lys, rolig) */
.side-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--linje);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.25rem);
}
.side-hero h1 { font-size: var(--h1-side); max-width: 20ch; }
.side-hero .ingress { color: var(--tekst-sek); }

/* Fotohero for snekkersiden (mørk, sentrert, samme logikk som video-heroen) */
.foto-hero {
  position: relative;
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--mork);
  overflow: hidden;
}
.foto-hero__media, .foto-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.foto-hero .hero__innhold { padding-block: clamp(7rem, 15vh, 9rem) clamp(3.5rem, 8vh, 5rem); }
.foto-hero h1 { color: #fff; }

/* ---------- 8. Seksjoner ---------- */

.seksjon { padding-block: var(--seksjon); }
.seksjon--s { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.seksjon--stein { background: var(--bg-alt); }
.seksjon--ren { background: var(--bg-ren); }

/* Tillitslinje: én rolig linje med subtile skiller */
.tillit { background: var(--bg-ren); border-bottom: 1px solid var(--linje); }
.tillit ul {
  list-style: none;
  margin: 0;
  padding: 0.95rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0;
  row-gap: 0.25rem;
}
.tillit li {
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--tekst-sek);
  padding: 0.15rem 1.4rem;
}
.tillit li + li { border-left: 1px solid var(--linje-sterk); }
@media (max-width: 700px) {
  .tillit ul { flex-direction: column; align-items: center; padding: 0.9rem 0; }
  .tillit li { border: 0 !important; padding: 0.2rem 0; }
}

/* Bildeflater */
.bilde {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-bilde);
  background: var(--bg-alt);
}
.bilde--stor { border-radius: var(--r-bilde-stor); }
.bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
a:hover .bilde img,
a:focus-visible .bilde img { transform: scale(1.02); }
.bilde--21 { aspect-ratio: 21 / 9; }
.bilde--169 { aspect-ratio: 16 / 9; }
.bilde--32 { aspect-ratio: 3 / 2; }
.bilde--43 { aspect-ratio: 4 / 3; }
.bilde--45 { aspect-ratio: 4 / 5; }
.bilde--34 { aspect-ratio: 3 / 4; }

/* ---------- 9. Tjenestesekvens (bildeledet, ikke kort) ---------- */

.tjeneste-blokk + .tjeneste-blokk { margin-top: clamp(3.5rem, 7vw, 6rem); }
.tjeneste-blokk h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 0.45rem; }
.tjeneste-blokk p { color: var(--tekst-sek); margin-bottom: 1rem; }
.tjeneste-blokk__nr { display: none; }

/* A: stor horisontal flate, tekst i to spalter under */
.tjeneste-blokk--a .tjeneste-blokk__media { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
@media (min-width: 860px) {
  .tjeneste-blokk--a .tjeneste-blokk__tekst {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--gap);
    align-items: start;
  }
  .tjeneste-blokk--a .tjeneste-blokk__tekst > :first-child { grid-row: span 2; }
}

/* B: detaljbilde + kompakt tekst */
.tjeneste-blokk--b .tjeneste-blokk__media { margin-top: 1.4rem; }
@media (min-width: 860px) {
  .tjeneste-blokk--b {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .tjeneste-blokk--b .tjeneste-blokk__tekst { order: 1; }
  .tjeneste-blokk--b .tjeneste-blokk__media { order: 2; margin-top: 0; }
  .tjeneste-blokk--speil .tjeneste-blokk__tekst { order: 2; }
  .tjeneste-blokk--speil .tjeneste-blokk__media { order: 1; }
}

/* C: bred mørk flate (brukes på tjenesteoversikten) */
.tjeneste-blokk--c {
  background: var(--mork);
  color: var(--tekst-invers);
  border-radius: var(--r-bilde-stor);
  overflow: hidden;
}
.tjeneste-blokk--c h3, .tjeneste-blokk--c .h2-mindre { color: #fff; }
.tjeneste-blokk--c p { color: var(--tekst-invers-sek); }
.tjeneste-blokk--c .lenke-pil { color: var(--bla); }
.tjeneste-blokk--c .tjeneste-blokk__tekst { padding: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 860px) {
  .tjeneste-blokk--c {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
  }
  .tjeneste-blokk--c .bilde { height: 100%; aspect-ratio: auto; min-height: 22rem; border-radius: 0; }
  .tjeneste-blokk--c .tjeneste-blokk__tekst { align-self: center; }
}

/* ---------- 10. Introduksjon / posisjonering ---------- */

.posisjon { background: var(--bg-ren); }
.posisjon .container {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.posisjon h2 { max-width: 17ch; }
.posisjon p { color: var(--tekst-sek); }
@media (min-width: 900px) {
  .posisjon .container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- 11. Prosjekter (ett stort + to små, asymmetrisk) ---------- */

.prosjekt-grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); }
@media (min-width: 900px) {
  .prosjekt-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .prosjekt-grid > :nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .prosjekt-grid > :nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .prosjekt-grid > :nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
  .prosjekt-grid > :nth-child(1) .bilde { aspect-ratio: 4 / 3.4; }
  .prosjekt-grid > :nth-child(n+2) .bilde { aspect-ratio: 16 / 8.4; }
}

.prosjekt-kort a { text-decoration: none; color: inherit; display: block; }
.prosjekt-kort .bilde { border-radius: var(--r-bilde); }
.prosjekt-kort__meta {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: var(--t-s);
  color: var(--tekst-sek);
  margin: 0.95rem 0 0.3rem;
}
.prosjekt-kort__meta .kategori { color: var(--dypbla); font-weight: 600; }
.prosjekt-kort__meta .skille { color: var(--linje-sterk); }
.prosjekt-kort h3 { margin-bottom: 0.3rem; }
.prosjekt-kort a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.prosjekt-kort .resultat { color: var(--tekst-sek); font-size: var(--t-s); max-width: 46ch; }
.theme-dark .prosjekt-kort__meta,
.theme-dark .prosjekt-kort .resultat { color: var(--tekst-invers-sek); }
.theme-dark .prosjekt-kort__meta .kategori { color: var(--bla); }

/* ---------- 12. Gravefokus (to kolonner, tynne linjer) ---------- */

.gravefokus .sek-hode { max-width: 44rem; }
.grave-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 800px) { .grave-liste { grid-template-columns: 1fr 1fr; } }
.grave-liste li { padding: 1.05rem 0; border-bottom: 1px solid var(--linje); }
.grave-liste .punkt-tittel { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.grave-liste .punkt-tekst { color: var(--tekst-sek); font-size: var(--t-s); }

/* Gammel klasse beholdes for undersider */
.stor-liste { list-style: none; margin: 0; padding: 0; }
.stor-liste li { padding: 1.05rem 0; border-bottom: 1px solid var(--linje); }
.stor-liste li:first-child { border-top: 1px solid var(--linje); }
.stor-liste li::before { content: none; }
.stor-liste li > div { display: block; }
.stor-liste .punkt-tittel { display: block; font-weight: 600; margin-bottom: 0.1rem; color: var(--tekst); }
.stor-liste .punkt-tekst { color: var(--tekst-sek); font-size: var(--t-s); }
.theme-dark .stor-liste li { border-color: var(--linje-mork); }
.theme-dark .stor-liste .punkt-tittel { color: #fff; }
.theme-dark .stor-liste .punkt-tekst { color: var(--tekst-invers-sek); }

.gravefokus__bilde { margin-top: clamp(2rem, 4vw, 3rem); }
.gravefokus__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 13. Brøyteseksjon ---------- */

.vinter { background: var(--dypbla-mork); color: var(--tekst-invers); }
.vinter h2 { color: #fff; max-width: 18ch; }
.vinter .ingress { color: rgba(238, 241, 239, 0.85); }
.vinter__bilde { margin-block: clamp(1.75rem, 4vw, 2.75rem); }
.vinter__bilde .bilde { border-radius: var(--r-bilde-stor); }
.vinter__punkter {
  list-style: none;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0;
  row-gap: 0.3rem;
}
.vinter__punkter li { padding: 0.1rem 1.2rem; font-size: var(--t-s); color: rgba(238, 241, 239, 0.9); }
.vinter__punkter li + li { border-left: 1px solid rgba(238, 241, 239, 0.25); }
@media (max-width: 700px) {
  .vinter__punkter { flex-direction: column; align-items: center; }
  .vinter__punkter li { border: 0 !important; }
}
.vinter .btn-rad { justify-content: center; }

/* Eldre vinter-grid på brøytesiden */
.vinter__grid { display: grid; gap: var(--gap); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) { .vinter__grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.vinter h3 { color: #9adff7; font-size: var(--t-s); font-weight: 600; margin-bottom: 0.75rem; }
.vinter .vinter__grid ul { list-style: none; margin: 0; padding: 0; }
.vinter .vinter__grid li { padding: 0.65rem 0; border-bottom: 1px solid rgba(238, 241, 239, 0.14); font-size: var(--t-m); }

/* ---------- 14. Snekringsteaser ---------- */

.snekring-teaser { background: var(--bg-ren); }
.snekring-teaser .container { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 900px) {
  .snekring-teaser .container { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); }
  .snekring-teaser__tekst { order: 2; }
  .snekring-teaser__media { order: 1; }
}
.snekring-teaser p { color: var(--tekst-sek); margin-bottom: 1.4rem; }
.snekring-teaser .bilde { border-radius: var(--r-bilde-stor); }

/* ---------- 15. Anmeldelser (struktur klar, aktiveres med reelle data) ---------- */

.sitat-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); max-width: 52rem; margin-inline: auto; }
@media (min-width: 900px) { .sitat-grid--to { grid-template-columns: 1fr 1fr; } }
.sitat { border-top: 1px solid var(--linje-sterk); padding-top: 1.15rem; margin: 0; }
.sitat blockquote { margin: 0 0 1rem; font-size: var(--t-l); line-height: 1.5; color: var(--tekst); }
.sitat figcaption { font-size: var(--t-s); color: var(--tekst-sek); }
.sitat figcaption b { color: var(--tekst); font-weight: 600; }

/* ---------- 16. Arbeidsområde ---------- */

.omrade .container { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .omrade .container { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.omrade-liste { list-style: none; margin: 0; padding: 0; }
.omrade-liste li {
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linje);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.omrade-liste li:first-child { border-top: 1px solid var(--linje); }
.omrade-liste .avstand { font-weight: 400; font-size: var(--t-s); color: var(--tekst-sek); }
.omrade-kart { color: var(--dypbla); }
.omrade-svg { width: 100%; height: auto; }

/* ---------- 17. Avsluttende CTA ---------- */

.slutt-cta { background: var(--mork); color: var(--tekst-invers); text-align: center; }
.slutt-cta h2 { color: #fff; margin-inline: auto; max-width: 18ch; }
.slutt-cta p { color: var(--tekst-invers-sek); font-size: var(--t-l); margin: 0 auto 1.9rem; max-width: 46ch; }
.slutt-cta .btn-rad { justify-content: center; }

/* ---------- 18. Footer ---------- */

.site-footer {
  background: var(--mork);
  color: var(--tekst-invers-sek);
  font-size: var(--t-s);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
}
.site-footer .logo { color: #fff; margin-bottom: 1rem; }
.site-footer .logo b { color: var(--bla); }
.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linje-mork);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 3fr; } }
.site-footer h2 {
  color: #fff;
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}
.site-footer p { line-height: 1.6; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0.26rem 0; }
.site-footer a { color: var(--tekst-invers-sek); text-decoration: none; }
.site-footer a:hover { color: var(--bla); }
.site-footer address { font-style: normal; }
.footer-bunn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: var(--t-xs);
}
.footer-bunn a { text-decoration: underline; }

/* ---------- 19. Mobilbar ---------- */

.mobilbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mork);
  border-top: 1px solid var(--linje-mork);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobilbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  font-weight: 600;
  font-size: var(--t-m);
  text-decoration: none;
  color: #fff;
}
.mobilbar a + a { background: #fff; color: var(--tekst); }
@media (min-width: 900px) { .mobilbar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 54px; } }

/* ---------- 20. Innholdssider ---------- */

.to-kolonner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .to-kolonner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .to-kolonner--jevn { grid-template-columns: 1fr 1fr; }
}

/* Faktaliste: rene linjer, ingen dekorbullets */
.fakta-liste { list-style: none; margin: 0; padding: 0; }
.fakta-liste li { padding: 0.75rem 0; border-bottom: 1px solid var(--linje); }
.fakta-liste li::before { content: none; }
.fakta-liste b { font-weight: 600; }
.theme-dark .fakta-liste li { border-color: var(--linje-mork); }

/* Prosess: tynn topplinje per steg, som referansen */
.prosess {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: steg;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 800px) { .prosess { grid-template-columns: repeat(var(--prosess-kol, 3), 1fr); } }
.prosess--en { --prosess-kol: 1; }
.prosess li { counter-increment: steg; border-top: 1px solid var(--linje-sterk); padding-top: 1.1rem; }
.prosess li::before {
  content: "Steg " counter(steg);
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--tekst-sek);
  margin-bottom: 0.55rem;
}
.prosess h3 { font-size: var(--t-m); font-weight: 600; margin-bottom: 0.35rem; }
.prosess p { font-size: var(--t-s); color: var(--tekst-sek); }
.prosess--en li { border-top: 0; border-left: 1px solid var(--linje-sterk); padding: 0 0 0 1.25rem; }

/* FAQ / accordion */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--linje); }
.faq details:first-child { border-top: 1px solid var(--linje); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  font-weight: 600;
  font-size: var(--t-m);
  color: var(--tekst);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.35rem; color: var(--tekst-sek); flex: none; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding: 0 0 1.25rem; color: var(--tekst-sek); max-width: 62ch; }

/* Målgrupper */
.gruppe-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 800px) { .gruppe-grid { grid-template-columns: 1fr 1fr; } }
.gruppe-grid--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.gruppe { border-top: 1px solid var(--linje-sterk); padding-top: 1rem; }
.gruppe h3 { font-size: var(--t-l); margin-bottom: 0.4rem; }
.gruppe p { color: var(--tekst-sek); font-size: var(--t-m); }
.theme-dark .gruppe { border-color: var(--linje-mork); }
.theme-dark .gruppe p { color: var(--tekst-invers-sek); }

/* Avtaleformer */
.avtale-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 800px) { .avtale-grid { grid-template-columns: 1fr 1fr; } }
.avtale {
  border: 1px solid var(--linje);
  border-radius: var(--r-bilde);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-ren);
}
.avtale--fremhevet { background: var(--mork); border-color: var(--mork); color: var(--tekst-invers); }
.avtale--fremhevet h3 { color: #fff; }
.avtale--fremhevet p, .avtale--fremhevet li { color: var(--tekst-invers-sek); }
.avtale--fremhevet .fakta-liste li { border-color: var(--linje-mork); }
.avtale h3 { font-size: var(--t-l); }
.avtale .fakta-liste { margin-top: 1rem; }

/* ---------- 21. Prosjektsider ---------- */

.filter-rad { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-knapp {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--t-s);
  background: transparent;
  color: var(--tekst);
  border: 1px solid var(--linje-sterk);
  border-radius: var(--r-btn);
  padding: 0.5rem 1rem;
  min-height: 42px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.filter-knapp:hover { border-color: var(--tekst); }
.filter-knapp[aria-pressed="true"] { background: var(--tekst); color: #fff; border-color: var(--tekst); }
.no-js .filter-rad { display: none; }

.prosjekt-oversikt { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 800px) { .prosjekt-oversikt { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .prosjekt-oversikt > :nth-child(4n + 2) { margin-top: 3rem; } }
.prosjekt-oversikt .prosjekt-kort.er-skjult { display: none; }

.prosjekt-fakta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem;
  border-block: 1px solid var(--linje);
  padding-block: 1.25rem;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.prosjekt-fakta div { font-size: var(--t-s); color: var(--tekst-sek); }
.prosjekt-fakta b { display: block; font-weight: 600; font-size: var(--t-m); color: var(--tekst); margin-bottom: 0.1rem; }
.prosjekt-innhold h2 { font-size: var(--t-l); font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; }
.bilde-rekke { display: grid; gap: clamp(1rem, 2vw, 1.75rem); margin-block: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 700px) { .bilde-rekke { grid-template-columns: repeat(3, 1fr); } }
.bilde-rekke figure { margin: 0; }
.bilde-rekke figcaption { font-size: var(--t-xs); color: var(--tekst-sek); padding-top: 0.5rem; }
.neste-prosjekt { border-top: 1px solid var(--linje); padding-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 22. Galleri ---------- */

.galleri { columns: 1; column-gap: clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 640px) { .galleri { columns: 2; } }
@media (min-width: 1000px) { .galleri { columns: 3; } }
.galleri-punkt { margin: 0 0 clamp(1rem, 2vw, 1.75rem); break-inside: avoid; }
.galleri-punkt.er-skjult { display: none; }
.galleri-punkt button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galleri-punkt figcaption { font-size: var(--t-s); color: var(--tekst-sek); padding-top: 0.5rem; }
.bilde--r43 { aspect-ratio: 4 / 3; }
.bilde--r34 { aspect-ratio: 3 / 4; }
.bilde--r11 { aspect-ratio: 1 / 1; }
.bilde--r169 { aspect-ratio: 16 / 9; }
.vis-flere-rad { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

.lightbox {
  border: 0;
  padding: 0;
  background: rgba(12, 17, 19, 0.96);
  color: var(--bg-ren);
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
}
.lightbox::backdrop { background: rgba(12, 17, 19, 0.96); }
.lightbox__ramme { display: flex; flex-direction: column; height: 100%; padding: clamp(0.75rem, 2vw, 1.75rem); }
.lightbox__topp { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lightbox__teller { font-size: var(--t-s); color: var(--tekst-invers-sek); }
.lightbox__scene { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding-block: 0.75rem; }
.lightbox__scene img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-btn); }
.lightbox__bunn { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lightbox__tekst { font-size: var(--t-m); color: var(--tekst-invers); margin: 0; }
.lightbox__pilene { display: flex; gap: 0.5rem; flex: none; }
.lightbox button {
  background: transparent;
  border: 1px solid rgba(238, 241, 239, 0.4);
  color: var(--bg-ren);
  border-radius: var(--r-pill);
  min-width: 48px;
  min-height: 48px;
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox button:hover { border-color: var(--bla); color: var(--bla); }

/* ---------- 23. Skjema ---------- */

.skjema { max-width: 38rem; }
.skjema fieldset { border: 0; margin: 0 0 1.35rem; padding: 0; }
.skjema legend,
.skjema label {
  display: block;
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--tekst);
  margin-bottom: 0.4rem;
}
.felt { margin-bottom: 1.25rem; }
.felt .hjelpetekst { font-size: var(--t-s); color: var(--tekst-sek); margin: 0 0 0.45rem; font-weight: 400; }
.skjema input[type="text"],
.skjema input[type="tel"],
.skjema input[type="email"],
.skjema select,
.skjema textarea {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: #fff;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--r-felt);
  padding: 0.7rem 0.9rem;
  min-height: 48px;
}
.skjema textarea { min-height: 7.5rem; resize: vertical; }
.skjema input:focus-visible,
.skjema select:focus-visible,
.skjema textarea:focus-visible { outline: 3px solid var(--dypbla); outline-offset: 1px; }
.skjema input[aria-invalid="true"],
.skjema select[aria-invalid="true"],
.skjema textarea[aria-invalid="true"] { border-color: #a4351f; border-width: 2px; }
.feilmelding { display: none; color: #a4351f; font-size: var(--t-s); font-weight: 600; margin-top: 0.3rem; }
.feilmelding.er-synlig { display: block; }

.radio-gruppe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.radio-gruppe label,
.avkryssing label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 400;
  font-size: var(--t-m);
  margin: 0;
  cursor: pointer;
}
.skjema input[type="radio"],
.skjema input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--dypbla);
  flex: none;
}
.skjema input[type="file"] { font-size: var(--t-s); }

.skjema-status {
  border: 1px solid var(--linje);
  border-left: 3px solid var(--dypbla);
  background: var(--bg-alt);
  border-radius: var(--r-felt);
  padding: 1.15rem 1.35rem;
  margin-top: 1.5rem;
}
.skjema-status[hidden] { display: none; }
.skjema-status h2 { font-size: var(--t-l); font-weight: 600; margin-bottom: 0.4rem; }
.skjema-status p { margin-bottom: 0.6rem; font-size: var(--t-m); }
.skjema-status--feil { border-left-color: #a4351f; }

.kontakt-info h2 { font-size: var(--t-l); font-weight: 600; }
.kontakt-info .stor-tlf {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tekst);
  display: inline-block;
  border-bottom: 2px solid var(--bla);
  line-height: 1.3;
}
.kontakt-info .stor-tlf:hover { color: var(--dypbla); }
.kontakt-info dl { margin: 1.5rem 0 0; }
.kontakt-info dt { font-weight: 600; font-size: var(--t-s); color: var(--tekst-sek); margin-top: 1.05rem; }
.kontakt-info dd { margin: 0.1rem 0 0; }

/* ---------- 24. Motion ---------- */

/* Reveal brukes selektivt: bilder og enkelte hoder, ikke alt */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms cubic-bezier(0.2, 0, 0.2, 1), transform 650ms cubic-bezier(0.2, 0, 0.2, 1);
}
.js .reveal.er-synlig { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 25. Verktøy ---------- */

.btn-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.25rem; }

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

.m0 { margin: 0; }
.mt-1 { margin-top: 0.8rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3rem); }
.h2-mindre { font-size: var(--t-l); font-weight: 600; }
.tillegg { margin-top: 1rem; color: var(--tekst-sek); font-size: var(--t-s); }
.senter { text-align: center; }

.plassholder-merknad {
  font-size: var(--t-xs);
  color: var(--tekst-sek);
  border-left: 2px solid var(--linje-sterk);
  padding: 0.4rem 0 0.4rem 0.85rem;
  margin-top: 1.25rem;
  max-width: 46rem;
}

@media print {
  .site-header, .mobilbar, .sesongbanner, .site-footer nav { display: none; }
}

/* To detaljbilder side om side (mur + stein), forskjøvet for rytme */
.duo-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.5vw, 1.1rem); align-items: start; }
.duo-media > :last-child { margin-top: clamp(1.25rem, 3vw, 2.25rem); }
.duo-media .bilde { aspect-ratio: 3 / 4; }

/* Når en seksjon bare inneholder det sentrerte hodet, skal ikke hodets
   bunnmarg legges oppå seksjonspaddingen. */
.sek-hode:last-child { margin-bottom: 0; }
/* Intro og tjenestesekvens leses som én flyt */
.seksjon + .seksjon--s { padding-top: 0; }

/* .senter må oppheve avsnittets max-width, ellers sentreres teksten
   inne i tekstblokken i stedet for i containeren. */
.senter { text-align: center; max-width: none; margin-inline: auto; }

/* .theme-dark a er mer spesifikk enn .btn--hvit/.btn--ghost og overstyrte
   knappefargene. Gjenopprett riktig farge på mørke flater. */
.theme-dark .btn--hvit,
.theme-blue .btn--hvit,
.hero .btn--hvit,
.foto-hero .btn--hvit { color: var(--tekst); }
.theme-dark .btn--hvit:hover,
.theme-blue .btn--hvit:hover,
.hero .btn--hvit:hover,
.foto-hero .btn--hvit:hover { color: var(--tekst); }
.theme-dark .btn--ghost,
.theme-blue .btn--ghost,
.hero .btn--ghost,
.foto-hero .btn--ghost { color: #fff; }

.faq--sentrert { margin-inline: auto; }

/* Snekkerheroen bruker referansebildet, som har mye lys himmel. Uten
   overlay senker vi utsnittet så både navigasjon og tekst havner på
   treverket i stedet for himmelen. Målt i tekstsonen: 2.7:1 -> 4.3:1,
   og tekstskyggen under løfter den lokale kontrasten. */
.foto-hero__media img { object-position: 50% 88%; }
@media (max-width: 700px) { .foto-hero__media img { object-position: 58% 88%; } }
.foto-hero .hero__innhold {
  text-shadow: 0 1px 3px rgba(10, 14, 16, 0.8), 0 2px 20px rgba(10, 14, 16, 0.6);
}
.foto-hero .hero__innhold .btn,
.foto-hero .hero__innhold .btn * { text-shadow: none; }

/* Overteksten er den minste teksten over film og foto. Uten overlay
   trenger den full opasitet og litt fastere skygge. */
.hero .overtekst,
.foto-hero .overtekst {
  color: #fff;
  text-shadow: 0 1px 3px rgba(10, 14, 16, 0.75), 0 2px 14px rgba(10, 14, 16, 0.5);
}

/* =========================================================================
   26. Snekringsseksjoner
   Layout portert fra den tidligere Svensen-siden, satt i vårt designsystem.
   ========================================================================= */

/* Inngangskort */
.entry-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 760px) { .entry-grid { grid-template-columns: 1fr 1fr; } }
.entry-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--linje);
  border-radius: var(--r-bilde-stor);
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--bg-ren);
  transition: border-color 180ms ease, transform 180ms ease;
}
.entry-card:hover { border-color: var(--linje-sterk); transform: translateY(-2px); }
.entry-card .thumb { overflow: hidden; border-radius: var(--r-bilde); aspect-ratio: 16 / 10; }
.entry-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2,0,0.2,1); }
.entry-card:hover .thumb img { transform: scale(1.03); }
.entry-card h3 { margin: 1.1rem 0 0.35rem; }
.entry-card p { color: var(--tekst-sek); font-size: var(--t-s); margin-bottom: 0.9rem; }

.arrow-link {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--dypbla);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.arrow-link svg { transition: transform 160ms ease; }
.entry-card:hover .arrow-link svg,
.arrow-link:hover svg { transform: translateX(3px); }

/* Om-kort med bilde */
.about-card { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .about-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.about-photo { border-radius: var(--r-bilde-stor); overflow: hidden; aspect-ratio: 4 / 5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-copy h2 { max-width: 16ch; }
.about-feats { display: grid; gap: 1.5rem 2.5rem; margin-top: 1.75rem; }
@media (min-width: 620px) { .about-feats { grid-template-columns: 1fr 1fr; } }
.about-feats h3 { font-size: var(--t-m); margin-bottom: 0.3rem; }
.about-feats p { font-size: var(--t-s); color: var(--tekst-sek); }

/* Bildestripe */
.scatter {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: clamp(1rem, 3vw, 2rem);
}
.scatter-kort {
  width: clamp(6rem, 15vw, 11rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-bilde);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 27, 29, 0.08);
}
.scatter-kort:nth-child(1) { transform: rotate(-3deg); }
.scatter-kort:nth-child(3) { transform: rotate(3deg); }
.scatter-kort img { width: 100%; height: 100%; object-fit: cover; }

/* Accordion med bildebytte */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.split-tittel { max-width: 15ch; margin-bottom: 1.75rem; }
.split-photo { border-radius: var(--r-bilde-stor); overflow: hidden; aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .split-photo { position: sticky; top: 6rem; } }
.split-photo img { width: 100%; height: 100%; object-fit: cover; }

.acc details { border-top: 1px solid var(--linje-sterk); }
.acc details:last-child { border-bottom: 1px solid var(--linje-sterk); }
.acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  font-weight: 600;
  font-size: var(--t-l);
  color: var(--tekst);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.4rem; color: var(--tekst-sek); line-height: 1; flex: none; }
.acc details[open] summary::after { content: "−"; }
.acc-body { padding-bottom: 1.15rem; }
.acc-body ul { margin: 0; padding-left: 1.1rem; color: var(--tekst-sek); font-size: var(--t-s); }
.acc-body li { padding: 0.15rem 0; }

/* Produktrader */
.produkt { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.produkt + .produkt { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 860px) {
  .produkt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .produkt--speil .produkt-tekst { order: 2; }
  .produkt--speil .produkt-bilde { order: 1; }
}
.produkt-tekst h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 0.5rem; }
.produkt-tekst p { color: var(--tekst-sek); margin-bottom: 1rem; }
.produkt-bilde { border-radius: var(--r-bilde-stor); overflow: hidden; aspect-ratio: 16 / 11; }
.produkt-bilde img { width: 100%; height: 100%; object-fit: cover; }

/* Tjenesteliste i to kolonner */
.tjeneste-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 800px) { .tjeneste-liste { grid-template-columns: 1fr 1fr; } }
.tjeneste-liste li { padding: 1.05rem 0; border-bottom: 1px solid var(--linje); }
.tjeneste-liste .punkt-tittel { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.tjeneste-liste .punkt-tekst { color: var(--tekst-sek); font-size: var(--t-s); }

/* Ghost-knappen over lyse fotohero-motiver: et lite fyll i selve knappen
   gjør telefonnummeret lesbart. Dette er knappestil, ikke et lag over
   bildet, så motivet står fortsatt uberørt. */
.foto-hero .btn--ghost,
.hero .btn--ghost {
  background: rgba(16, 23, 25, 0.42);
  border-color: rgba(255, 255, 255, 0.7);
}
.foto-hero .btn--ghost:hover,
.hero .btn--ghost:hover { background: rgba(16, 23, 25, 0.6); border-color: #fff; }

/* Ingressen er den lengste teksten over foto. Full hvit + fastere skygge. */
.foto-hero .hero__innhold .ingress { color: #fff; }

/* =========================================================================
   27. Kontaktskjema
   Skjemaet ligger i ett tydelig panel. Rammen har funksjon: den samler
   feltene og skiller dem fra kontaktinformasjonen ved siden av.
   ========================================================================= */

.skjema-panel {
  background: var(--bg-ren);
  border: 1px solid var(--linje);
  border-radius: var(--r-bilde-stor);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.skjema-panel > h2 {
  font-size: var(--t-l);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.skjema-panel > .panel-hjelp {
  color: var(--tekst-sek);
  font-size: var(--t-s);
  margin-bottom: 1.75rem;
}
.skjema { max-width: none; }

/* Felt i to kolonner der det gir mening */
.felt-rad { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .felt-rad { grid-template-columns: 1fr 1fr; } }

/* Temavalg som synlige knapper i stedet for nedtrekksliste */
.emne-valg { border: 0; margin: 0 0 1.5rem; padding: 0; }
.emne-valg legend { margin-bottom: 0.6rem; }
.emne-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Etiketten er bare en ramme. Selve pillen er <span>, slik at vi kan
   bruke søskenselektor i stedet for :has(). Det gir riktig oppdatering
   i alle nettlesere, også når valget settes fra JavaScript. */
.emne-chips label { display: inline-flex; margin: 0; cursor: pointer; }
.emne-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.emne-chips span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  min-height: 44px;
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--tekst);
  background: #fff;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--r-pill);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.emne-chips label:hover span { border-color: var(--tekst); }
.emne-chips input:checked + span {
  background: var(--tekst);
  border-color: var(--tekst);
  color: #fff;
}
.emne-chips input:focus-visible + span {
  outline: 3px solid var(--dypbla);
  outline-offset: 2px;
}

/* Filopplasting: skjult input, egen knapp */
.fil-felt input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fil-knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  min-height: 46px;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tekst);
  background: #fff;
  border: 1px dashed var(--linje-sterk);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.fil-knapp:hover { border-color: var(--tekst); background: var(--bg-alt); }
.fil-felt input[type="file"]:focus-visible + .fil-knapp {
  outline: 3px solid var(--dypbla);
  outline-offset: 2px;
}
.fil-navn { display: block; font-size: var(--t-s); color: var(--tekst-sek); margin-top: 0.5rem; }

/* Kontaktmåte som segmentert valg */
.segment { display: inline-flex; border: 1px solid var(--linje-sterk); border-radius: var(--r-pill); padding: 3px; gap: 3px; }
.segment label { margin: 0; display: inline-flex; cursor: pointer; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span {
  padding: 0.45rem 1.1rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-size: var(--t-s);
  font-weight: 500;
  border-radius: var(--r-pill);
  color: var(--tekst-sek);
  transition: background-color 140ms ease, color 140ms ease;
}
.segment input:checked + span { background: var(--tekst); color: #fff; }
.segment input:focus-visible + span { outline: 3px solid var(--dypbla); outline-offset: 2px; }

/* Samtykke og innsending */
.skjema .avkryssing {
  border-top: 1px solid var(--linje);
  padding-top: 1.35rem;
  margin-top: 0.5rem;
}
.skjema-send { margin-top: 1.5rem; }
.skjema-send .btn { width: 100%; min-height: 54px; font-size: var(--t-m); border-radius: var(--r-btn); }
.skjema-fot { font-size: var(--t-xs); color: var(--tekst-sek); margin-top: 0.9rem; text-align: center; }

/* Kontaktinformasjon ved siden av */
.kontakt-info .kontakt-rader { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.kontakt-info .kontakt-rader li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--linje);
  display: grid;
  gap: 0.15rem;
}
.kontakt-info .kontakt-rader li:last-child { border-bottom: 1px solid var(--linje); }
.kontakt-info .kontakt-rader b { font-size: var(--t-xs); font-weight: 600; color: var(--tekst-sek); }
.kontakt-info .kontakt-rader span, .kontakt-info .kontakt-rader a { font-size: var(--t-m); color: var(--tekst); }
.kontakt-info .kontakt-rader a { text-decoration: underline; text-underline-offset: 3px; }

/* Skjemaet får mest plass */
@media (min-width: 900px) {
  .kontakt-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); }
}

/* Referanseliste (bygges av assets/js/reviews.js når data finnes) */
.referanse-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 800px) { .referanse-liste { grid-template-columns: 1fr 1fr; } }
.referanse-liste li { padding: 1.05rem 0; border-bottom: 1px solid var(--linje); }
.referanse-liste .punkt-tittel { display: block; font-weight: 600; margin-bottom: 0.15rem; }
.referanse-meta { display: block; font-size: var(--t-xs); color: var(--tekst-sek); margin-bottom: 0.2rem; }
.referanse-liste .punkt-tekst { color: var(--tekst-sek); font-size: var(--t-s); }
.sek-hode-enkel { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }

/* Maskiner og utstyr */
.maskin-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 800px) { .maskin-grid { grid-template-columns: 1fr 1fr; } }
.maskin { border-top: 2px solid var(--tekst); padding-top: 1.15rem; }
.maskin h3 { font-size: var(--t-l); margin-bottom: 0.15rem; }
.maskin-arg { font-size: var(--t-s); color: var(--tekst-sek); margin-bottom: 1rem; }
.maskin ul { list-style: none; margin: 0; padding: 0; }
.maskin li { padding: 0.6rem 0; border-bottom: 1px solid var(--linje); font-size: var(--t-s); }

/* Bilde i maskinseksjonen */
.maskin-bilde { margin-bottom: 1.1rem; }
.maskin { border-top: 0; padding-top: 0; }
.maskin h3 { margin-top: 0; }
.maskin-grid .maskin > h3 { border-top: 2px solid var(--tekst); padding-top: 1rem; }

/* Arbeidsområde: rolig stedsliste og ekte lokalbilde */
.omrade .container { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .omrade .container { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.omrade-tekst h2 { margin-bottom: 0.6rem; }
.omrade-tekst > p { color: var(--tekst-sek); }
.omrade-steder {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
}
.omrade-steder li {
  font-weight: 600;
  font-size: var(--t-m);
  padding: 0.15rem 1rem;
  border-left: 1px solid var(--linje-sterk);
}
.omrade-steder li:first-child { padding-left: 0; border-left: 0; }
.omrade-media .bilde { aspect-ratio: 4 / 5; }

/* Gravelisten: små streksymboler som bryter opp uten å ta over */
.grave-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 0.9rem; align-items: start; }
.grave-ikon { color: var(--tekst-sek); margin-top: 0.15rem; flex: none; }
.grave-innhold { min-width: 0; }

/* Kreditering nederst i footeren */
.footer-kreditt a { color: var(--tekst-invers-sek); text-decoration: underline; text-underline-offset: 2px; }
.footer-kreditt a:hover { color: var(--bla); }

/* Footer-logo bruker samme lockup som headeren, litt mindre */
.site-footer .logo { font-size: 1rem; }
.site-footer .logo img { width: 30px; height: 30px; }
.site-footer .logo small { color: var(--tekst-invers-sek); }