/*
Theme Name: Takproff
Theme URI: https://takproff.no
Description: Skreddersydd tema for Takproff.no – takvask, impregnering, takmaling og takfornyelse i Oslo og Østlandet. Performance-first, SEO-klar, tilgjengelig. Bygget etter BRAND-BOOK.
Author: Takproff
Version: 5.9.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
Text Domain: takproff
Tags: business, custom-colors, custom-menu, featured-images, translation-ready
*/

/* Temos stiliai importuoti žemiau iš prototipo. Redaguoti čia. */

/* ==========================================================================
   Takproff.no – stilark
   Rent, tillitsvekkende design. Mobil-først. Ingen eksterne avhengigheter.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     PALETT: grafitt + logoens rødt. Kun én aksent.
     Rødtonene er hentet PIKSELVIS fra LOGO-3.png, ikke valgt:
       #c95747  taklinjene i logoen (12 745 px)
       #e65644  slagordet «FORDI TAKET DITT FORTJENER DET BESTE»
     Logoen er hvit og laget for mørk bunn – derfor blir grafitt stående
     som grunn, mens aksenten er rød.
     Tekstvariantene er justert til å bestå WCAG AA. Det gjorde ikke gullet
     vi hadde før: #c9a227 på hvitt ga 2.42:1, kravet er 4.5:1.
     ------------------------------------------------------------------ */
  --ink: #1a1f24;        /* grafitt – hoved mørk (struktur) */
  --ink-2: #14181d;      /* mørkere – topbar/footer */
  --bla-mork: #1a1f24;   /* alias → grafitt (overskrifter, mørke seksjoner) */
  --bla: #c94736;        /* alias → rød tekstvariant */
  --rod: #c95747;        /* logoens rød – flater, streker, ikoner (3:1 OK) */
  --rod-mork: #c94736;   /* tekst/lenker på lys bunn – 4.53:1 på #fbfaf7 */
  --rod-dyp: #ae3829;    /* knapp-hover – hvit tekst 6.18:1 */
  --bla-lys: #f4f2ec;    /* lys bakgrunn – varm nøytral (ikke blå) */
  --gronn: #c95747;      /* alias → rød (gammel «grønn»-bruk = CTA/streker) */
  --tekst: #1e2227;
  --tekst-svak: #5b636b;
  --linje: #e6e3db;
  --hvit: #ffffff;
  --gul: #e7a23d;        /* stjerner i omtaler – IKKE merkefargen, bare stjernegult */
  --radius: 12px;
  --skygge: 0 6px 24px rgba(20, 49, 79, 0.08);
  --skygge-sterk: 0 10px 34px rgba(20, 49, 79, 0.16);
  --bredde: 1280px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--tekst);
  line-height: 1.65;
  background: var(--hvit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; color: var(--bla-mork); margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--bla); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--bredde); margin: 0 auto; padding: 0 20px; }

.seksjon { padding: clamp(48px, 8vw, 88px) 0; }
.seksjon--lys { background: var(--bla-lys); }
.seksjon--mork { background: var(--bla-mork); color: #dbe7f1; }
.seksjon--mork h2, .seksjon--mork h3 { color: #fff; }

.stikkord {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bla);
  margin-bottom: .6rem;
}

/* ---------- Knapper ---------- */
.knapp {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none;
}
.knapp:hover { text-decoration: none; transform: translateY(-2px); }
.knapp--primar { background: var(--rod); color: var(--ink); box-shadow: var(--skygge); }
.knapp--primar:hover { background: var(--rod-mork); box-shadow: var(--skygge-sterk); }
.knapp--tlf { background: #fff; color: var(--bla-mork); border-color: var(--linje); }
.knapp--tlf:hover { border-color: var(--bla); }
.knapp--stor { padding: 16px 32px; font-size: 1.08rem; }

/* ---------- Topptekst / navigasjon ---------- */
.topp {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--linje);
}
.logo { font-weight: 800; font-size: 1.3rem; color: var(--bla-mork); letter-spacing: -.02em; }
.logo span { color: var(--bla); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--tekst); font-weight: 600; font-size: .96rem; }
.nav a:hover { color: var(--bla); text-decoration: none; }
.nav__tlf { color: var(--bla-mork) !important; font-weight: 800 !important; }
.nav-knapp { display: none; background: none; border: 0; cursor: pointer; font-size: 1.6rem; color: var(--bla-mork); }

/* ---------- Hero ---------- */

.hero__knapper { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Tillitsstripe (premium: gull-badges + fine skillere) ---------- */
.tillit-seksjon { padding: 50px 0; background: #fff; position: relative; }
.tillit-seksjon::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1280px, 92%); height: 1px; background: linear-gradient(90deg, transparent, rgba(201,87,71,.5), transparent); }

.tillit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tillit__item { display: flex; align-items: center; gap: 15px; padding: 6px 28px; position: relative; }
.tillit__item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 46px; background: linear-gradient(180deg, transparent, var(--linje), transparent); }

.tillit__ik { width: 56px; height: 56px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(201,87,71,.2), rgba(201,87,71,.05));
  border: 1px solid rgba(201,87,71,.32); box-shadow: 0 8px 20px rgba(201,87,71,.1); }
.tillit__ik svg { width: 25px; height: 25px; color: var(--rod); }

.tillit__tekst strong { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.tillit__tekst span { font-size: .86rem; color: var(--tekst-svak); }

@media (max-width: 820px) {
  /* De 28px sidepadding finnes kun for å gi luft rundt skillelinjene i
     4-kolonners desktoprad. Uten skillelinjer blir de bare et innrykk som
     ikke matcher .wrap (20px) i resten av siden. */
  .tillit { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
  .tillit__item { padding-inline: 0; }
  .tillit__item::after { display: none !important; }
}
@media (max-width: 480px) {
  .tillit { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Prosess ---------- */

/* ---------- Priser ---------- */



/* ---------- Galleri ---------- */
.galleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prosjekt { background: #fff; border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; box-shadow: var(--skygge); }
.prosjekt__tekst { padding: 16px 18px; }
.prosjekt__tekst h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.prosjekt__tekst p { font-size: .92rem; color: var(--tekst-svak); margin: 0; }

/* ---------- Omtaler ---------- */

.stjerner { color: var(--gul); letter-spacing: 2px; margin-bottom: 8px; }

/* ---------- FAQ ---------- */

/* ---------- Skjema ---------- */
.skjema { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--skygge-sterk); }
.skjema-rad { margin-bottom: 16px; }
.skjema label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.skjema input, .skjema select, .skjema textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--linje); border-radius: 10px;
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--tekst);
}
.skjema input:focus, .skjema select:focus, .skjema textarea:focus { outline: 2px solid var(--bla); border-color: var(--bla); }
.skjema small { color: var(--tekst-svak); font-size: .85rem; }
.skjema .knapp { width: 100%; justify-content: center; margin-top: 6px; }
.valgfri { color: var(--tekst-svak); font-weight: 400; }

/* ---------- CTA-bånd ---------- */

/* ---------- Bunntekst ---------- */

/* ---------- Underside topp ---------- */
.side-hero { background: linear-gradient(160deg,#1a1f24,#2b323a); color: #fff; padding: 56px 0; }
.side-hero h1 { color: #fff; }
.side-hero p { color: #cfe0ef; max-width: 60ch; }
.brodsmule { font-size: .88rem; color: #a9c9e2; margin-bottom: 10px; }
.brodsmule a { color: #cfe0ef; }

.tett { max-width: 760px; }
.tett h2 { margin-top: 2em; }
.tett ul { padding-left: 1.2em; }
.tett li { margin-bottom: 6px; }
.notis { background: var(--bla-lys); border-left: 4px solid var(--bla); padding: 14px 18px; border-radius: 8px; margin: 20px 0; }

/* ---------- Responsivt ---------- */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .rutenett--3, .steg, .tillit, .galleri { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  /* .nav-reglene her er fjernet – de satte left:0 (via inset) som overlevde
     alle senere lag og dyttet mobilpanelet til venstre. Mobilmenyen styres
     nå kun av ÉN blokk nederst i denne filen. */
  .rutenett--3, .rutenett--2, .steg, .tillit, .galleri, .bunn__topp { grid-template-columns: 1fr; }
  .hero__knapper .knapp { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   WordPress-spesifikt + tillegg (mobil CTA-linje, editor-klasser)
   ========================================================================== */

/* Mobil bunn-CTA – alltid synlig «Ring» + «Få pris» */
.mobil-cta { display: none; }
@media (max-width: 620px) {
  .mobil-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    box-shadow: 0 -4px 20px rgba(20,49,79,.16);
  }
  .mobil-cta a { padding: 15px; text-align: center; font-weight: 800; text-decoration: none; }
  .mobil-cta__ring { background: #fff; color: var(--bla-mork); border-top: 1px solid var(--linje); }
  .mobil-cta__pris { background: var(--gronn); color: #fff; }
  body { padding-bottom: 56px; } /* plass til fast linje */
}

/* WordPress standardklasser */
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption, figure { margin: 0 0 1rem; }
.wp-caption-text, figcaption { font-size: .85rem; color: var(--tekst-svak); }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--bla-mork); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Galleri-bilde (ekte bilder i prosjekt-CPT) */
.prosjekt__bilde img { width: 100%; height: 100%; object-fit: cover; }

/* Respekter redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@keyframes kenburns { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.14) translate(-2%,-2%)} }

/* Fallback-«bilde» (simulert tak) hvis ingen bg lastet opp */
.takbg { background:
    linear-gradient(180deg, rgba(26,31,36,.12), rgba(26,31,36,.4)),
    radial-gradient(120% 90% at 72% -10%, #e2e2df 0%, #b3b6b3 26%, transparent 52%),
    repeating-linear-gradient(116deg, #3c4148 0 15px, #474d55 15px 30px),
    linear-gradient(180deg,#c6c8c6,#3a3f45);
  background-blend-mode: normal, screen, normal, normal; }
.fkort { position:absolute; background:rgba(255,255,255,.97); border-left:3px solid var(--gronn); border-radius:4px;
  box-shadow:0 18px 44px rgba(0,0,0,.34); padding:15px 18px; font:600 .93rem system-ui; color:var(--bla-mork);
  display:flex; align-items:center; gap:11px; }
.fkort .ik { font-size:1.35rem; display:inline-flex; }
.fkort .ik svg { width:22px; height:22px; color:var(--rod); }
.fkort.g { border-left-color:#c95747; }
.fk1 { top:2%;  right:6%;  animation: sve 6.5s ease-in-out infinite; }
.fk2 { top:42%; left:-4%;  animation: sve 6.5s ease-in-out .9s infinite; }
.fk3 { bottom:2%; right:14%; animation: sve 6.5s ease-in-out 1.8s infinite; }
@keyframes sve { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ---------- Underline-knapper (premium, skarpe – ingen runding, ingen fyll) ---------- */
.uknapp { position:relative; display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:#fff; background:none; border:0; cursor:pointer; padding:6px 2px 14px;
  font:800 1.12rem/1 system-ui; letter-spacing:.01em; }
.uknapp::before { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.22); }
.uknapp::after  { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gronn);
  transform:scaleX(1); transform-origin:left; transition:transform .3s ease, filter .2s ease; }
.uknapp:hover { text-decoration:none; }
.uknapp .arw { transition:transform .25s ease; }
.uknapp:hover .arw { transform:translateX(7px); }
.uknapp:hover::after { filter:brightness(1.18); }
.uknapp svg { width:18px; height:18px; flex:none; }
/* sekundær (telefon) – underline vises på hover */
.uknapp--sek { font-size:1rem; font-weight:700; color:#dbe7f3; }
.uknapp--sek::after { background:#c95747; transform:scaleX(0); }
.uknapp--sek:hover::after { transform:scaleX(1); }
.uknapp--sek:hover { color:#fff; }

@media (max-width:860px){
  .hero-v .wrap { grid-template-columns:1fr; }
  .hero-v__foto { position:absolute; inset:0; width:100%; clip-path:none; opacity:.45; }
  .hero-v__flyt { min-height:auto; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
  .fkort { position:static; }
  .hero-v__knapper { gap:22px; }
}

/* ==========================================================================
   HEADER – transparent over hero, blir hvit ved scroll (.scrolled via JS)
   Overstyrer base-.topp lenger opp i fila.
   ========================================================================== */
.topp { position:fixed; top:0; left:0; right:0; z-index:60; background:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent; transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; }

.topp__bar { overflow:hidden; max-height:46px; border-bottom:1px solid rgba(255,255,255,.14);
  transition:max-height .3s ease, opacity .3s ease, border-color .3s ease; }
.topp__bar-inner { display:flex; justify-content:space-between; align-items:center; height:44px; font:600 13px system-ui; color:#c8d8e6; }
.topp__bar-l, .topp__bar-r { display:flex; align-items:center; gap:22px; }
.topp__it { display:inline-flex; align-items:center; gap:7px; color:inherit; text-decoration:none; }
.topp__it:hover { color:#fff; text-decoration:none; }
.topp__it svg { width:15px; height:15px; color:#c95747; flex:none; }
/* Facebook-merket: blå ikon så folk kjenner det igjen, litt kraftigere tekst. */
.topp__fb { font-weight:700; }
.topp__fb svg { color:#1877f2; }
.topp__fb:hover { color:#fff; }
/* Sikkerhetsnett: ingen inline-SVG i headeren skal kunne «rømme» i størrelse */
.topp svg { max-width:30px; max-height:30px; }
.topp__it svg { max-width:15px; max-height:15px; }

.topp__main-inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo { display:inline-flex; align-items:center; gap:10px; font:800 1.42rem system-ui; letter-spacing:-.02em; color:#fff; text-decoration:none; }
.logo:hover { text-decoration:none; }
.logo__mark { color:#c95747; flex:none; }
.logo__txt { color:inherit; }
.logo__txt b { color:#c95747; font-weight:800; }

.nav { display:flex; align-items:center; gap:30px; }
.nav > a, .nav .menu-item > a { position:relative; color:#e7f0f8; font:600 .98rem system-ui; text-decoration:none; padding:8px 0; }
.nav > a::after, .nav .menu-item > a::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:#c95747; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav > a:hover::after, .nav .menu-item > a:hover::after { transform:scaleX(1); }
.nav a:hover { text-decoration:none; color:#fff; }

.nav__cta { display:flex; align-items:center; gap:24px; margin-left:6px; }
.nav__tlf { display:inline-flex; align-items:center; gap:8px; color:#fff !important; font:800 1.04rem system-ui; text-decoration:none; }
.nav__tlf svg { color:#c95747; }
.nav .nav__btn { display:inline-flex; align-items:center; gap:9px; font:800 .9rem/1 system-ui; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  padding:13px 22px; border-radius:3px; background:var(--rod); color:var(--ink) !important; box-shadow:0 8px 22px rgba(201,87,71,.32); transition:transform .14s ease, filter .2s ease; }
.nav .nav__btn:hover { transform:translateY(-2px); filter:brightness(1.04); text-decoration:none; color:var(--ink) !important; }
.nav .nav__btn, .nav .nav__btn:hover, .nav .nav__btn .arw { color:var(--ink) !important; }
.topp.scrolled .nav .nav__btn { color:var(--ink) !important; background:var(--rod); } /* gull også ved scroll */
.nav .nav__btn::after { display:none !important; } /* ingen underline-strek på knappen */
.nav__btn .arw { transition:transform .25s ease; }
.nav__btn:hover .arw { transform:translateX(5px); }

.nav-knapp { display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px; }

/* ---- Scrolled = hvit bakgrunn, mørk tekst ---- */
.topp.scrolled { background:#fff; box-shadow:0 6px 24px rgba(20,49,79,.10); border-bottom-color:#e2e8ee; }
.topp.scrolled .topp__bar { max-height:0; opacity:0; border-color:transparent; }
.topp.scrolled .logo { color:var(--bla-mork); }
.topp.scrolled .nav > a, .topp.scrolled .nav .menu-item > a { color:#1b2733; }
.topp.scrolled .nav > a::after, .topp.scrolled .nav .menu-item > a::after { background:var(--gronn); }
.topp.scrolled .nav__tlf { color:var(--bla-mork) !important; }
.topp.scrolled .nav__tlf svg { color:var(--gronn); }
.topp.scrolled .nav-knapp { color:var(--bla-mork); }
.side-hero { padding-top:130px; }

/* ---- Mobil ---- */
@media (max-width:900px){
  .nav { position:fixed; top:0; right:0; bottom:0; width:min(330px,86vw); flex-direction:column; align-items:flex-start;
    gap:18px; background:var(--ink); padding:92px 28px 30px; transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-8px 0 30px rgba(0,0,0,.3); z-index:70; }
  .nav.apen { transform:translateX(0); }
  .nav > a, .nav .menu-item > a { color:#e7f0f8; font-size:1.12rem; }
  .nav__cta { flex-direction:column; align-items:flex-start; gap:18px; margin:8px 0 0; }
  .nav-knapp { display:inline-flex; }
  .topp.scrolled .nav > a, .topp.scrolled .nav .menu-item > a { color:#e7f0f8; } /* mørkt panel også ved scroll */
  .topp.scrolled .nav__tlf { color:#fff !important; }
  .topp__it--skjul { display:none; }
  .hero-v .wrap { padding-top:120px; }
  .side-hero { padding-top:118px; }
}
@media (max-width:520px){
  .topp__bar-inner { font-size:12px; gap:8px; }
  .topp__bar-l, .topp__bar-r { gap:14px; }
  /* Gi Facebook-merket plass på små skjermer – e-post finnes i footer og på Kontakt. */
  .topp__it--epost { display:none; }
}

/* ==========================================================================
   HEADER-MENY (ekte WP-meny: ul/li/sub-menu) – dropdown + fjern kuler
   ========================================================================== */
.nav ul, .nav li { list-style:none; margin:0; padding:0; }
.nav .menu-item { position:relative; display:flex; align-items:center; }

/* Foreldre med barn: caret */
.nav .menu-item-has-children > a { padding-right:18px; }
.nav .menu-item-has-children > a::before { content:"▾"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:.68rem; opacity:.75; transition:transform .2s ease; }
.nav .menu-item-has-children:hover > a::before { transform:translateY(-50%) rotate(180deg); }

/* Dropdown */

/* hover-bro */
.nav .menu-item-has-children:hover > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }

/* Mobil: vis undermeny inline i panelet */
@media (max-width:900px){
  .nav .menu-item { display:block; }
  .nav .menu-item-has-children > a::before { display:none; }
}

/* ==========================================================================
   TJENESTER-KORT (premium: gull ikon-badge, hel kort = lenke, grafitt CTA-kort)
   ========================================================================== */
.seksjon__led { max-width:62ch; color:var(--tekst-svak); }

/* ==========================================================================
   HVORFOR OSS – mørk split (grafitt + gull)
   ========================================================================== */
/* ---------- Hvorfor oss – kompakt ----------
   Todelingen (overskrift i egen kolonne + liste ved siden) tok ~700 px.
   Nå deler overskrift, ingress og knapp én rad, og grunnene ligger i 3×2
   under. Glød og ring arves fra .hvorfor::before/::after lenger nede. */
.hvorfor { background: var(--ink); color: #fff; }
.hvorfor h2 { color: #fff; }
.stikkord--rod { color: var(--rod-lys); }

.hvorfor__inn{ position:relative; z-index:2; }
.hvorfor__hd{
  display:flex; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:24px;
}
.hvorfor__tit{ flex:0 1 auto; }
.hvorfor__hd h2{ font-size:1.7rem; line-height:1.14; margin:10px 0 0; }
.hvorfor__led{
  flex:1 1 300px; margin:0; color:#8f959c; font-size:.9rem; line-height:1.6; max-width:48ch;
}
.hvorfor__hd .knapp{ margin-left:auto; flex:none; }

.hvorfor__liste{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.2);
  border-left:1px solid rgba(255,255,255,.2);
}
.hvorfor__it{
  display:flex; gap:12px; align-items:flex-start; padding:15px 16px;
  border-right:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.hvorfor__ik{
  width:30px; height:30px; flex:none; position:relative;
  border:1px solid var(--rod); background:none; color:var(--rod-lys);
  display:flex; align-items:center; justify-content:center;
}
/* Bracket-hjørnet fra resten av temaet */
.hvorfor__ik::after{
  content:""; position:absolute; top:-3px; right:-3px; width:6px; height:6px;
  border-top:1px solid var(--rod); border-right:1px solid var(--rod);
}
.hvorfor__ik svg{ width:16px; height:16px; }
.hvorfor__tekst strong{ display:block; font:700 .95rem var(--font-h); color:#fff; margin-bottom:2px; }
.hvorfor__tekst span{ display:block; color:#8f959c; font-size:.77rem; line-height:1.5; }

@media (max-width:900px){
  .hvorfor__liste{ grid-template-columns:1fr 1fr; }
  .hvorfor__hd .knapp{ margin-left:0; }
}
@media (max-width:560px){
  .hvorfor__liste{ grid-template-columns:1fr; }
  .hvorfor__hd .knapp{ width:100%; justify-content:center; }
}

/* Den gamle .hvorfor-mobilregelen lå her. Fjernet: .hvorfor__grid finnes ikke
   lenger, og .hvorfor__liste{1fr} ved 860 px overstyrte de nye brekkpunktene
   (3 → 2 → 1) fordi den lå senere i filen. */

/* ==========================================================================
   PROSESS – kort med stort vann-tall + gull-ikon
   ========================================================================== */





/* ==========================================================================
   PRISER – premium tabell + inkludert-kort
   ========================================================================== */

.ptab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linje);
  border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(26,31,36,.07); }
.ptab th { background: var(--ink); color: #fff; text-align: left; padding: 16px 20px; font-size: .95rem; font-weight: 700; }
.ptab td { padding: 16px 20px; border-bottom: 1px solid var(--linje); }
.ptab tr:last-child td { border-bottom: 0; }
.ptab td:last-child { font-weight: 800; color: var(--ink); white-space: nowrap; }
.ptab tbody tr { transition: background .15s ease; }
.ptab tbody tr:hover { background: #faf8f2; }











/* ==========================================================================
   PROSJEKTER – enkelt bildegalleri (premium kort, ett foto)
   ========================================================================== */
.prosjekt { display: block; background: #fff; border: 1px solid var(--linje); border-radius: 14px;
  overflow: hidden; box-shadow: 0 8px 26px rgba(26,31,36,.07); text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease; }
.prosjekt:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26,31,36,.13); text-decoration: none; }

.prosjekt__foto { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e6e3db; }
.prosjekt__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prosjekt:hover .prosjekt__foto img { transform: scale(1.06); }
.prosjekt__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26,31,36,.28)); opacity: 0; transition: opacity .2s ease; }
.prosjekt:hover .prosjekt__foto::after { opacity: 1; }
.prosjekt__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8b8f86; font: 600 .9rem system-ui;
  background: repeating-linear-gradient(115deg,#dcdad2 0 14px,#e4e2da 14px 28px); }

.prosjekt__tekst { padding: 18px 20px; }
.prosjekt__tekst .lapp { display: inline-block; font: 700 .74rem system-ui; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rod-mork); background: rgba(201,87,71,.12); padding: 4px 11px; border-radius: 20px; margin-bottom: 9px; }
.prosjekt__tekst h3 { font-size: 1.08rem; margin: 0 0 .3rem; }
.prosjekt__tekst p { color: var(--tekst-svak); font-size: .9rem; margin: 0; }

/* Prosjekt-hovedbilde (single) */
.prosjekt-hovedbilde { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--skygge-sterk); }
.prosjekt-hovedbilde img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   OMTALER – mørk seksjon med rating-sammendrag (variant B)
   ========================================================================== */
.omtaler-mork { background: var(--ink); color: #fff; }
.omtaler__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 46px; align-items: center; }
.omtaler__rating .rating__tall { font: 800 4rem/1 var(--font); color: var(--rod); margin-top: 6px; }
.omtaler__rating .rating__stj { color: var(--rod); letter-spacing: 4px; font-size: 1.3rem; margin: 8px 0; }
.omtaler__rating .rating__sub { color: #a7aab0; }
.omtaler__google { display: inline-flex; align-items: center; gap: 8px; color: #c9c9c9; font: 600 .88rem system-ui; margin-top: 12px; text-decoration: none; }
.omtaler__google:hover { color: #fff; text-decoration: none; }
.omtaler__google b { color: #fff; }
.omtaler__google .stjerner-liten { color: var(--rod); }

.omtaler__kort { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.okort-mork { background: #22272d; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 22px; }
.okort-mork .stjerner { color: var(--rod); letter-spacing: 3px; margin-bottom: 8px; }
.okort-mork p { color: #dfe1e3; font-size: .95rem; font-style: italic; margin: 0 0 12px; }
.okort-mork__navn { font-weight: 800; color: #fff; }
.okort-mork__meta { color: #9a9d9f; font-size: .85rem; }

@media (max-width: 860px) {
  .omtaler__grid { grid-template-columns: 1fr; gap: 30px; }
  .omtaler__kort { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ – split med kontakt-CTA (variant C) + premium accordion
   ========================================================================== */










/* Trekkspill-stylingen lå her, bundet til .faq-liste. Flyttet til ett
   felles .fq-sett nederst i filen, så <details> ser likt ut uansett hvor
   den står – forside, Priser eller Kontakt. */



/* ==========================================================================
   KONTAKT – lys split + premium skjema
   ========================================================================== */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.kontakt-info__led { color: var(--tekst-svak); margin-bottom: 18px; }
.kontakt__tlf { display: inline-flex; align-items: center; gap: 12px; font: 800 1.7rem/1 var(--font);
  color: var(--ink); text-decoration: none; margin: 8px 0 14px; }
.kontakt__tlf svg { width: 26px; height: 26px; color: var(--rod); }
.kontakt__tlf:hover { text-decoration: none; color: var(--rod-mork); }
.kontakt__rad { display: flex; align-items: center; gap: 10px; color: var(--tekst-svak); margin-bottom: 6px; }
.kontakt__rad svg { width: 17px; height: 17px; color: var(--rod); flex: none; }
.kontakt__rad a { color: var(--tekst-svak); }
.kontakt__rad a:hover { color: var(--rod-mork); }

.kontakt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.kontakt-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(201,87,71,.1);
  border: 1px solid rgba(201,87,71,.28); color: var(--ink); padding: 7px 13px; border-radius: 30px; font: 600 .85rem system-ui; }
.kontakt-chip svg { width: 15px; height: 15px; color: var(--rod); flex: none; }

/* Skjema-kort */
.skjema-kort { background: #fff; border: 1px solid var(--linje); border-radius: 18px; padding: 30px;
  box-shadow: 0 22px 55px rgba(26,31,36,.12); }
.skjema-kort h3 { margin: 0 0 4px; }
.skjema-kort__under { color: var(--tekst-svak); font-size: .92rem; margin-bottom: 18px; }

/* Premium input-felt */
.skjema-rad { margin-bottom: 15px; }
.skjema label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; color: var(--ink); }
.skjema input[type=text], .skjema input[type=tel], .skjema input[type=email], .skjema select, .skjema textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--linje); border-radius: 10px; font-family: inherit;
  font-size: 1rem; background: #fdfcfa; color: var(--tekst); transition: border-color .15s ease, box-shadow .15s ease; }
.skjema input:focus, .skjema select:focus, .skjema textarea:focus {
  outline: none; border-color: var(--rod); box-shadow: 0 0 0 3px rgba(201,87,71,.16); background: #fff; }
.skjema .knapp { width: 100%; justify-content: center; margin-top: 6px; }
.valgfri { color: var(--tekst-svak); font-weight: 400; }

/* Fil-opplasting (custom «dropzone») */
.fil-opp { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 22px 16px; border: 1.5px dashed rgba(201,87,71,.5); border-radius: 12px;
  background: rgba(201,87,71,.05); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.fil-opp:hover { background: rgba(201,87,71,.1); border-color: var(--rod); }
.fil-opp input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fil-opp__ik { width: 26px; height: 26px; color: var(--rod); }
.fil-opp__tekst { font-weight: 700; color: var(--ink); font-size: .95rem; }
.fil-opp__hint { font-size: .82rem; color: var(--tekst-svak); }

@media (max-width: 860px) { .kontakt-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ==========================================================================
   FOOTER – CTA-band + 3 kolonner (variant B)
   ========================================================================== */
.ftband { background: var(--ink); }
.ftband__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 38px 0; }
.ftband h3 { color: #fff; font-size: 1.6rem; margin: 0; }
.ftband p { color: #a7aab0; margin: 6px 0 0; }
.ftband__knapper { display: flex; gap: 14px; flex-wrap: wrap; }

.ft { background: var(--ink-2); color: #a7aab0; font-size: .92rem; }
.ft__gulllinje { height: 3px; background: linear-gradient(90deg,#c94736,#c95747 45%,#e7786a); }
.ft a { color: #cfd1d3; text-decoration: none; }
.ft a:hover { color: #fff; }
.ft__logo { font: 800 1.4rem var(--font); color: #fff; letter-spacing: -.02em; }
.ft__logo b { color: var(--rod); }
.ft h4 { color: #fff; font-size: 1rem; margin: 0 0 14px; }
.ft ul { list-style: none; padding: 0; margin: 0; }
.ft li { margin-bottom: 8px; }
.ft__firma { line-height: 1.75; margin-top: 14px; }
.ft__firma strong { color: #e6e6e6; }
.ft__topp { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; padding: 48px 0 30px; }
.ft__ik { display: inline-flex; width: 16px; height: 16px; color: var(--rod); vertical-align: -3px; margin-right: 8px; }
.ft__ik svg { width: 16px; height: 16px; }
.ft__sos { display: flex; gap: 10px; margin-top: 16px; }
.ft__sos a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; color: #cfd1d3; }
.ft__sos a:hover { border-color: var(--rod); color: var(--rod); }
.ft__bunn { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.1); color: #80838a; font-size: .85rem; }

@media (max-width: 860px) {
  .ft__topp { grid-template-columns: 1fr 1fr; }
  .ftband__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) { .ft__topp { grid-template-columns: 1fr; } }

/* ==========================================================================
   ===================  REDESIGN: SHARP + ANIMERT  ==========================
   Barlow Condensed (display/UI) + Inter (brødtekst) – self-hosted (0 eksterne kall).
   Ingen runding. Animerte bakgrunnsfigurer. Overstyrer reglene over.
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlow-condensed-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'InterVar';src:url('assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

:root{
  --font:'InterVar',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-h:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --radius:0;
  --ink:#15181d;
  --ink-2:#0f1216;
  --ink-3:#1e232a;
  --rod-lys:#e7786a;
}

body{font-family:var(--font);font-weight:400;}

/* ---------- Typografi: skarp, kondensert – ikke tykk ---------- */
h1,h2,h3,h4,.logo,.ft__logo{font-family:var(--font-h);font-weight:700;letter-spacing:.002em;}
h1{font-size:clamp(2.5rem,5.2vw,4.1rem);line-height:1.03;}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:.004em;}
h3{font-size:1.25rem;line-height:1.2;}
.stikkord,.hero-v__merke{font-family:var(--font-h);font-weight:600;letter-spacing:.22em;}
.les,.lapp,.merkelapp,.kontakt-chip,.pk__omr{font-family:var(--font-h);}
.knapp,.nav .nav__btn{font-family:var(--font-h);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:.92rem;}
.nav>a,.nav .menu-item>a,.nav__tlf,.topp__it,.nav .sub-menu a{font-family:var(--font-h);font-weight:600;letter-spacing:.04em;font-size:1.04rem;}
.uknapp{font-family:var(--font-h);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}

.omtaler__rating .rating__tall,.kontakt__tlf,.tillit__tekst strong,.okort-mork__navn,.ft h4{font-family:var(--font-h);font-weight:700;}

/* ---------- SHARP: ingen runding noe sted ---------- */
.knapp,.nav .nav__btn,.kort,.kort__ikon,.prosjekt,.prosjekt__foto,.prosjekt-hovedbilde,
.okort-mork,.fq,.fq-ic,.skjema-kort,.ptab,.hero__kort,.fkort,.tillit__ik,
.hvorfor__ik,.skjema input,.skjema select,.skjema textarea,.fil-opp,.lapp,.kontakt-chip,.merkelapp,.steg__num,
.nav .sub-menu,.ft__sos a,.notis,.omtaler__kort .okort-mork{border-radius:0 !important;}

/* Ikon-rammer: skarp firkant + gull bracket-hjørne */
.kort__ikon,.tillit__ik{
  position:relative;background:transparent !important;border:1.5px solid var(--rod) !important;box-shadow:none !important;}
.kort__ikon::after,.tillit__ik::after{
  content:"";position:absolute;top:-4px;right:-4px;width:9px;height:9px;
  border-top:1.5px solid var(--rod);border-right:1.5px solid var(--rod);}

.tillit__ik svg,.kort__ikon svg{color:var(--rod);}

/* Knapper: skarpe med fyll-sveip */
.knapp{border:0;padding:16px 28px;position:relative;overflow:hidden;transition:none;}
.knapp--primar{background:var(--rod);color:var(--ink);box-shadow:none;}
.knapp--primar::after{content:"";position:absolute;inset:0;background:var(--rod-lys);transform:translateX(-101%);transition:transform .3s ease;z-index:0;}
.knapp--primar:hover::after{transform:translateX(0);}
.knapp--primar:hover{background:var(--rod);transform:none;box-shadow:none;}
.knapp--primar > *{position:relative;z-index:1;}
.knapp--tlf{background:transparent;border:1px solid var(--linje);color:var(--ink);}
.knapp--tlf:hover{border-color:var(--rod);color:var(--rod-mork);transform:none;}
.ftband .knapp--tlf,.hero-v .knapp--tlf{border-color:rgba(255,255,255,.3);color:#fff;}
.nav .nav__btn{box-shadow:none;padding:14px 24px;}
.nav .nav__btn:hover{transform:none;filter:none;background:var(--rod-lys);}

/* Lapper/chips: skarpe med gull venstrekant */
.lapp,.kontakt-chip,.merkelapp{border:1px solid var(--linje) !important;border-left:2px solid var(--rod) !important;
  background:#fff !important;color:var(--ink) !important;padding:6px 12px;font-weight:600;letter-spacing:.05em;}

/* Kort: skarpe, gull-linje løper inn ved hover */
.kort,.prosjekt,.okort-mork,.skjema-kort,.fq{box-shadow:none;}
.kort,.prosjekt{position:relative;border:1px solid var(--linje);transition:background .2s ease;}
.kort:hover,.prosjekt:hover{transform:none;box-shadow:none;background:#faf8f2;}
.kort::before,.prosjekt::before{content:"";position:absolute;top:0;left:0;width:0;height:3px;
  background:var(--rod);transition:width .35s ease;z-index:2;}
.kort:hover::before,.prosjekt:hover::before{width:100%;}
.skjema-kort{border:1px solid var(--linje);}


/* Skjema-felt: skarpe */
.skjema input,.skjema select,.skjema textarea{border:1px solid var(--linje);background:#fdfcfa;}
.skjema input:focus,.skjema select:focus,.skjema textarea:focus{border-color:var(--rod);box-shadow:0 0 0 2px rgba(201,87,71,.2);}
.fil-opp{border:1.5px dashed rgba(201,87,71,.5);}

/* Steg/tall */
.steg__num{border:1.5px solid var(--rod);background:transparent;color:var(--rod);}
@keyframes tp-mesh{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,2%) scale(1.15)}}
@keyframes tp-grid{to{background-position:56px 56px}}
@keyframes tp-d1{0%{transform:rotate(15deg) translateY(0)}100%{transform:rotate(28deg) translateY(30px)}}
@keyframes tp-d2{0%{transform:rotate(30deg) translate(0,0)}100%{transform:rotate(18deg) translate(24px,-20px)}}
@keyframes tp-sweep{0%{left:-50%}55%,100%{left:130%}}

/* Mørke seksjoner: subtile animerte figurer uten ekstra markup */
.hvorfor,.omtaler-mork,.ftband{position:relative;overflow:hidden;}
.hvorfor > .wrap,.omtaler-mork > .wrap,.ftband > .wrap{position:relative;z-index:3;}
.hvorfor::before,.omtaler-mork::before{content:"";position:absolute;inset:0;z-index:0;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 75% at 60% 50%,#000,transparent);mask-image:radial-gradient(75% 75% at 60% 50%,#000,transparent);
  animation:tp-grid 40s linear infinite;}
.hvorfor::after,.omtaler-mork::after{content:"";position:absolute;width:340px;height:340px;top:-110px;right:-90px;z-index:1;
  border:1.5px solid rgba(201,87,71,.2);animation:tp-d1 26s ease-in-out infinite alternate;}

@media (prefers-reduced-motion:reduce){
  .hvorfor::before,.hvorfor::after,.omtaler-mork::before,.omtaler-mork::after{animation:none !important;}
}
@keyframes tp-kenburns{0%{transform:scale(1)}100%{transform:scale(1.12)}}

/* Den gamle .heroX-mobilblokka lå her. Fjernet sammen med resten av .heroX –
   den satte padding og .heroX__trust, som ikke finnes lenger, og kolliderte
   med .hero-v__inn. Ny hero har sine egne brekkpunkter nederst i filen. */

/* ==========================================================================
   FIKSER + GRÅ SEKSJONER + MEGAMENY
   ========================================================================== */

/* --- 1) KNAPP: fyll uten overlay (tekst forsvant ved hover) --- */
.knapp--primar{
  background-color:var(--rod);
  background-image:linear-gradient(var(--rod-lys),var(--rod-lys));
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:left center;
  color:var(--ink) !important;
  transition:background-size .3s ease;
}
.knapp--primar::after{content:none !important;}
.knapp--primar:hover{background-size:100% 100%;color:var(--ink) !important;transform:none;}
.knapp--primar > *{position:static;z-index:auto;}

/* --- 2) GRÅ seksjoner (kun footer er sort) --- */
:root{
  --gra:#2b3138;     /* grå seksjonsbakgrunn */
  --gra-2:#343b43;   /* kort på grå */
}
.hvorfor{background:var(--gra);}
.omtaler-mork{background:var(--gra);}
.ftband{background:var(--gra);}

.side-hero{background:linear-gradient(160deg,var(--gra),#343b43);}
.okort-mork{background:var(--gra-2);border-color:rgba(255,255,255,.1);}
.nav{background:var(--gra);}                 /* mobilpanel */
@media (min-width:901px){ .nav{background:none;} }

/* Footer forblir sort */
.ft{background:var(--ink-2);}

/* --- 3) MEGAMENY --- */
.topp__main{position:relative;}
.nav .menu-item-has-children{position:static;}

.nav .mega-panel{
  position:absolute; top:100%; left:0; right:0; width:auto; min-width:0; margin-top:0;
  background:var(--ink-2); border-top:2px solid var(--rod); border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  display:grid; grid-template-columns:repeat(3,1fr) 1.05fr; gap:4px;
  padding:30px max(24px, calc((100% - 1280px)/2));
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:90;
}
.nav .menu-item-has-children:hover > .mega-panel{opacity:1;visibility:visible;transform:translateY(0);}
.nav .mega-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}

.nav .mega-panel .mega-it{display:block;}
.nav .mega-panel .mega-it > a{
  display:flex !important; align-items:flex-start; gap:14px; padding:16px !important;
  border:1px solid transparent; text-decoration:none; background:none;
  transition:background .18s ease, border-color .18s ease;}
.nav .mega-panel .mega-it > a:hover{background:rgba(255,255,255,.05);border-color:rgba(201,87,71,.4);}
.nav .mega-panel .mega-it > a::after,.nav .mega-panel .mega-it > a::before{display:none !important;}

.mega-ik{width:44px;height:44px;flex:none;border:1.5px solid var(--rod);display:flex;align-items:center;justify-content:center;position:relative;}
.mega-ik::after{content:"";position:absolute;top:-4px;right:-4px;width:8px;height:8px;
  border-top:1.5px solid var(--rod);border-right:1.5px solid var(--rod);}
.mega-ik svg{width:22px;height:22px;color:var(--rod);}
.mega-tx strong{display:block;color:#fff !important;font-family:var(--font-h);font-weight:700;font-size:1.08rem;letter-spacing:.02em;}
.mega-tx span{display:block;color:#9aa0a6 !important;font-family:var(--font);font-weight:400;font-size:.84rem;line-height:1.45;margin-top:3px;letter-spacing:0;text-transform:none;}

.nav .mega-panel .mega-cta{
  grid-column:4; grid-row:1 / -1; align-self:stretch;
  background:rgba(201,87,71,.08); border-left:2px solid var(--rod);
  padding:22px; display:flex; flex-direction:column; gap:10px;}
.nav .mega-panel .mega-cta strong{color:#fff;font-family:var(--font-h);font-weight:700;font-size:1.15rem;}
.nav .mega-panel .mega-cta p{color:#9aa0a6;font-family:var(--font);font-weight:400;font-size:.85rem;line-height:1.5;margin:0;letter-spacing:0;text-transform:none;}
.nav .mega-panel .mega-cta .knapp{align-self:flex-start;margin-top:2px;}
.nav .mega-panel .mega-cta__tlf{color:#fff !important;font-family:var(--font-h);font-weight:600;letter-spacing:.05em;
  text-decoration:none;border-bottom:1px solid var(--rod);align-self:flex-start;padding-bottom:2px;}

/* Mobil: megameny blir enkel liste */
@media (max-width:900px){
  .nav .menu-item-has-children{position:relative;}
  .nav .mega-panel{position:static;opacity:1;visibility:visible;transform:none;display:block;
    background:transparent;border:0;box-shadow:none;padding:0 0 0 12px;}
  .nav .mega-panel .mega-it > a{padding:10px 0 !important;}
  .mega-ik{width:34px;height:34px;}
  .mega-ik svg{width:18px;height:18px;}
  .mega-tx span{display:none;}
  .nav .mega-panel .mega-cta{display:none;}
}

/* ==========================================================================
   SEO-TEKSTSEKSJON (fyller desktop-bredden, intern lenking)
   ========================================================================== */
.seo-tekst__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:24px;}
.seo-tekst__kol h3{margin:26px 0 8px;font-size:1.32rem;color:var(--ink);}
.seo-tekst__kol h3:first-child{margin-top:0;}
.seo-tekst__kol p{color:var(--tekst-svak);margin-bottom:14px;line-height:1.75;}
.seo-tekst a{color:var(--rod-mork);font-weight:600;border-bottom:1px solid rgba(201,87,71,.4);}
.seo-tekst a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--rod);}

.seo-tekst__omrader{margin-top:38px;padding-top:28px;border-top:1px solid var(--linje);}
.seo-tekst__omrader h3{font-size:1.2rem;color:var(--ink);margin-bottom:4px;}
.omradeliste{list-style:none;padding:0;margin:14px 0 16px;display:flex;flex-wrap:wrap;gap:8px;}
.omradeliste li{border:1px solid var(--linje);border-left:2px solid var(--rod);padding:7px 15px;
  font-family:var(--font-h);font-weight:600;letter-spacing:.04em;color:var(--ink);background:#fff;}
.seo-tekst__note{color:var(--tekst-svak);font-size:.95rem;margin:0;}

@media (max-width:860px){ .seo-tekst__grid{grid-template-columns:1fr;gap:0;} }

/* ==========================================================================
   OMTALER – Trustpilot-aktig karusell
   ========================================================================== */
.omt__topp{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:24px;}
.omt__tit{flex:0 1 auto;}
.omt__tit h2{font-size:1.7rem;line-height:1.14;margin:10px 0 0;}
.omt__topp .omt__rating{margin-left:auto;}




.omt__rating{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-left:2px solid var(--rod);padding-left:16px;}
.omt__score{font-family:var(--font-h);font-weight:700;font-size:2.7rem;color:var(--rod);line-height:1;}
.omt__stjerner{color:var(--rod);letter-spacing:3px;font-size:1.25rem;}
.omt__antall{color:#9aa0a6;font-size:.92rem;font-family:var(--font);}
.omt__google{color:#cfd1d3;font-size:.92rem;font-family:var(--font);text-decoration:none;
  border-bottom:1px solid var(--rod);padding-bottom:1px;}
.omt__google:hover{color:#fff;text-decoration:none;}
.omt__google b{color:#fff;}

.omt__nav{display:flex;gap:10px;flex:none;}
.omt__pil{width:50px;height:50px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease,color .18s ease,background .18s ease;border-radius:0;}
.omt__pil:hover{border-color:var(--rod);color:var(--rod);background:rgba(201,87,71,.08);}
.omt__pil svg{width:20px;height:20px;}
.omt__pil[disabled]{opacity:.3;cursor:default;}
.omt__pil[disabled]:hover{border-color:rgba(255,255,255,.25);color:#fff;background:transparent;}

.omt__spor{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;cursor:grab;}
.omt__spor::-webkit-scrollbar{display:none;}
.omt__spor.drar{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.omt__spor:focus-visible{outline:2px solid var(--rod);outline-offset:4px;}
.omt__spor > .okort-mork{flex:0 0 clamp(268px,31%,380px);scroll-snap-align:start;
  display:flex;flex-direction:column;padding:26px;}
.omt__spor > .okort-mork p{flex:1;}

@media (max-width:860px){
  .omt__topp{flex-direction:column;align-items:flex-start;gap:20px;}
  .omt__nav{align-self:flex-end;}
  .omt__spor > .okort-mork{flex:0 0 84%;}
}
@media (prefers-reduced-motion:reduce){ .omt__spor{scroll-behavior:auto;} }

/* Fiks: overskrifter i mørke/grå seksjoner må være hvite */
.omtaler-mork h2,
.omtaler-mork h3,
.omtaler-mork h4,
.hero-v h2,
.hero-v h3,
.ftband h2,
.ftband h3 { color: #fff; }

/* ==========================================================================
   BAKGRUNNER – myke overganger i stedet for flate farger (premium dybde)
   Alt er subtilt: 4–8 % gull-glød + rolige gradienter.
   ========================================================================== */

body{ background:#fbfaf7; }

/* --- Lyse seksjoner: varm, rolig gradient + svak gull-glød --- */
.seksjon{
  background:
    radial-gradient(70% 60% at 88% 0%, rgba(201,87,71,.05) 0%, transparent 62%),
    linear-gradient(180deg,#ffffff 0%, #fcfbf8 100%);
}
.seksjon--lys{
  background:
    radial-gradient(65% 55% at 12% 0%, rgba(201,87,71,.07) 0%, transparent 60%),
    radial-gradient(60% 50% at 92% 100%, rgba(201,87,71,.05) 0%, transparent 60%),
    linear-gradient(180deg,#f7f5f0 0%, #efece4 100%);
}
.tillit-seksjon{
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(201,87,71,.05) 0%, transparent 65%),
    linear-gradient(180deg,#ffffff 0%, #fbfaf7 100%);
}
.seo-tekst{
  background:
    radial-gradient(55% 45% at 95% 8%, rgba(201,87,71,.06) 0%, transparent 60%),
    linear-gradient(180deg,#fcfbf8 0%, #f5f3ee 100%);
}

/* --- Grå/mørke seksjoner: dybde med rolig gradient --- */
.hvorfor{
  background:
    radial-gradient(50% 60% at 78% 12%, rgba(201,87,71,.10) 0%, transparent 62%),
    linear-gradient(165deg,#333940 0%, #2b3138 52%, #23282e 100%);
}
.omtaler-mork{
  background:
    radial-gradient(48% 55% at 12% 8%, rgba(201,87,71,.09) 0%, transparent 60%),
    linear-gradient(165deg,#2e343b 0%, #262c32 100%);
}
.ftband{
  background:
    radial-gradient(45% 90% at 88% 50%, rgba(201,87,71,.10) 0%, transparent 60%),
    linear-gradient(100deg,#262c32 0%, #333940 100%);
}
.side-hero{
  background:
    radial-gradient(55% 70% at 85% 0%, rgba(201,87,71,.10) 0%, transparent 62%),
    linear-gradient(165deg,#333940 0%, #262c32 100%);
}
.okort-mork{
  background:linear-gradient(160deg,#373e46 0%, #2f353c 100%);
}
.mega-panel{
  background:
    radial-gradient(40% 120% at 82% 0%, rgba(201,87,71,.08) 0%, transparent 62%),
    linear-gradient(180deg,#171b20 0%, #101418 100%) !important;
}

/* --- Footer: dypeste tone --- */
.ft{ background:linear-gradient(180deg,#14181d 0%, #0c0f13 100%); }

/* --- Myke overganger mellom lys og mørk seksjon (ingen hard kant) --- */
.hvorfor,.omtaler-mork,.ftband{ position:relative; }
.hvorfor > .wrap,.omtaler-mork > .wrap,.ftband > .wrap{ position:relative; z-index:3; }
.tillit-seksjon::after,
.seo-tekst::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,87,71,.35),transparent);
}
.tillit-seksjon,.seo-tekst{ position:relative; }

/* Kort på lys bakgrunn: ren hvit så de løfter seg fra gradienten */
.kort,.prosjekt,.skjema-kort,.ptab{ background:#fff; }
.kort:hover,.prosjekt:hover{ background:#fdfcfa; }
.hvorfor::before,
.omtaler-mork::before{ inset:-60px; animation:tp-grid-t 40s linear infinite; will-change:transform; }
@keyframes tp-grid-t{ to{ transform:translate(56px,56px); } }

/* Perf: hopp over rendering av tunge seksjoner utenfor viewport */
.seo-tekst,
.hvorfor{ content-visibility:auto; contain-intrinsic-size:auto 640px; }

/* Tilgjengelighet: tydelig fokus på alt interaktivt */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.fil-opp:focus-within{
  outline:2px solid var(--rod);
  outline-offset:3px;
}
.skjema input:focus-visible,
.skjema select:focus-visible,
.skjema textarea:focus-visible{ outline-offset:0; }

/* Telefon-ikon i knapper/mobil-CTA */
.knapp svg{ flex:none; }
.mobil-cta a{ display:flex; align-items:center; justify-content:center; gap:8px; }
.mobil-cta svg{ flex:none; }
.mobil-cta__ring svg{ color:var(--rod); }

/* Reduser bevegelse: slå av alt tungt */
@media (prefers-reduced-motion:reduce){
  .hvorfor::before,.omtaler-mork::before{ animation:none !important; }
}

/* ==========================================================================
   MEGAMENY – FIKS: fjern de store tomrommene
   Årsak: CTA spente over 2 rader (grid-row:1/-1). Grid fordelte CTA-høyden
   på begge radene → tjenestene ble dratt fra hverandre.
   Løsning: CTA blir en horisontal stripe nederst; tjenestene pakkes tett.
   ========================================================================== */
.nav .mega-panel{
  grid-template-columns:repeat(3,1fr);
  gap:2px 10px;
  align-content:start;
  grid-auto-rows:min-content;
  padding:24px max(24px, calc((100% - 1280px)/2)) 22px;
}

.nav .mega-panel .mega-it > a{
  padding:13px 14px !important;
  align-items:center;
}
.mega-ik{width:40px;height:40px;}
.mega-ik svg{width:20px;height:20px;}
.mega-tx strong{font-size:1.02rem;line-height:1.15;}
.mega-tx span{font-size:.82rem;line-height:1.4;margin-top:2px;}

/* CTA: full bredde nederst, horisontal */
.nav .mega-panel .mega-cta{
  grid-column:1 / -1;
  grid-row:auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:16px 18px;
  border-left:2px solid var(--rod);
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(201,87,71,.07);
}
.nav .mega-panel .mega-cta strong{flex:0 0 auto;font-size:1.05rem;}
.nav .mega-panel .mega-cta p{flex:1 1 300px;margin:0;font-size:.85rem;}
.nav .mega-panel .mega-cta .knapp{flex:none;margin-left:auto;margin-top:0;align-self:center;padding:12px 22px;}
.nav .mega-panel .mega-cta__tlf{flex:none;align-self:center;}

@media (max-width:1100px){
  .nav .mega-panel{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .nav .mega-panel{display:block;padding:0 0 0 12px;}
  .nav .mega-panel .mega-cta{display:none;}
}

/* ==========================================================================
   KNAPP-FIKS: hover virket «baklengs»
   Årsak: en tidligere regel .knapp--primar:hover{background:var(--rod)} brukte
   background-SHORTHAND, som nullstiller background-image ved hover → fyllet
   forsvant. Ved mouse-out kom bildet tilbake og man så animasjonen motsatt vei.
   Løsning: sett background-image eksplisitt i BEGGE tilstander; kun size endres.
   ========================================================================== */
/* NB: rødt snur logikken fra gullet.
   Gull er lyst – der var mørk tekst riktig, og hover LYSNET flaten.
   Rødt er mørkt – her må teksten være hvit, og da må hover MØRKNE.
   Lysnet den, ville hvit tekst falt under kravet (4.5:1) midt i animasjonen. */
.knapp--primar,
.knapp--primar:hover,
.knapp--primar:focus-visible{
  background-color:var(--rod-mork);                            /* hvit tekst = 4.73:1 */
  background-image:linear-gradient(var(--rod-dyp),var(--rod-dyp)); /* hover = 6.18:1 */
  background-repeat:no-repeat;
  background-position:left center;
  color:#fff !important;
  box-shadow:none;
}
.knapp--primar{
  background-size:0% 100%;
  transition:background-size .32s ease;
}
.knapp--primar:hover,
.knapp--primar:focus-visible{ background-size:100% 100%; }
.knapp--primar::after,
.knapp--primar::before{ content:none !important; }

/* ==========================================================================
   MEGAMENY-FIKS: nøytraliser arv fra dropdown-reglene
   Årsak: .nav .sub-menu a:hover{background:var(--bla-lys)} (0,3,1) slår
   .knapp--primar:hover (0,2,0) → knapp/telefon fikk lys bakgrunn med hvit
   tekst i megamenyen (usynlig tekst).
   ========================================================================== */
.nav .mega-panel a,
.nav .mega-panel a:hover{ background:transparent; }

/* Tjeneste-punkt: kun svak hvit tone ved hover */
.nav .mega-panel .mega-it > a:hover{ background:rgba(255,255,255,.05); }

/* Rød knapp i megamenyen: samme fyll-oppførsel som ellers.
   Egen regel fordi .nav .mega-panel (0,3,0) slår den generelle .knapp--primar
   (0,1,0) – fikser man bare den generelle, blir denne stående med mørk tekst. */
.nav .mega-panel .knapp--primar,
.nav .mega-panel .knapp--primar:hover{
  background-color:var(--rod-mork);
  background-image:linear-gradient(var(--rod-dyp),var(--rod-dyp));
  background-repeat:no-repeat;
  background-position:left center;
  color:#fff !important;
}
.nav .mega-panel .knapp--primar{ background-size:0% 100%; transition:background-size .32s ease; }
.nav .mega-panel .knapp--primar:hover{ background-size:100% 100%; }

/* Telefon-lenke: aldri lys bakgrunn – gull tekst ved hover */
.nav .mega-panel .mega-cta__tlf,
.nav .mega-panel .mega-cta__tlf:hover{ background:transparent !important; }
.nav .mega-panel .mega-cta__tlf:hover{ color:var(--rod) !important; border-bottom-color:var(--rod); }

/* ==========================================================================
   SIDE-HERO (undersider) – samme språk som forsidens hero: animerte figurer
   ========================================================================== */
.side-hero{ position:relative; overflow:hidden; isolation:isolate; }
.side-hero > .wrap{ position:relative; z-index:3; }

/* Animert raster */
.side-hero::before{
  content:""; position:absolute; inset:-60px; z-index:0; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 80% at 65% 50%,#000,transparent);
  mask-image:radial-gradient(70% 80% at 65% 50%,#000,transparent);
  animation:tp-grid-t 40s linear infinite; will-change:transform;
}
/* Drivende gull-firkant */
.side-hero::after{
  content:""; position:absolute; z-index:1;
  width:300px; height:300px; top:-100px; right:-70px;
  border:1.5px solid rgba(201,87,71,.22);
  animation:tp-d1 26s ease-in-out infinite alternate;
}

/* Typografi */
.side-hero{ padding-bottom:60px; }
.side-hero h1{ color:#fff; max-width:20ch; margin-bottom:10px; }
.side-hero p{ color:#c0c5cb; font-family:var(--font); font-size:1.06rem; line-height:1.7; max-width:62ch; }
.brodsmule{ font-family:var(--font-h); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:.76rem; color:#9aa0a6; margin-bottom:14px; }
.brodsmule a{ color:var(--rod); text-decoration:none; }
.brodsmule a:hover{ color:var(--rod-lys); text-decoration:none; }

/* Gull-hårstrek nederst – myk overgang til innholdet */
.side-hero{ border-bottom:1px solid rgba(201,87,71,.28); }

/* Innhold på tjenestesider: rolig, lesbar editorial-setting */
.tett{ max-width:820px; }
.tett h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:1.8em 0 .5em; }
.tett h2:first-child{ margin-top:0; }
.tett h3{ font-size:1.25rem; margin:1.5em 0 .4em; }
.tett p, .tett li{ color:var(--tekst-svak); line-height:1.8; }
.tett ul, .tett ol{ padding-left:1.2em; margin-bottom:1.2em; }
.tett li{ margin-bottom:8px; }
.tett a{ color:var(--rod-mork); font-weight:600; border-bottom:1px solid rgba(201,87,71,.4); }
.tett a:hover{ color:var(--ink); text-decoration:none; border-bottom-color:var(--rod); }
.tett table{ width:100%; border-collapse:collapse; margin:1.2em 0; background:#fff; border:1px solid var(--linje); }
.tett th{ background:var(--ink); color:#fff; text-align:left; padding:14px 18px; font-family:var(--font-h); font-weight:600; letter-spacing:.04em; }
.tett td{ padding:14px 18px; border-bottom:1px solid var(--linje); }
.tett tr:last-child td{ border-bottom:0; }

@media (max-width:860px){ .side-hero::after{ width:180px; height:180px; } }
@media (prefers-reduced-motion:reduce){ .side-hero::before,.side-hero::after{ animation:none !important; } }

/* ==========================================================================
   SEKUNDÆRKNAPP (.knapp--tlf) – var nesten ustylet (bare tynn grå kant).
   Nå: skarp grafitt-kontur som fylles ved hover – samme sweep-logikk som
   gullknappen, men mørk. Tydelig hierarki: gull = primær, grafitt = sekundær.
   ========================================================================== */
.knapp--tlf{
  background-color:transparent;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  border:1.5px solid var(--ink);
  color:var(--ink);
  transition:background-size .32s ease, color .2s ease, border-color .2s ease;
}
.knapp--tlf:hover,
.knapp--tlf:focus-visible{
  background-size:100% 100%;
  color:#fff;
  border-color:var(--ink);
  transform:none;
}
.knapp--tlf svg{ transition:color .2s ease; }
.knapp--tlf:hover svg{ color:var(--rod); }

/* På mørk/grå bakgrunn: hvit kontur som fylles hvitt, tekst blir grafitt */
.ftband .knapp--tlf,
.hero-v .knapp--tlf,
.side-hero .knapp--tlf,
.hvorfor .knapp--tlf,
.omtaler-mork .knapp--tlf{
  border-color:rgba(255,255,255,.4);
  color:#fff;
  background-image:linear-gradient(#fff,#fff);
}
.ftband .knapp--tlf:hover,
.hero-v .knapp--tlf:hover,
.side-hero .knapp--tlf:hover,
.hvorfor .knapp--tlf:hover,
.omtaler-mork .knapp--tlf:hover{
  color:var(--ink);
  border-color:#fff;
}
.ftband .knapp--tlf:hover svg,
.hero-v .knapp--tlf:hover svg,
.side-hero .knapp--tlf:hover svg{ color:var(--rod-mork); }

/* ==========================================================================
   TJENESTESIDER – innhold + sticky sidekolonne (fyller desktop, CTA alltid synlig)
   ========================================================================== */
.tjeneste-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:52px; align-items:start; }
.tjeneste-innhold{ min-width:0; max-width:none; }

/* Arv typografien fra .tett uten å kopiere den */
.tjeneste-innhold h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:1.8em 0 .5em; }
.tjeneste-innhold h2:first-child{ margin-top:0; }
.tjeneste-innhold h3{ font-size:1.25rem; margin:1.5em 0 .4em; }
.tjeneste-innhold p, .tjeneste-innhold li{ color:var(--tekst-svak); line-height:1.8; }
.tjeneste-innhold ul, .tjeneste-innhold ol{ padding-left:1.2em; margin-bottom:1.2em; }
.tjeneste-innhold li{ margin-bottom:8px; }
.tjeneste-innhold strong{ color:var(--ink); }
.tjeneste-innhold a{ color:var(--rod-mork); font-weight:600; border-bottom:1px solid rgba(201,87,71,.4); }
.tjeneste-innhold a:hover{ color:var(--ink); text-decoration:none; border-bottom-color:var(--rod); }

/* Sticky CTA-kort */
.tjeneste-side{ position:sticky; top:104px; }
.tj-kort{
  background:radial-gradient(70% 60% at 88% 6%, rgba(201,87,71,.13) 0%, transparent 62%),
             linear-gradient(160deg,#333940 0%, #262c32 100%);
  border-left:2px solid var(--rod); padding:28px 26px; color:#fff;
}
.tj-kort__overline{ display:block; font-family:var(--font-h); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; font-size:.72rem; color:var(--rod); margin-bottom:8px; }
.tj-kort h3{ color:#fff; font-size:1.35rem; margin:0 0 10px; line-height:1.2; }
.tj-kort p{ color:#a7aab0; font-family:var(--font); font-size:.92rem; line-height:1.6; margin:0 0 18px; }
.tj-kort .knapp{ width:100%; justify-content:center; }

.tj-kort__tlf{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px;
  color:#fff; text-decoration:none; font-family:var(--font-h); font-weight:600; letter-spacing:.05em; font-size:1.1rem;
  padding:11px; border:1px solid rgba(255,255,255,.22); transition:border-color .2s ease, color .2s ease; }
.tj-kort__tlf svg{ color:var(--rod); }
.tj-kort__tlf:hover{ border-color:var(--rod); color:var(--rod); text-decoration:none; }
.tj-kort__tlf:hover svg{ color:var(--rod); }

.tj-kort__punkter{ list-style:none; padding:0; margin:20px 0 0; }
.tj-kort__punkter li{ display:flex; align-items:center; gap:9px; padding:6px 0;
  color:#c8cbcd; font-family:var(--font); font-size:.9rem; }
.tj-kort__punkter svg{ width:15px; height:15px; color:var(--rod); flex:none; }

.tj-kort__omrade{ display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12); color:#9aa0a6; font-family:var(--font); font-size:.85rem; }
.tj-kort__omrade svg{ color:var(--rod); flex:none; }

@media (max-width:960px){
  .tjeneste-layout{ grid-template-columns:1fr; gap:34px; }
  .tjeneste-side{ position:static; }
  .tj-kort{ max-width:520px; }
}

/* ==========================================================================
   REGNEEKSEMPLER (prissiden) – viser hvordan et tilbud settes sammen
   ========================================================================== */
.pris-eks{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; align-items:start; }
.pris-eks__kort{ background:#fff; border:1px solid var(--linje); border-top:3px solid var(--rod);
  padding:30px 28px; display:flex; flex-direction:column; }
.pris-eks__kort h3{ font-size:1.35rem; margin:10px 0 14px; }

.pris-eks__fakta{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:6px; }
.pris-eks__fakta li{ font-family:var(--font-h); font-weight:600; font-size:.82rem; letter-spacing:.04em;
  color:var(--tekst-svak); border:1px solid var(--linje); padding:5px 11px; }

.pris-eks__tabell{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.pris-eks__tabell td{ padding:9px 0; border-bottom:1px solid var(--linje); font-size:.92rem; color:var(--tekst-svak); }
.pris-eks__tabell td:last-child{ text-align:right; font-family:var(--font-h); font-weight:600;
  color:var(--rod-mork); white-space:nowrap; }
.pris-eks__tabell tr:last-child td{ border-bottom:0; }

.pris-eks__sum{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--ink); color:#fff; padding:16px 18px; margin-bottom:8px; }
.pris-eks__sum span{ font-family:var(--font-h); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.78rem; color:#a7aab0; }
.pris-eks__sum strong{ font-family:var(--font-h); font-weight:700; font-size:1.7rem; color:var(--rod); }

.pris-eks__note{ color:var(--tekst-svak); font-size:.84rem; margin:0 0 18px; }
.pris-eks__kort .knapp{ margin-top:auto; justify-content:center; }

.pris-eks__disclaimer{ margin-top:26px; padding:18px 20px; background:#fff; border-left:3px solid var(--rod);
  color:var(--tekst-svak); font-size:.92rem; line-height:1.7; }
.pris-eks__disclaimer strong{ color:var(--ink); }

@media (max-width:860px){ .pris-eks{ grid-template-columns:1fr; } }

/* ==========================================================================
   DOKUMENT-MALEN – systemet for UNDERSIDER
   Skiller seg bevisst fra forsiden: lys sidetopp (ingen mørk hero),
   sticky innholdsfortegnelse, nummererte seksjoner, sticky CTA.
   ========================================================================== */

/* --- Lys sidetopp --- */
.dh{ background:#fff; border-bottom:1px solid var(--linje); padding:132px 0 40px; position:relative; }
.dh::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--rod) 0,var(--rod) 90px,transparent 90px); }
.dh__sti{ font:600 .74rem var(--font-h); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tekst-svak); margin-bottom:18px; }
.dh__sti a{ color:var(--rod-mork); text-decoration:none; }
.dh__sti a:hover{ color:var(--ink); text-decoration:none; }
.dh h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); color:var(--ink); max-width:18ch; margin-bottom:14px; }
.dh__ing{ color:var(--tekst-svak); font-size:1.12rem; line-height:1.7; max-width:62ch; margin:0; }

.dh__meta{ display:flex; gap:0; flex-wrap:wrap; margin-top:28px; padding-top:22px; border-top:1px solid var(--linje); }
.dh__meta div{ padding-right:30px; margin-right:30px; border-right:1px solid var(--linje); }
.dh__meta div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.dh__meta span{ display:block; font:600 .7rem var(--font-h); letter-spacing:.14em;
  text-transform:uppercase; color:var(--tekst-svak); margin-bottom:2px; }
.dh__meta strong{ font:700 1.15rem var(--font-h); color:var(--ink); }

/* --- 404: samme .dh-topp, med stor bakgrunnskode --- */
.dh--404{ overflow:hidden; }
.dh--404 h1, .dh--404 .dh__ing, .dh--404 .dh__sti{ position:relative; z-index:1; }
.dh404__kode{ position:absolute; top:50%; right:-2%; transform:translateY(-50%);
  font:800 clamp(9rem,26vw,20rem) var(--font-h); line-height:1; letter-spacing:-.04em;
  color:var(--rod); opacity:.06; pointer-events:none; z-index:0; }

.sfeil{ padding-block:52px 72px; }
.sfeil__inn{ max-width:760px; }
.sfeil__blokk{ margin-bottom:44px; }
.sfeil__blokk > h2{ font-size:1.5rem; color:var(--ink); margin:0 0 18px;
  padding-bottom:12px; border-bottom:1px solid var(--linje); }

.sfeil__kort{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.sfeil__kort-el{ display:block; padding:18px 20px; background:#fff; text-decoration:none;
  border:1px solid var(--linje); border-radius:2px; transition:border-color .2s ease, transform .2s ease; }
.sfeil__kort-el:hover{ border-color:var(--rod); transform:translateY(-2px); text-decoration:none; }
.sfeil__kort-el strong{ display:block; font:700 1.08rem var(--font-h); color:var(--ink); margin-bottom:4px; }
.sfeil__kort-el span{ display:block; color:var(--tekst-svak); font-size:.92rem; line-height:1.5; }

.sfeil__tjen{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 28px; }
.sfeil__tjen li{ border-bottom:1px solid var(--linje); }
.sfeil__tjen a{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:14px 2px; text-decoration:none; transition:padding-left .2s ease; }
.sfeil__tjen a:hover{ padding-left:8px; text-decoration:none; }
.sfeil__tjen strong{ font:700 1rem var(--font-h); color:var(--rod-mork); }
.sfeil__tjen a:hover strong{ color:var(--ink); }
.sfeil__tjen em{ font-style:normal; font-size:.82rem; color:var(--tekst-svak); text-align:right; }

.sfeil__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px;
  padding-top:36px; border-top:1px solid var(--linje); }

/* --- Søkeskjema (searchform.php) --- */
.sok__label{ display:block; font:600 .7rem var(--font-h); letter-spacing:.14em;
  text-transform:uppercase; color:var(--tekst-svak); margin-bottom:10px; }
.sok__rad{ display:flex; gap:10px; max-width:440px; }
.sok__felt{ flex:1; min-width:0; padding:12px 14px; font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--linje); border-radius:2px; transition:border-color .2s ease; }
.sok__felt:focus{ outline:none; border-color:var(--rod); box-shadow:0 0 0 3px rgba(201,87,71,.14); }
.sok__felt::placeholder{ color:var(--tekst-svak); opacity:.7; }
.sok__knapp{ display:inline-flex; align-items:center; gap:7px; padding:12px 18px;
  font:700 .95rem var(--font-h); letter-spacing:.02em; color:#fff; background:var(--ink);
  border:0; border-radius:2px; cursor:pointer; transition:background-color .2s ease; }
.sok__knapp:hover{ background:var(--rod-mork); }
@media (prefers-reduced-motion:reduce){ .sok__felt, .sok__knapp{ transition:none; } }

@media (prefers-reduced-motion:reduce){
  .sfeil__kort-el, .sfeil__tjen a{ transition:none; }
  .sfeil__kort-el:hover{ transform:none; }
  .sfeil__tjen a:hover{ padding-left:2px; }
}

/* --- Dokument-layout --- */
/* NB: .dok settes på samme element som .wrap (class="wrap dok").
   Bruk padding-block – padding-shorthand her nullstiller .wrap sin
   sidepadding på 20px, og teksten klistrer seg til skjermkanten i mobil. */
.dok{ display:grid; grid-template-columns:220px minmax(0,1fr) 300px; gap:52px; align-items:start;
  padding-block:56px 72px; }

.toc{ position:sticky; top:104px; }
.toc__tit{ font:600 .7rem var(--font-h); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tekst-svak); margin-bottom:14px; }
.toc ol{ list-style:none; padding:0; margin:0; counter-reset:t; }
.toc li{ counter-increment:t; border-left:1px solid var(--linje); transition:border-color .2s ease; }
.toc li.aktiv{ border-left-color:var(--rod); }
.toc a{ display:block; padding:9px 0 9px 14px; color:var(--tekst-svak); text-decoration:none;
  font-size:.9rem; line-height:1.4; transition:color .2s ease; }
.toc a::before{ content:counter(t,decimal-leading-zero); font:700 .68rem var(--font-h);
  color:var(--rod); margin-right:8px; }
.toc li.aktiv a, .toc a:hover{ color:var(--ink); text-decoration:none; }

/* --- Nummererte seksjoner (teller i CSS – ingen ekstra markup) --- */
.dok__inn{ counter-reset:sek; min-width:0; }
.dok__inn > h2{ counter-increment:sek; font-size:1.75rem; color:var(--ink);
  padding-top:38px; margin:38px 0 .5em; border-top:1px solid var(--linje); scroll-margin-top:110px; }
.dok__inn > h2:first-child{ padding-top:0; margin-top:0; border-top:0; }
.dok__inn > h2::before{ content:counter(sek,decimal-leading-zero); display:block;
  font:700 .72rem var(--font-h); letter-spacing:.18em; color:var(--rod); margin-bottom:8px; }
.dok__inn > h3{ font-size:1.2rem; margin:1.5em 0 .4em; color:var(--ink); }
.dok__inn p, .dok__inn li{ color:var(--tekst-svak); line-height:1.85; }
.dok__inn ul, .dok__inn ol{ padding-left:1.1em; margin:1em 0; }
.dok__inn li{ margin-bottom:7px; }
.dok__inn strong{ color:var(--ink); }
.dok__inn a{ color:var(--rod-mork); font-weight:600; border-bottom:1px solid rgba(201,87,71,.4); }
.dok__inn a:hover{ color:var(--ink); text-decoration:none; border-bottom-color:var(--rod); }

/* Definisjonsliste – dokument-følelse i stedet for kort.
   NB: ikke bundet til .dok__inn. Var den det, falt en <dl class="dl"> utenfor
   dokumentmalen rett ned på nettleserens standard dt/dd med innrykk – uten at
   noe så ut som en feil i koden. Samme felle som .faq-liste .fq hadde. */
.dl{ margin:1.2em 0; border-top:1px solid var(--linje); }
.dl__rad{ display:grid; grid-template-columns:190px 1fr; gap:20px; padding:14px 0;
  border-bottom:1px solid var(--linje); }
.dl__rad dt{ font:600 .95rem var(--font-h); color:var(--ink); letter-spacing:.02em; }
.dl__rad dd{ margin:0; color:var(--tekst-svak); font-size:.94rem; line-height:1.65; }

/* .uthev lå her – ubrukt i alle maler. Fjernet. Rollen dekkes av .inline-cta. */

/* --- Sticky CTA --- */
.aside-cta{ position:sticky; top:104px; border:1px solid var(--linje); border-top:2px solid var(--rod);
  background:#fff; padding:24px; }
.aside-cta h3{ font-size:1.15rem; margin:0 0 8px; }
.aside-cta p{ color:var(--tekst-svak); font-size:.9rem; line-height:1.6; margin:0 0 16px; }
.aside-cta .knapp{ width:100%; justify-content:center; }
.aside-cta__tlf{ margin-top:10px; }
.aside-cta__punkter{ list-style:none; padding:0; margin:18px 0 0; }
.aside-cta__punkter li{ position:relative; padding:6px 0 6px 18px; color:var(--tekst-svak); font-size:.86rem; }
.aside-cta__punkter li::before{ content:""; position:absolute; left:0; top:14px; width:7px; height:1px; background:var(--rod); }

@media (max-width:1180px){
  .dok{ grid-template-columns:minmax(0,1fr) 280px; gap:40px; }
  .toc{ display:none; }
}
@media (max-width:900px){
  .dh{ padding-top:120px; }
  .dok{ grid-template-columns:1fr; gap:34px; padding-bottom:50px; }
  .aside-cta{ position:static; max-width:520px; }
  .dl__rad{ grid-template-columns:1fr; gap:3px; }
  .dh__meta div{ padding-right:20px; margin-right:20px; }
}

/* ==========================================================================
   INNHOLDSKOMPONENTER for undersider (dokument-malen)
   Info-kort, tallblokker, notiser, sammenligning, regneeksempler, områder.
   ========================================================================== */

/* Bred variant: kun innholdsfortegnelse + innhold (ingen sidekolonne) */
.dok--bred{ grid-template-columns:220px minmax(0,1fr); }

/* --- Tallblokker --- */
.stat-rad{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:1.6em 0;
  border:1px solid var(--linje); background:#fff; }
.stat{ padding:20px 22px; border-right:1px solid var(--linje); }
.stat:last-child{ border-right:0; }
.stat strong{ display:block; font:700 1.5rem/1 var(--font-h); color:var(--rod-mork); }
.stat span{ display:block; margin-top:5px; font-size:.84rem; color:var(--tekst-svak); line-height:1.4; }

/* --- Info-kort --- */
.info-kort{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:1.4em 0; border:1px solid var(--linje); background:#fff; }
.info-kort--3{ grid-template-columns:repeat(3,1fr); }
.info-kort .ik{ padding:22px 24px; border-right:1px solid var(--linje); border-bottom:1px solid var(--linje); }
.info-kort .ik strong{ display:block; font:700 1.05rem var(--font-h); color:var(--ink); margin-bottom:5px; }
.info-kort .ik span{ display:block; font-size:.9rem; color:var(--tekst-svak); line-height:1.6; }
.info-kort .ik::before{ content:""; display:block; width:22px; height:2px; background:var(--rod); margin-bottom:12px; }
.info-kort--3 .ik:nth-child(3n){ border-right:0; }
.info-kort--3 .ik:nth-last-child(-n+3){ border-bottom:0; }
.info-kort:not(.info-kort--3) .ik:nth-child(2n){ border-right:0; }
.info-kort:not(.info-kort--3) .ik:nth-last-child(-n+2){ border-bottom:0; }

/* --- Notis-boks --- */
.notis-boks{ background:#fff; border:1px solid var(--linje); border-left:3px solid var(--rod);
  padding:20px 24px; margin:1.4em 0; }
.notis-boks strong{ display:block; font:700 1.05rem var(--font-h); color:var(--ink); margin-bottom:5px; }
.notis-boks p{ margin:0; font-size:.94rem; }
.notis-boks--advarsel{ border-left-color:var(--ink); background:#faf8f2; }

/* --- Sammenligning --- */
.vs-rad{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:1.5em 0; border:1px solid var(--linje); }
.vs-kort{ padding:26px 24px; background:#fff; border-right:1px solid var(--linje); }
.vs-kort:last-child{ border-right:0; }
.vs-kort > span{ display:block; font:600 .72rem var(--font-h); letter-spacing:.14em; text-transform:uppercase; color:var(--tekst-svak); }
.vs-kort > strong{ display:block; font:700 1.7rem/1.1 var(--font-h); color:var(--ink); margin:8px 0 10px; }
.vs-kort p{ margin:0; font-size:.9rem; }
.vs-kort--rod{ background:radial-gradient(70% 80% at 85% 8%, rgba(201,87,71,.1) 0, transparent 62%), #fff;
  border-top:3px solid var(--rod); margin-top:-1px; }
.vs-kort--rod > strong{ color:var(--rod-mork); }

/* --- Regneeksempler --- */
.eks-rad{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:1.5em 0; }
.eks{ background:#fff; border:1px solid var(--linje); border-top:3px solid var(--rod); padding:26px 24px; }
.eks__type{ display:inline-block; font:600 .72rem var(--font-h); letter-spacing:.1em; text-transform:uppercase;
  color:var(--rod-mork); border:1px solid var(--linje); border-left:2px solid var(--rod); padding:4px 10px; }
.eks h3{ font-size:1.2rem; margin:12px 0 12px; }
.eks__fakta{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:6px; }
.eks__fakta li{ font:600 .78rem var(--font-h); letter-spacing:.03em; color:var(--tekst-svak);
  border:1px solid var(--linje); padding:4px 9px; margin:0; }
.eks__tab{ width:100%; border-collapse:collapse; margin-bottom:16px; }
.eks__tab td{ padding:8px 0; border-bottom:1px solid var(--linje); font-size:.9rem; color:var(--tekst-svak); }
.eks__tab td:last-child{ text-align:right; font:600 .88rem var(--font-h); color:var(--rod-mork); white-space:nowrap; }
.eks__tab tr:last-child td{ border-bottom:0; }
.eks__sum{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  background:var(--ink); padding:14px 18px; }
.eks__sum span{ font:600 .72rem var(--font-h); letter-spacing:.1em; text-transform:uppercase; color:#a7aab0; }
.eks__sum strong{ font:700 1.5rem var(--font-h); color:var(--rod); }

/* --- Områder --- */
.omr-rad{ display:flex; flex-wrap:wrap; gap:8px; margin:1.2em 0; }
.omr-rad span{ font:600 .86rem var(--font-h); letter-spacing:.04em; color:var(--ink);
  background:#fff; border:1px solid var(--linje); border-left:2px solid var(--rod); padding:7px 14px; }

/* --- Inline CTA midt i teksten --- */
.inline-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:radial-gradient(60% 80% at 88% 10%, rgba(201,87,71,.13) 0, transparent 62%),
             linear-gradient(160deg,#333940,#262c32);
  border-left:2px solid var(--rod); padding:26px 28px; margin:2.4em 0; }
.inline-cta strong{ display:block; font:700 1.25rem var(--font-h); color:#fff; }
.inline-cta p{ margin:5px 0 0; color:#a7aab0; font-size:.92rem; }
.inline-cta__knapper{ display:flex; gap:12px; flex-wrap:wrap; }
.inline-cta .knapp--tlf{ border-color:rgba(255,255,255,.4); color:#fff;
  background-image:linear-gradient(#fff,#fff); }
.inline-cta .knapp--tlf:hover{ color:var(--ink); border-color:#fff; }

@media (max-width:1180px){ .dok--bred{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:860px){
  .stat-rad{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--linje); }
  .info-kort, .info-kort--3, .vs-rad, .eks-rad{ grid-template-columns:1fr; }
  .info-kort .ik, .vs-kort{ border-right:0; border-bottom:1px solid var(--linje); }
  .info-kort .ik:last-child, .vs-kort:last-child{ border-bottom:0; }
  .inline-cta{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   MOBIL-FIKSER
   1) Mobilmenyen kunne bli synlig uten å åpnes (kun transform skjulte den).
   2) Horisontal scroll: tabeller med white-space:nowrap sprengte skjermen.
   ========================================================================== */

/* Sikkerhetsnett mot horisontal scroll. «clip» (ikke hidden) – bryter ikke sticky. */
html{ overflow-x:clip; }

@media (max-width:900px){
  /* Menyen skal ALDRI vises før .apen settes – to lag med skjuling */
  .nav{ transform:translateX(100%); visibility:hidden; }
  .nav.apen{ transform:translateX(0); visibility:visible; }
}

@media (max-width:700px){
  /* Tabeller: la innholdet brytes i stedet for å tvinge bredde */
  .dok__inn table, .ptab, .eks__tab{ width:100%; table-layout:fixed; }
  .ptab th, .ptab td{ padding:10px 12px; font-size:.86rem; overflow-wrap:anywhere; }
  .ptab td:last-child, .eks__tab td:last-child{ white-space:normal; }
  .eks__tab td{ font-size:.85rem; overflow-wrap:anywhere; }

  /* Knapper skal aldri stikke utenfor skjermen */
  .knapp{ max-width:100%; }
  .ftband__knapper, .inline-cta__knapper{ width:100%; }
  .ftband__knapper .knapp, .inline-cta__knapper .knapp{ flex:1 1 100%; justify-content:center; }
  .hero-v__knapper{ max-width:100%; }

  /* Nøkkeltall-stripen: la den brytes pent */
  .dh__meta div{ padding-right:16px; margin-right:16px; margin-bottom:10px; }

  /* Lange ord/URL-er skal ikke sprenge kolonnen */
  .dok__inn p, .dok__inn li, .dok__inn dd{ overflow-wrap:break-word; }
}

/* ==========================================================================
   MOBILMENY – ÉN autoritativ blokk (må ligge sist)
   Bakgrunn:
   • .nav{visibility:hidden} skjulte panelet, MEN .mega-panel hadde
     visibility:visible og overstyrte arven → svart flak synlig i lukket meny.
   • bg.css setter .mega-panel{background:…!important} → mørk boks inne i
     mobilpanelet når menyen ble åpnet.
   Løsning: megamenyen arver synlighet fra .nav, og all desktop-styling nulles.
   ========================================================================== */
@media (max-width:900px){

  .nav{ transform:translateX(100%); visibility:hidden; }
  .nav.apen{ transform:translateX(0); visibility:visible; }

  /* Megamenyen = enkel liste i mobilpanelet */
  .nav .mega-panel{
    position:static !important;
    display:block !important;
    opacity:1 !important;
    visibility:inherit !important;   /* arver fra .nav – aldri tvunget synlig */
    transform:none !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 0 0 14px !important;
    margin:2px 0 6px !important;
    min-width:0 !important;
    grid-template-columns:none !important;
    gap:0 !important;
  }
  .nav .mega-panel::before{ display:none !important; }
  .nav .mega-panel .mega-cta{ display:none !important; }

  .nav .mega-panel .mega-it > a{
    padding:9px 0 !important;
    background:none !important;
    border:0 !important;
    gap:11px !important;
  }
  .nav .mega-panel .mega-it > a:hover{ background:none !important; }

  /* Mindre ikoner uten ramme-hjørne i mobil */
  .nav .mega-panel .mega-ik{ width:28px; height:28px; border-width:1px; }
  .nav .mega-panel .mega-ik::after{ display:none; }
  .nav .mega-panel .mega-ik svg{ width:15px; height:15px; }
  .nav .mega-panel .mega-tx strong{ font-size:.98rem; }
  .nav .mega-panel .mega-tx span{ display:none; }

  /* Caret på foreldre-punktet gir ingen mening når alt er utlistet */
  .nav .menu-item-has-children > a::before{ display:none !important; }
  .nav .menu-item-has-children > a{ padding-right:0 !important; }
}

/* ==========================================================================
   MOBILMENY v3.5 – ÉN autoritativ blokk. Må ligge sist i filen.
   Erstatter tre konkurrerende lag som ga: panel til venstre (arvet left:0),
   panel oppå bunn-CTA (z-index 70 > 60), ingen lukkeknapp, og megameny-
   styling som lekket inn i mobillisten.
   ========================================================================== */

/* Bakteppe – lages av site.js, klikk lukker menyen */
.nav-bakteppe{ display:none; }
.nav__lukk{ display:none; }

@media (max-width:900px){

  .nav-bakteppe{
    display:block; position:fixed; inset:0; z-index:75;
    background:rgba(15,18,22,.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    animation:tp-fade .25s ease;
  }
  .nav-bakteppe[hidden]{ display:none; }
  @keyframes tp-fade{ from{opacity:0} to{opacity:1} }

  /* --- Panelet --- */
  .nav{
    position:fixed;
    top:0; right:0; bottom:0;
    left:auto !important;              /* dreper arvet inset/left:0 */
    width:min(340px,88vw);
    max-width:88vw;
    display:flex !important;           /* dreper arvet display:none */
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:var(--gra);
    padding:76px 26px calc(76px + env(safe-area-inset-bottom));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    box-shadow:-10px 0 34px rgba(0,0,0,.34);
    border-left:2px solid var(--rod);
    transform:translateX(101%);
    visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
    z-index:80;                        /* over bakteppe (75) og bunn-CTA (60) */
  }
  .nav.apen{ transform:translateX(0); visibility:visible; }

  /* Scroll-lås bak åpen meny */
  body.meny-apen{ overflow:hidden; }

  /* --- Lukkeknapp --- */
  .nav__lukk{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:18px; right:20px;
    width:42px; height:42px; padding:0;
    background:none; border:1px solid rgba(255,255,255,.22);
    color:#fff; cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .nav__lukk:hover, .nav__lukk:focus-visible{ border-color:var(--rod); color:var(--rod); }

  /* --- Menypunkter --- */
  .nav .menu-item{ display:block; }
  .nav > a,
  .nav .menu-item > a{
    display:block;
    color:#e9ecef;
    font-family:var(--font-h); font-weight:600;
    font-size:1.1rem; letter-spacing:.03em;
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav .menu-item-has-children > a{ padding-right:0 !important; }
  .nav .menu-item-has-children > a::before{ display:none !important; }

  /* --- Megamenyen = ren, innrykket liste (ingen desktop-kosmetikk) --- */
  .nav .mega-panel{
    position:static !important;
    display:block !important;
    opacity:1 !important;
    visibility:inherit !important;     /* arver fra .nav – aldri tvunget synlig */
    transform:none !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    padding:4px 0 8px 4px !important;
    min-width:0 !important;
    grid-template-columns:none !important;
    gap:0 !important;
    border-left:1px solid rgba(201,87,71,.3) !important;
    margin:0 0 0 6px !important;
  }
  .nav .mega-panel::before{ display:none !important; }
  .nav .mega-panel .mega-cta{ display:none !important; }

  .nav .mega-panel .mega-it > a{
    display:flex !important; align-items:center !important;
    gap:11px !important;
    padding:9px 0 9px 14px !important;
    background:none !important; border:0 !important;
    font-size:1rem !important;
  }
  .nav .mega-panel .mega-it > a:hover{ background:none !important; }

  /* Ikonrammen er desktop-pynt – i mobil holder selve symbolet */
  .nav .mega-panel .mega-ik{
    width:20px !important; height:20px !important;
    border:0 !important;
  }
  .nav .mega-panel .mega-ik::after{ display:none !important; }
  .nav .mega-panel .mega-ik svg{ width:20px !important; height:20px !important; }
  .nav .mega-panel .mega-tx strong{ font-size:1rem !important; font-weight:600 !important; }
  .nav .mega-panel .mega-tx span{ display:none !important; }

  /* --- Telefon/CTA nederst i panelet --- */
  .nav__cta{
    flex-direction:column; align-items:stretch; gap:12px;
    margin-top:18px; padding-top:6px;
  }
  .nav__cta .knapp{ justify-content:center; width:100%; }
  .topp.scrolled .nav > a,
  .topp.scrolled .nav .menu-item > a{ color:#e9ecef; }
  .topp.scrolled .nav__tlf{ color:#fff !important; }
}

/* Bunn-CTA: skjules når menyen er åpen (den ligger uansett under panelet) */
body.meny-apen .mobil-cta{ display:none !important; }

/* Gammel grønn palett hang igjen her */
.mobil-cta__pris{ background:var(--rod); color:var(--ink); }
.mobil-cta__ring{ background:#fff; color:var(--ink); }

/* --------------------------------------------------------------------------
   Stacking-fiks: .nav ligger inne i .topp{z-index:60}, så panelets z-index:80
   gjelder KUN inne i .topp sin stacking-kontekst. Bakteppet (z-index:75) er
   barn av <body> og la seg derfor OPPÅ menyen og blurret den.
   Løsning: løft hele headeren over bakteppet mens menyen er åpen.
   -------------------------------------------------------------------------- */
body.meny-apen .topp{ z-index:80; }

/* --------------------------------------------------------------------------
   Sidepadding-vakt.
   .wrap gir padding:0 20px. Klasser som settes PÅ samme element og bruker
   padding-shorthand (f.eks. «padding:56px 0») nullstiller den – teksten
   klistrer seg til skjermkanten i mobil. .seksjon brukes stort sett som YTRE
   container (med .wrap inni), der «padding:X 0» er riktig; derfor treffer vi
   kun tilfellet der begge klassene deler element.
   -------------------------------------------------------------------------- */
.wrap.seksjon{ padding-inline:20px; }

/* Ekstra pusterom i mobil for lange dokumentsider */
@media (max-width:620px){
  .wrap{ padding-inline:18px; }
  .dok{ padding-block:34px 44px; }
}

/* ==========================================================================
   PROSJEKTER
   Siden bygger på samme system som prissiden (.dh + .dok--bred + .toc), så
   her ligger BARE komponentene som ikke fantes fra før: filterrad, kortene,
   tom tilstand, paginering og før/etter. Alle avstander arves fra .dok__inn
   – ingen egne marger, ellers sklir sidene fra hverandre igjen.
   ========================================================================== */

/* Enkeltprosjekt: .dok uten innholdsfortegnelse */
.dok--enkel{ grid-template-columns:minmax(0,1fr); }
.dok--enkel .dok__inn{ max-width:860px; margin-inline:auto; }

/* Første element i en seksjon skal ikke dra med seg toppmarg */
.dok__inn > .pros-filter:first-child,
.dok__inn > .fe:first-child,
.dok__inn > .pros-foto:first-child{ margin-top:0; }

/* --- Filterrad --- */
.pros-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:1.4em 0 1.6em; }
.pros-filter__hint{
  font:600 .74rem var(--font-h); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tekst-svak); margin-right:4px;
}
.pros-filter__k{
  display:inline-flex; align-items:center; gap:7px;
  font:600 .88rem var(--font-h); letter-spacing:.04em; color:var(--ink);
  background:#fff; border:1px solid var(--linje); padding:9px 15px; text-decoration:none;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.pros-filter__k em{
  font-style:normal; font-size:.72rem; color:var(--tekst-svak);
  border-left:1px solid var(--linje); padding-left:7px;
}
.pros-filter__k:hover{ border-color:var(--rod); color:var(--rod-mork); text-decoration:none; }
.pros-filter__k.er-aktiv{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pros-filter__k.er-aktiv em{ color:var(--rod); border-left-color:rgba(255,255,255,.22); }

/* --- Kortrutenett --- */
.pros-rutenett{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:1.5em 0; }
.pros-kort{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--linje); text-decoration:none; color:inherit; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pros-kort:hover{
  border-color:var(--rod); transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(21,24,29,.1); text-decoration:none;
}
.pros-kort__foto{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:#e9e6df;
  display:flex; align-items:center; justify-content:center;
}
.pros-kort__foto img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.pros-kort:hover .pros-kort__foto img{ transform:scale(1.04); }
.pros-kort__ph{ color:#b4aea1; }

/* Før-bildet ligger over og viskes ut ved hover = «etter» */
.pros-kort__for{ position:absolute; inset:0; opacity:1; transition:opacity .45s ease; }
.pros-kort:hover .pros-kort__for{ opacity:0; }
.pros-kort__for img{ width:100%; height:100%; object-fit:cover; display:block; }
.pros-kort__for em{
  position:absolute; left:12px; bottom:12px; z-index:2; font-style:normal;
  font:600 .68rem var(--font-h); letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(15,18,22,.72); padding:5px 10px;
}
.pros-kort__lapp{
  position:absolute; top:0; right:0; z-index:3;
  font:600 .68rem var(--font-h); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--rod); padding:6px 12px;
}
.pros-kort__tekst{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.pros-kort__tekst h3{ font-size:1.1rem; line-height:1.3; margin:0; color:var(--ink); }
.pros-kort__tekst h3 span{ color:var(--tekst-svak); font-weight:400; }
.pros-kort__tekst > p{ margin:8px 0 0; font-size:.88rem; line-height:1.6; }
.pros-kort__fakta{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.pros-kort__fakta li{
  font:600 .74rem var(--font-h); letter-spacing:.04em; color:var(--tekst-svak);
  border:1px solid var(--linje); padding:4px 9px; margin:0;
}
.pros-kort__les{
  margin-top:auto; padding-top:16px;
  font:600 .78rem var(--font-h); letter-spacing:.1em; text-transform:uppercase; color:var(--rod-mork);
  display:inline-flex; align-items:center; gap:8px;
}
.pros-kort__les em{ font-style:normal; transition:transform .2s ease; }
.pros-kort:hover .pros-kort__les em{ transform:translateX(4px); }

/* --- Tom tilstand --- */
.pros-tom{
  text-align:center; background:#fff; border:1px solid var(--linje);
  border-top:3px solid var(--rod); padding:56px 32px; margin:1.5em 0;
}
.pros-tom__ik{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border:1.5px solid var(--rod); color:var(--rod);
  margin-bottom:20px; position:relative;
}
.pros-tom__ik::after{
  content:""; position:absolute; top:-5px; right:-5px; width:10px; height:10px;
  border-top:1.5px solid var(--rod); border-right:1.5px solid var(--rod);
}
.pros-tom > strong{ display:block; font:700 1.35rem var(--font-h); color:var(--ink); margin-bottom:10px; }
.pros-tom p{ margin:0 auto 10px; max-width:52ch; }
.pros-tom__knapper{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* --- Paginering --- */
.pros-paginering{ margin:2em 0 0; }
.pros-paginering .nav-links{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.pros-paginering .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--linje); background:#fff; color:var(--ink);
  font:600 .9rem var(--font-h); text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.pros-paginering .page-numbers:hover{ border-color:var(--rod); color:var(--rod-mork); }
.pros-paginering .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pros-paginering .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* --- Enkeltbilde --- */
.pros-foto{ margin:0 0 1.8em; border:1px solid var(--linje); }
.pros-foto img{ width:100%; height:auto; display:block; }

/* --- Før/etter --- */
.fe{ margin:0 0 1.8em; }
.fe__ramme{
  position:relative; overflow:hidden; border:1px solid var(--linje);
  aspect-ratio:16/9; background:#e9e6df; user-select:none;
}
.fe__etter, .fe__for{ position:absolute; inset:0; }
.fe__etter img, .fe__for img{ width:100%; height:100%; object-fit:cover; display:block; }
.fe__for{ clip-path:inset(0 50% 0 0); }        /* startverdi = samme som range */
.fe__merke{
  position:absolute; bottom:14px; z-index:3;
  font:600 .7rem var(--font-h); letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(15,18,22,.74); padding:6px 12px; pointer-events:none;
}
.fe__merke--for{ left:14px; }
.fe__merke--etter{ right:14px; }
.fe__hank{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--rod); z-index:4; transform:translateX(-1px); pointer-events:none;
}
.fe__hank span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; background:var(--rod);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.fe__hank span::before, .fe__hank span::after{
  content:""; position:absolute; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.fe__hank span::before{ left:11px; border-right:6px solid var(--ink); }
.fe__hank span::after{ right:11px; border-left:6px solid var(--ink); }

/* Dra-flaten: usynlig range oppå bildet – gir tastatur, touch og
   skjermleser gratis. Uten JS står den på 50 % og viser begge bilder. */
.fe__spak{
  position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0; padding:0;
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:ew-resize;
}
.fe__spak:focus-visible{ outline:2px solid var(--rod); outline-offset:3px; }
.fe__spak::-webkit-slider-thumb{
  -webkit-appearance:none; width:46px; height:100%; cursor:ew-resize; background:transparent;
}
.fe__spak::-moz-range-thumb{
  width:46px; height:100vh; border:0; border-radius:0; background:transparent; cursor:ew-resize;
}
.fe__spak::-moz-range-track{ background:transparent; border:0; }
.fe figcaption{ margin-top:10px; font-size:.84rem; color:var(--tekst-svak); }

.skjult-visuelt{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* --- Responsivt --- */
@media (max-width:1180px){
  .dok--enkel .dok__inn{ max-width:none; }
}
@media (max-width:900px){
  .pros-rutenett{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .pros-rutenett{ grid-template-columns:1fr; }
  .pros-tom{ padding:40px 20px; }
  .pros-tom__knapper .knapp{ flex:1 1 100%; justify-content:center; }
  .pros-filter{ gap:6px; }
  .pros-filter__k{ padding:8px 12px; font-size:.82rem; }
  .fe__ramme{ aspect-ratio:4/3; }
  .fe__hank span{ width:38px; height:38px; }
}

/* ==========================================================================
   KONTAKT – «Tilbud i tre steg» (forslag B)
   Åpner med .dh-toppen som Priser/Om oss, så følger skjemaet i tre steg med
   en oppsummering ved siden av. Avstandene er de samme som .dok bruker.
   ========================================================================== */

.kside{ padding-block:52px 68px; }
.kside__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:44px; align-items:start;
}
.kside__steg{ display:flex; flex-direction:column; min-width:0; counter-reset:kst; }

/* --- Steg --- */
.kst{ counter-increment:kst; border:1px solid var(--linje); border-bottom:0; background:#fff; }
.kst:last-child{ border-bottom:1px solid var(--linje); }
.kst__hd{
  display:flex; align-items:center; gap:14px; padding:15px 20px;
  background:#fbfaf7; border-bottom:1px solid var(--linje);
}
.kst__hd::before{
  content:counter(kst,decimal-leading-zero);
  font:700 .82rem var(--font-h); letter-spacing:.1em;
  color:var(--rod); background:var(--ink);
  width:30px; height:30px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.kst__hd strong{ font:700 1.08rem var(--font-h); color:var(--ink); letter-spacing:.02em; }
.kst__hd em{ font-style:normal; margin-left:auto; font-size:.76rem; color:var(--tekst-svak); }
.kst__bd{ padding:20px; display:flex; flex-direction:column; gap:16px; }

/* --- Felt (egne, ikke .skjema – den er bundet til kortet på forsiden) --- */
.kside__rad2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kside__felt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.kside__felt label{
  font:600 .74rem var(--font-h); letter-spacing:.12em; text-transform:uppercase;
  color:var(--tekst-svak);
}
.kside__felt .valgfri{ text-transform:none; letter-spacing:0; font-weight:400; }
.kside__felt input,
.kside__felt select,
.kside__felt textarea{
  font-family:var(--font); font-size:.95rem; padding:13px 14px;
  border:1px solid var(--linje); background:#fff; color:var(--ink);
  border-radius:0; width:100%;
}
.kside__felt textarea{ resize:vertical; min-height:96px; }
.kside__felt input:focus-visible,
.kside__felt select:focus-visible,
.kside__felt textarea:focus-visible{ outline:2px solid var(--rod); outline-offset:1px; }
.kside__felt .fil-opp{ margin:0; }

/* --- Oppsummering --- */
.kside__side{ position:sticky; top:104px; display:flex; flex-direction:column; gap:16px; }
.kopps{ border:1px solid var(--linje); border-top:3px solid var(--rod); background:#fff; }
.kopps__hd{ padding:16px 20px; border-bottom:1px solid var(--linje); }
.kopps__hd strong{ display:block; font:700 1.05rem var(--font-h); color:var(--ink); }
.kopps__hd span{ display:block; font-size:.78rem; color:var(--tekst-svak); margin-top:2px; }
.kopps dl{ margin:0; }
.kopps__lin{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 20px; border-bottom:1px solid var(--linje); font-size:.86rem;
}
.kopps__lin:last-of-type{ border-bottom:0; }
.kopps__lin dt{ margin:0; color:var(--tekst-svak); flex:none; }
.kopps__lin dd{
  margin:0; font-family:var(--font-h); font-weight:600; color:var(--ink);
  text-align:right; overflow-wrap:anywhere;
}
.kopps__lin dd.er-tom{
  font-family:var(--font); font-weight:400; font-style:italic; color:#b6bac0;
}
.kopps__bunn{ padding:16px 20px; background:var(--ink); }
.kopps__bunn .knapp{ width:100%; justify-content:center; }
.kopps__bunn small{
  display:block; margin-top:10px; font-size:.74rem; color:#8f959c; line-height:1.5;
}
.kopps__bunn small a{ color:var(--rod); }

/* --- Hjelpeboks --- */
.khjelp{ border:1px solid var(--linje); border-left:3px solid var(--rod); background:#fbfaf7; padding:18px 20px; }
.khjelp strong{ display:block; font:700 1.02rem var(--font-h); color:var(--ink); margin-bottom:6px; }
.khjelp p{ margin:0 0 10px; font-size:.86rem; color:var(--tekst-svak); line-height:1.6; }
.khjelp a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--rod-mork); font:600 1rem var(--font-h); letter-spacing:.04em;
}
.khjelp a:hover{ color:var(--ink); }

/* --- Kvittering / feil --- */
.kside__takk{
  background:#fff; border:1px solid var(--linje); border-top:3px solid var(--rod);
  padding:56px 32px; text-align:center; max-width:640px; margin:0 auto;
}
.kside__takk-ik{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border:1.5px solid var(--rod); color:var(--rod);
  margin-bottom:20px; position:relative;
}
.kside__takk-ik::after{
  content:""; position:absolute; top:-5px; right:-5px; width:10px; height:10px;
  border-top:1.5px solid var(--rod); border-right:1.5px solid var(--rod);
}
.kside__takk strong{ display:block; font:700 1.4rem var(--font-h); color:var(--ink); margin-bottom:10px; }
.kside__takk p{ margin:0 auto; max-width:48ch; color:var(--tekst-svak); line-height:1.7; }
.kside__feil{
  background:#fff; border:1px solid var(--linje); border-left:3px solid #c0392b;
  padding:18px 20px; margin-bottom:24px;
}
.kside__feil strong{ display:block; font:700 1.02rem var(--font-h); color:var(--ink); margin-bottom:4px; }
.kside__feil p{ margin:0; font-size:.9rem; color:var(--tekst-svak); }

/* --- Andre kanaler --- */
.kanaler{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:26px 0 0;
  border:1px solid var(--linje); background:#fff; }
.kanal{
  display:block; padding:24px 24px 26px; border-right:1px solid var(--linje);
  text-decoration:none; color:inherit;
  transition:background .18s ease;
}
.kanal:last-child{ border-right:0; }
a.kanal:hover{ background:#fbfaf7; text-decoration:none; }
.kanal__ik{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--rod); color:var(--rod);
  margin-bottom:14px; position:relative;
}
.kanal__ik::after{
  content:""; position:absolute; top:-4px; right:-4px; width:8px; height:8px;
  border-top:1px solid var(--rod); border-right:1px solid var(--rod);
}
.kanal strong{
  display:block; font:700 1.15rem var(--font-h); color:var(--ink);
  letter-spacing:.02em; margin-bottom:6px; overflow-wrap:anywhere;
}
a.kanal:hover strong{ color:var(--rod-mork); }
/* NB: egen klasse, ikke «.kanal span».
   .kanal__ik ER et span, så «.kanal span» (0,1,1) slo .kanal__ik (0,1,0) og
   overstyrte både display:flex (ikonet falt ut av boksen, opp i venstre hjørne)
   og color:var(--rod) (ikonet ble grått). Samme felle som .nav a vs .nav__btn. */
.kanal__tx{ display:block; font-size:.86rem; color:var(--tekst-svak); line-height:1.6; }

/* .ksvar defineres samlet nederst i filen – ikke to steder. */

/* --- Responsivt --- */
@media (max-width:1100px){
  .kside__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .kside__side{ position:static; }
  .kanaler{ grid-template-columns:1fr; }
  .kanal{ border-right:0; border-bottom:1px solid var(--linje); }
  .kanal:last-child{ border-bottom:0; }
}
@media (max-width:620px){
  .kside{ padding-block:32px 44px; }
  .kside__rad2{ grid-template-columns:1fr; }
  .kst__hd{ flex-wrap:wrap; gap:10px 12px; }
  .kst__hd em{ margin-left:0; flex-basis:100%; }
  .kside__takk{ padding:40px 20px; }
  .kopps__lin{ flex-direction:column; align-items:flex-start; gap:2px; }
  .kopps__lin dd{ text-align:left; }
}

/* ==========================================================================
   FAQ-TREKKSPILL – frittstående
   All trekkspill-styling lå bundet til .faq-liste (forsiden). En <details>
   utenfor den – f.eks. inne i .dok__inn på prissiden – fikk derfor ingen
   styling og så ut som løs tekst. Dette settet virker hvor som helst.
   ========================================================================== */

.fq-liste{ margin:1.4em 0; }

.fq{
  background:#fff; border:1px solid var(--linje); border-radius:0;
  margin:0 0 8px; overflow:hidden;
  transition:border-color .2s ease;
}
.fq-liste .fq:last-child,
.faq__liste .fq:last-child{ margin-bottom:0; }
.fq[open]{ border-left:3px solid var(--rod); }

.fq > summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 18px;
  font-family:var(--font-h); font-weight:700; font-size:1.04rem;
  color:var(--ink); letter-spacing:.01em;
  transition:color .18s ease;
}
.fq > summary::-webkit-details-marker{ display:none; }
.fq > summary:hover{ color:var(--rod-mork); }
.fq > summary:focus-visible{ outline:2px solid var(--rod); outline-offset:-2px; }

/* Pluss → kryss. Rammen er firkantet, som resten av temaet. */
.fq .fq-ic{
  width:26px; height:26px; flex:none; border-radius:0;
  border:1px solid rgba(201,87,71,.45); background:none; color:var(--rod-mork);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1; transition:transform .25s ease, background .18s ease;
}
.fq .fq-ic::before{ content:"+"; }
.fq[open] .fq-ic{ transform:rotate(135deg); background:rgba(201,87,71,.1); }

.fq > p{
  padding:0 18px 16px; margin:0;
  color:var(--tekst-svak); line-height:1.75; font-size:.94rem;
}
/* Åpent felt får litt luft mot summary uten at lukket tilstand blir høyere */
.fq[open] > summary{ padding-bottom:11px; }

/* Kontaktsidens svar-blokker */
.ksvar__led{ margin:0 0 4px; color:var(--tekst-svak); font-size:.92rem; }
.ksvar .fq-liste{ margin-top:14px; }

@media (max-width:620px){
  .fq > summary{ padding:13px 14px; font-size:.98rem; gap:12px; }
  .fq > p{ padding:0 14px 14px; }
}

/* --------------------------------------------------------------------------
   Kontakt – FAQ-blokken under kanalene.
   To kolonner: overskrift står igjen til venstre mens spørsmålene ruller,
   så blokken ikke blir en løs liste midt i et tomt felt.
   -------------------------------------------------------------------------- */
.ksvar{ margin-top:44px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:44px;
  align-items:start; }
.ksvar__hd{ position:sticky; top:104px; }
.ksvar h3{ font-size:1.45rem; margin:0 0 8px; line-height:1.2; }
.ksvar__led{ margin:0; color:var(--tekst-svak); font-size:.92rem; line-height:1.7; }
.ksvar .fq-liste{ margin:0; }
.ksvar .fq{ background:#fff; }

@media (max-width:900px){
  .ksvar{ grid-template-columns:minmax(0,1fr); gap:18px; margin-top:34px; }
  .ksvar__hd{ position:static; }
}

/* ==========================================================================
   BLOGG OG NYHETER
   Artikkelen bruker .dh + .dok--bred (samme som Priser/Om oss). Her ligger
   bare kortene, artikkelbildet og typografien for redaksjonelt innhold.
   ========================================================================== */

.blogg{ padding-block:52px 68px; }

/* --- Artikkelkort --- */
.blogg-rutenett{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.akort{ display:flex; }
.akort__lenke{
  display:flex; flex-direction:column; width:100%;
  background:#fff; border:1px solid var(--linje);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.akort__lenke:hover{
  border-color:var(--rod); transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(21,24,29,.1); text-decoration:none;
}
.akort__foto{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:#e9e6df;
  display:flex; align-items:center; justify-content:center;
}
.akort__foto img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.akort__lenke:hover .akort__foto img{ transform:scale(1.04); }
.akort__ph{ color:#b4aea1; }
.akort__lapp{
  position:absolute; top:0; left:0; z-index:2;
  font:600 .66rem var(--font-h); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--rod); padding:6px 12px;
}
.akort__tekst{ padding:20px 22px 20px; display:flex; flex-direction:column; flex:1; }
.akort__tekst h3{
  font-size:1.14rem; line-height:1.3; margin:0 0 8px; color:var(--ink);
  text-wrap:balance;
}
.akort__lenke:hover h3{ color:var(--rod-mork); }
/* NB: ikke .dok__inn-scopet – kortene brukes både i arkivet og i «Les videre». */
.akort__tekst p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--tekst-svak); }
.akort__bunn{
  display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:16px;
  font:600 .76rem var(--font-h); letter-spacing:.06em; color:var(--tekst-svak);
  text-transform:uppercase;
}
.akort__prikk{ width:3px; height:3px; background:var(--tekst-svak); flex:none; }
.akort__les{ margin-left:auto; color:var(--rod-mork); display:inline-flex; align-items:center; gap:6px; }
.akort__les em{ font-style:normal; transition:transform .2s ease; }
.akort__lenke:hover .akort__les em{ transform:translateX(4px); }

/* --- Artikkelen --- */
.artikkel__foto{ margin:0 0 1.8em; border:1px solid var(--linje); }
.artikkel__foto img{ width:100%; height:auto; display:block; }
.artikkel__foto figcaption{
  padding:10px 14px; font-size:.82rem; color:var(--tekst-svak);
  border-top:1px solid var(--linje); background:#fbfaf7;
}

/* Redaksjonell typografi – litt romsligere enn dokumentsidene */
.artikkel > p{ font-size:1.02rem; }
.artikkel > p:first-of-type{
  font-size:1.12rem; color:var(--ink); line-height:1.75;
}
.artikkel blockquote{
  margin:1.6em 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--rod);
  font-family:var(--font-h); font-weight:600; font-size:1.3rem; line-height:1.4;
  color:var(--ink); font-style:normal;
}
.artikkel blockquote p{ margin:0; color:inherit; font-size:inherit; line-height:inherit; }
.artikkel blockquote cite{
  display:block; margin-top:10px; font-family:var(--font); font-weight:400;
  font-size:.86rem; color:var(--tekst-svak); font-style:normal;
}
.artikkel figure{ margin:1.6em 0; }
.artikkel figure img{ width:100%; height:auto; display:block; border:1px solid var(--linje); }
.artikkel figcaption{ margin-top:8px; font-size:.84rem; color:var(--tekst-svak); }
.artikkel hr{
  border:0; border-top:1px solid var(--linje); margin:2.4em 0;
}

/* --- Responsivt --- */
@media (max-width:900px){
  .blogg-rutenett{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .blogg{ padding-block:32px 44px; }
  .blogg-rutenett{ grid-template-columns:1fr; }
  .artikkel > p:first-of-type{ font-size:1.04rem; }
  .artikkel blockquote{ font-size:1.15rem; padding-left:16px; }
}

/* ==========================================================================
   TAKVURDERING – modal
   Native <dialog>: Esc, fokusfelle og backdrop følger med uten bibliotek.
   ========================================================================== */

.tv{
  width:min(680px, calc(100vw - 32px));
  max-height:min(860px, calc(100vh - 40px));
  padding:0; border:0; border-top:3px solid var(--rod);
  background:#fff; color:var(--ink);
  box-shadow:0 30px 90px rgba(15,18,22,.45);
  overflow:hidden;
}
.tv::backdrop{
  background:rgba(15,18,22,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.tv[open]{ display:flex; flex-direction:column; animation:tv-inn .26s cubic-bezier(.2,.7,.3,1); }
@keyframes tv-inn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .tv[open]{ animation:none; } }

/* --- Lukk --- */
.tv__lukk-form{ position:absolute; top:0; right:0; z-index:3; margin:0; }
.tv__lukk{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:14px 16px 0 0;
  background:none; border:1px solid var(--linje); color:var(--tekst-svak); cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.tv__lukk:hover{ border-color:var(--rod); color:var(--rod-mork); }

/* --- Topp --- */
.tv__hd{
  padding:26px 30px 20px; border-bottom:1px solid var(--linje);
  background:
    radial-gradient(70% 100% at 92% 0%, rgba(201,87,71,.09) 0, transparent 60%),
    #fbfaf7;
  flex:none;
}
.tv__merke{
  display:block; font:600 .68rem var(--font-h); letter-spacing:.18em;
  text-transform:uppercase; color:var(--rod-mork); margin-bottom:8px;
}
.tv__hd > strong{
  display:block; font:700 1.5rem/1.15 var(--font-h); color:var(--ink);
  letter-spacing:-.01em; margin-bottom:6px;
}
.tv__hd p{ margin:0; font-size:.9rem; color:var(--tekst-svak); line-height:1.6; max-width:52ch; }
.tv__prikker{ display:flex; gap:5px; margin-top:16px; }
.tv__prikker span{
  height:3px; flex:1; background:var(--linje); transition:background .3s ease;
}
.tv__prikker span.er-aktiv{ background:var(--rod); }

/* --- Kropp --- */
.tv__kropp{ padding:24px 30px 26px; overflow-y:auto; flex:1; }
.tv__steg{ border:0; padding:0; margin:0; }
.tv__sp{
  padding:0; font:700 1.18rem var(--font-h); color:var(--ink); letter-spacing:.01em;
}
.tv__hint{ margin:6px 0 0; font-size:.85rem; color:var(--tekst-svak); line-height:1.55; }
.tv__valg{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }

.tv__alt{ display:block; cursor:pointer; position:relative; }
.tv__alt input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.tv__alt-inn{
  display:block; padding:13px 16px;
  border:1px solid var(--linje); background:#fff;
  transition:border-color .16s ease, background .16s ease;
}
.tv__alt-inn strong{
  display:block; font:600 1rem var(--font-h); color:var(--ink); letter-spacing:.01em;
}
.tv__alt-inn span{
  display:block; margin-top:3px; font-size:.84rem; color:var(--tekst-svak); line-height:1.5;
}
.tv__alt:hover .tv__alt-inn{ border-color:var(--rod); }
.tv__alt input:checked + .tv__alt-inn{
  border-color:var(--rod); border-left:3px solid var(--rod);
  background:rgba(201,87,71,.06); padding-left:14px;
}
.tv__alt input:focus-visible + .tv__alt-inn{ outline:2px solid var(--rod); outline-offset:2px; }

/* --- Bunn --- */
.tv__bunn{
  display:flex; align-items:center; gap:14px;
  padding:16px 30px; border-top:1px solid var(--linje); background:#fbfaf7; flex:none;
}
.tv__teller{
  margin:0 auto; font:600 .74rem var(--font-h); letter-spacing:.12em;
  text-transform:uppercase; color:var(--tekst-svak);
}
.tv__nav{
  font:600 .84rem var(--font-h); letter-spacing:.08em; text-transform:uppercase;
  padding:11px 18px; cursor:pointer; border:1px solid var(--linje);
  background:none; color:var(--ink);
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.tv__nav:hover:not(:disabled){ border-color:var(--rod); color:var(--rod-mork); }
.tv__nav--neste{ background:var(--rod); border-color:var(--rod); color:var(--ink); }
.tv__nav--neste:hover:not(:disabled){ background:var(--rod-lys); border-color:var(--rod-lys); color:var(--ink); }
.tv__nav:disabled{ opacity:.4; cursor:not-allowed; }

/* --- Fasit --- */
.tv__fasit-merke{
  display:inline-block; font:600 .68rem var(--font-h); letter-spacing:.14em;
  text-transform:uppercase; padding:5px 11px; margin-bottom:14px;
  border:1px solid var(--linje); color:var(--tekst-svak);
}
.tv__fasit-merke.er-rolig{ border-color:#2e7d32; color:#2e7d32; }
.tv__fasit-merke.er-middels{ border-color:var(--rod-mork); color:var(--rod-mork); }
.tv__fasit-merke.er-alvor{ border-color:#b3541e; color:#b3541e; }
.tv__fasit > strong{
  display:block; font:700 1.42rem/1.2 var(--font-h); color:var(--ink); margin-bottom:10px;
}
.tv__fasit > p{ margin:0; color:var(--tekst-svak); line-height:1.75; font-size:.95rem; }
.tv__punkter{ list-style:none; padding:0; margin:16px 0 0; }
.tv__punkter li{
  position:relative; padding-left:22px; margin-bottom:7px;
  font-size:.9rem; color:var(--ink); line-height:1.6;
}
.tv__punkter li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-top:1.5px solid var(--rod); border-right:1.5px solid var(--rod);
  transform:rotate(45deg);
}
.tv__forbehold{
  margin:20px 0 0; padding:16px 18px;
  background:#fbfaf7; border:1px solid var(--linje); border-left:3px solid var(--ink);
}
.tv__forbehold strong{ display:block; font:700 .98rem var(--font-h); color:var(--ink); margin-bottom:4px; }
.tv__forbehold p{ margin:0; font-size:.85rem; color:var(--tekst-svak); line-height:1.6; }
.tv__knapper{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.tv__knapper .knapp{ flex:1 1 auto; justify-content:center; }
.tv__omstart{
  display:block; margin:14px auto 0; padding:6px 4px;
  background:none; border:0; border-bottom:1px solid var(--linje);
  font:600 .78rem var(--font-h); letter-spacing:.08em; text-transform:uppercase;
  color:var(--tekst-svak); cursor:pointer;
}
.tv__omstart:hover{ color:var(--rod-mork); border-bottom-color:var(--rod); }

/* --- Åpne-knappen --- */
.tv-apne em{ font-style:normal; transition:transform .2s ease; }
.tv-apne:hover em{ transform:translateX(4px); }

@media (max-width:620px){
  .tv{ width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-top-width:0; }
  .tv__hd{ padding:22px 20px 16px; }
  .tv__hd > strong{ font-size:1.28rem; }
  .tv__kropp{ padding:20px 20px 22px; }
  .tv__bunn{ padding:14px 20px; gap:10px; }
  .tv__nav{ padding:12px 14px; font-size:.8rem; }
  .tv__teller{ font-size:.68rem; }
  .tv__knapper .knapp{ flex:1 1 100%; }
}

/* Takvurdering-lenken i CTA-bandet. <a> og ikke <button>: uten JS skal den
   fortsatt føre et sted fornuftig (/kontakt/), ikke bare ikke gjøre noe. */
.ftband__vurder{
  color:var(--rod); font-weight:600;
  text-decoration:none; border-bottom:1px solid rgba(201,87,71,.5);
  cursor:pointer; transition:color .18s ease, border-color .18s ease;
}
.ftband__vurder:hover{ color:var(--rod-lys); border-bottom-color:var(--rod-lys); }

/* --------------------------------------------------------------------------
   LOGO – firmaets egen, i to varianter.
   Originalen er hvit (laget for mørk bunn). Headeren er transparent over
   heroen, men blir hvit ved scroll – uten en mørk variant ville logoen
   forsvunnet i det øyeblikket. Begge er i DOM-en og byttes med CSS, så det
   ikke blir et bilde-bytte man ser blafre.
   -------------------------------------------------------------------------- */
.logo--bilde{ display:block; line-height:0; flex:none; }
.logo--bilde img{
  display:block; height:44px; width:auto; max-width:none;
  transition:opacity .25s ease;
}
.logo--bilde .logo__mork{ display:none; }
.topp.scrolled .logo--bilde .logo__lys{ display:none; }
.topp.scrolled .logo--bilde .logo__mork{ display:block; }

/* Sider uten mørk topp (der headeren alltid er hvit) starter på mørk logo –
   .scrolled settes av site.js med én gang på slike sider. */
@media (max-width:900px){
  .logo--bilde img{ height:36px; }
}
@media (max-width:420px){
  .logo--bilde img{ height:31px; }
}

/* ==========================================================================
   RØDT SNUR TEKSTFARGEN – må ligge sist
   Gull er en LYS farge: mørk tekst oppå var riktig, og hover lysnet flaten.
   Logoens rødt er en MØRK farge. Alle flater som arvet «ink-tekst på gull»
   gir nå 4.18:1 med ink – under kravet på 4.5:1. Hvit tekst gir 4.73:1.
   Dette er ikke smak; det er den ene tingen fargebyttet faktisk krevde.
   ========================================================================== */
.nav .nav__btn,
.nav .nav__btn:hover,
.nav .nav__btn .arw,
.topp.scrolled .nav .nav__btn{
  background:var(--rod-mork);
  color:#fff !important;
  box-shadow:0 8px 22px rgba(174,56,41,.3);
}
.nav .nav__btn:hover{ background:var(--rod-dyp); }

.mobil-cta__pris{ background:var(--rod-mork); color:#fff; }

.pros-kort__lapp,
.akort__lapp{ background:var(--rod-mork); color:#fff; }

.tv__nav--neste{ background:var(--rod-mork); border-color:var(--rod-mork); color:#fff; }
.tv__nav--neste:hover:not(:disabled){
  background:var(--rod-dyp); border-color:var(--rod-dyp); color:#fff;
}

/* Stjernene i omtaler skal være gule, ikke røde – rødt ville lest som
   «feil/advarsel», og stjernefarge er en konvensjon, ikke merkevare. */
.stjerner, .stjerne, .okort-mork__stjerner{ color:var(--gul); }

/* ==========================================================================
   HERO – «Takvinkelen»
   Bakgrunnsfigurene er logoens egen takvinkel, ikke generiske former.
   Erstatter .heroX, som lå spredt over fire lag og er fjernet i sin helhet.
   ========================================================================== */

.hero-v{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff;
}

/* --- Bakgrunnslag --- */
.hero-v__lag{ position:absolute; inset:-10% -5%; z-index:0; pointer-events:none; }
.hero-v__sjevron{
  position:absolute; left:50%; width:150%; height:auto;
  transform:translateX(-50%);
  will-change:transform;
}
.hero-v__sjevron--1{ top:6%;  animation:hv-drift 26s ease-in-out infinite; }
.hero-v__sjevron--2{ top:20%; animation:hv-drift 34s ease-in-out infinite reverse; }
.hero-v__sjevron--3{ top:34%; animation:hv-drift 30s ease-in-out infinite -8s; }
@keyframes hv-drift{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(-16px); }
}
.hero-v__glod{
  position:absolute; inset:0;
  background:radial-gradient(58% 70% at 78% 18%, rgba(201,87,71,.16) 0, transparent 62%);
}

/* --- Innhold --- */
.hero-v__inn{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  padding:150px 20px 108px;   /* toppen må klarere den faste headeren */
  min-height:620px;
}
.hero-v__tx > *{ animation:hv-opp .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-v__tx > *:nth-child(1){ animation-delay:.05s; }
.hero-v__tx > *:nth-child(2){ animation-delay:.14s; }
.hero-v__tx > *:nth-child(3){ animation-delay:.23s; }
.hero-v__tx > *:nth-child(4){ animation-delay:.32s; }
@keyframes hv-opp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.hero-v__merke{
  display:inline-flex; align-items:center; gap:10px;
  font:600 .72rem var(--font-h); letter-spacing:.18em; text-transform:uppercase;
  color:var(--rod-lys);
}
.hero-v__merke::before{ content:""; width:28px; height:1px; background:var(--rod); }

.hero-v h1{
  color:#fff; font-size:clamp(2.2rem,4.6vw,3.5rem); line-height:1.03;
  letter-spacing:-.015em; margin:16px 0 18px;
}
.hero-v h1 em{ font-style:normal; color:var(--rod-lys); }

.hero-v__led{
  color:#a7aab0; font-size:1.04rem; line-height:1.75; max-width:48ch; margin:0 0 30px;
}
.hero-v__led strong{ color:#fff; font-weight:600; }

.hero-v__knapper{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-v__knapper .knapp em{ font-style:normal; transition:transform .2s ease; }
.hero-v__knapper .knapp:hover em{ transform:translateX(4px); }

/* --- Foto, klippet til takfall --- */
.hero-v__foto{
  position:relative; height:100%; min-height:380px; align-self:stretch;
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  animation:hv-foto 1s cubic-bezier(.2,.7,.3,1) .2s both;
  overflow:hidden;
}
@keyframes hv-foto{
  from{ opacity:0; clip-path:polygon(18% 0, 100% 0, 100% 0, 0 0); }
  to  { opacity:1; clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
}
.hero-v__foto-inn{
  position:absolute; inset:-4%;
  background-size:cover; background-position:center;
  animation:hv-zoom 30s ease-in-out infinite alternate;
}
/* Uten opplastet bilde: en antydning av takstein, så heroen ser ferdig ut */
/* Den falske «takstein»-teksturen lå her. Fjernet: i full størrelse var den
   bare en brun boks – den sa ingenting om hva den forestilte. Uten bilde
   viser vi heller oppmålingen (.hero-v__maal), som faktisk forklarer tilbudet. */
@keyframes hv-zoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.hero-v__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(21,24,29,.86) 0%, rgba(21,24,29,.15) 55%, transparent 100%);
}
.hero-v__kant{
  position:absolute; top:0; left:18%; width:2px; height:100%;
  background:var(--rod); z-index:3; transform-origin:top;
  animation:hv-strek 1s cubic-bezier(.2,.7,.3,1) .55s both;
}
@keyframes hv-strek{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* --- Tillitsstripe --- */
.hero-v__tillit{
  position:relative; z-index:4;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(15,18,22,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-v__tillit > div{
  display:flex; align-items:flex-start; gap:11px;
  padding:16px max(20px, calc((100vw - var(--bredde)) / 2 + 20px));
  border-right:1px solid rgba(255,255,255,.1);
}
.hero-v__tillit > div:not(:first-child){ padding-left:20px; }
.hero-v__tillit > div:not(:last-child){ padding-right:20px; }
.hero-v__tillit > div:last-child{ border-right:0; }
.hero-v__tillit svg{ width:16px; height:16px; flex:none; color:var(--rod-lys); margin-top:2px; }
.hero-v__tillit strong{
  display:block; font:700 .96rem var(--font-h); color:#fff; letter-spacing:.02em;
}
.hero-v__tillit span{ font-size:.76rem; color:#8f959c; line-height:1.4; }

/* --- Responsivt --- */
@media (max-width:980px){
  .hero-v__inn{ grid-template-columns:1fr; gap:32px; padding:132px 20px 40px; min-height:0; }
  .hero-v__foto{ min-height:280px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  @keyframes hv-foto{ from{ opacity:0; } to{ opacity:1; } }
  .hero-v__kant{ left:0; width:100%; height:2px; transform-origin:left; }
  @keyframes hv-strek{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  .hero-v__tillit{ grid-template-columns:1fr 1fr; }
  .hero-v__tillit > div{ padding:14px 20px !important; }
  .hero-v__tillit > div:nth-child(2n){ border-right:0; }
  .hero-v__tillit > div:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.1); }
}
@media (max-width:620px){
  .hero-v__inn{ padding-top:112px; }
  .hero-v__led{ font-size:.98rem; }
  .hero-v__knapper .knapp{ flex:1 1 100%; justify-content:center; }
  .hero-v__tillit{ grid-template-columns:1fr; }
  .hero-v__tillit > div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .hero-v__tillit > div:last-child{ border-bottom:0; }
  /* Sjevronene er for store til å lese på en liten skjerm – demp dem */
  .hero-v__sjevron{ width:220%; }
}

/* --------------------------------------------------------------------------
   Redusert bevegelse – gjelder HELE heroen.
   Drift, innfade, strek og zoom er atmosfære, ikke informasjon: skrur noen av
   bevegelse i systemet, skal alt stå stille uten at innholdet forsvinner.
   Derfor animation:none (ikke display:none) – sluttilstanden er den synlige.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-v__sjevron,
  .hero-v__tx > *,
  .hero-v__foto,
  .hero-v__foto-inn,
  .hero-v__kant{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
  /* Klippet må beholdes – det er formen, ikke bevegelsen */
  .hero-v__foto{ clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%) !important; }
  .hero-v__kant{ transform:scaleY(1) !important; }
}

/* ==========================================================================
   TJENESTER – rutenett med vekt
   Fem tjenester er ikke fem likeverdige valg. Takvask er hovedtjenesten og
   får dobbel bredde; «passer når …» røpes ved hover så leseren slipper å
   kunne fagordene på forhånd.
   Erstatter .kort/.rutenett, som er fjernet – ingenting bruker dem lenger.
   ========================================================================== */

.tj{ position:relative; overflow:hidden; }

/* Logoens takvinkel som vannmerke – samme geometri som heroen */
.tj__mnst{
  position:absolute; top:-8%; right:-6%; width:56%; height:120%;
  z-index:0; pointer-events:none; opacity:.5;
}
.tj__mnst svg{ width:100%; height:100%; }
.tj__mnst path{
  fill:none; stroke:rgba(201,87,71,.14); stroke-width:2;
  animation:tj-driv 30s ease-in-out infinite alternate;
}
@keyframes tj-driv{ from{ transform:translateY(0); } to{ transform:translateY(-18px); } }

.tj__inn{ position:relative; z-index:2; }

/* --- Rutenett --- */
.tj__rut{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.tj__rut--jevn .tj__k--stor{ grid-column:span 1; }   /* «Andre tjenester»: ingen vekting */

.tj__k{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--linje);
  padding:24px 22px; text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tj__k:hover{
  border-color:var(--rod); transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(21,24,29,.1); text-decoration:none;
}
.tj__k--stor{ grid-column:span 2; }

/* --- Tjenestekortets foto (fra tjenestesidens fremhevede bilde) --- */
.tj__foto{
  position:relative; display:block; margin:-24px -22px 18px;
  aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#2b3138,#171b20);
}
.tj__foto img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.tj__k:hover .tj__foto img{ transform:scale(1.04); }
.tj__k--stor .tj__foto{ aspect-ratio:21/9; }
/* Tom tilstand: grafitt-panel med en svak diagonal (logoens takvinkel). */
.tj__foto--tom::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:linear-gradient(135deg,transparent 47%,rgba(255,255,255,.06) 47%,rgba(255,255,255,.06) 53%,transparent 53%);
  background-size:24px 24px;
}
/* Ikonet ligger nå som hvitt merke nederst til venstre på fotoet. */
.tj__foto .tj__ik{
  position:absolute; left:14px; bottom:14px; margin:0;
  width:44px; height:44px; background:#fff; box-shadow:0 4px 14px rgba(21,24,29,.18);
}
.tj__foto .tj__ik svg{ width:22px; height:22px; }
.tj__k:hover .tj__foto .tj__ik{ background:#fff; }
.tj__k--stor .tj__foto .tj__ik{ width:44px; height:44px; }
.tj__k--stor .tj__foto .tj__ik svg{ width:22px; height:22px; }

/* --- Ikon: skarp ramme + bracket-hjørne, som resten av temaet --- */
.tj__ik{
  width:40px; height:40px; flex:none; position:relative;
  border:1.5px solid var(--rod); color:var(--rod);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:background .18s ease;
}
.tj__ik::after{
  content:""; position:absolute; top:-4px; right:-4px; width:8px; height:8px;
  border-top:1.5px solid var(--rod); border-right:1.5px solid var(--rod);
}
.tj__ik svg{ width:21px; height:21px; }
.tj__k:hover .tj__ik{ background:rgba(201,87,71,.09); }
.tj__k--stor .tj__ik{ width:52px; height:52px; }
.tj__k--stor .tj__ik svg{ width:26px; height:26px; }

.tj__k h3{ font-size:1.16rem; line-height:1.3; color:var(--ink); margin:0 0 7px; }
.tj__k--stor h3{ font-size:1.7rem; }
.tj__k:hover h3{ color:var(--rod-mork); }
.tj__k > p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--tekst-svak); }

/* --- «Passer når»: alltid synlig ---
   Lå først skjult til hover. To grunner til at det var feil: den reserverte
   plassen sin uansett, så kortene fikk et tomt felt nederst – og viktigere,
   dette er nettopp opplysningen som skal hjelpe leseren å kjenne igjen sitt
   eget tak. Å gjemme den bak hover fjerner hele poenget med den. */
.tj__nar{ margin-top:auto; padding-top:14px; }
.tj__nar > span{
  display:block; padding-top:12px; border-top:1px solid var(--linje);
  font:600 .76rem var(--font-h); letter-spacing:.05em; text-transform:uppercase;
  color:var(--rod-mork);
  transition:color .18s ease;
}

/* --- CTA: full bredde ---
   Regnestykket: takvask(2) + 4 tjenester(4) + CTA(3) = 9 celler = nøyaktig
   tre fulle rader. Med CTA på én kolonne ble det 7 celler, og kortet ble
   stående alene på en rad med to tomme felt ved siden av.
   Samme grep som megamenyens CTA måtte ha. */
.tj__k--cta{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; gap:24px; flex-wrap:wrap;
  background:radial-gradient(60% 90% at 88% 6%, rgba(201,87,71,.13) 0, transparent 62%),
             linear-gradient(160deg,#333940,#262c32);
  border-color:transparent; border-left:3px solid var(--rod);
  padding:22px 26px;
}
.tj__k--cta:hover{ transform:none; box-shadow:none; border-color:transparent;
  border-left-color:var(--rod); }
.tj__k--cta h3{ color:#fff; margin:0 0 4px; }
.tj__k--cta p{ color:#a7aab0; margin:0; font-size:.88rem; line-height:1.6; max-width:52ch; }
.tj__k--cta .knapp{ margin-left:auto; flex:none; }

/* --- Responsivt --- */
@media (max-width:900px){
  .tj__rut{ grid-template-columns:1fr 1fr; }
  .tj__k--stor{ grid-column:span 2; }
  .tj__rut--jevn .tj__k--stor{ grid-column:span 1; }
  .tj__mnst{ display:none; }   /* vannmerket blir støy på liten skjerm */
}
@media (max-width:620px){
  .tj__rut{ grid-template-columns:1fr; }
  .tj__k--stor,
  .tj__rut--jevn .tj__k--stor{ grid-column:span 1; }
  .tj__k--stor h3{ font-size:1.35rem; }
  .tj__k--stor .tj__ik{ width:44px; height:44px; }
  .tj__k--stor .tj__ik svg{ width:22px; height:22px; }
  .tj__k--cta .knapp{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .tj__mnst path{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   HERO uten bilde – oppmålingen
   Erstatter den falske fototeksturen. Omrisset tegner seg opp som en
   oppmåling og viser løftet i heroteksten: takflaten regnes ut fra adressen.
   Er det lagt inn et bilde i Customizer, vises det i stedet for dette.
   -------------------------------------------------------------------------- */
.hero-v__maal{
  position:relative; align-self:center;
  display:flex; align-items:center; justify-content:center;
  padding:20px 0;
}
.hero-v__maal svg{ width:100%; max-width:520px; height:auto; overflow:visible; }

/* Selve takflaten – tegner seg selv */
.hv-m__tak{
  fill:rgba(201,87,71,.07); stroke:var(--rod); stroke-width:2.5; stroke-linejoin:miter;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:hv-m-tegn 2.4s cubic-bezier(.4,0,.2,1) .4s forwards;
}
@keyframes hv-m-tegn{ to{ stroke-dashoffset:0; } }

.hv-m__hjelp{
  fill:none; stroke:rgba(255,255,255,.28); stroke-width:1; stroke-dasharray:5 5;
  opacity:0; animation:hv-m-inn .8s ease 2.3s forwards;
}
.hv-m__mal{
  fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.2;
  opacity:0; animation:hv-m-inn .7s ease 2.6s forwards;
}
@keyframes hv-m-inn{ to{ opacity:1; } }

.hv-m__pkt{ fill:var(--rod); opacity:0; animation:hv-m-pop .4s cubic-bezier(.3,1.4,.5,1) both; }
.hv-m__pkt:nth-of-type(1){ animation-delay:2.5s; }
.hv-m__pkt:nth-of-type(2){ animation-delay:2.6s; }
.hv-m__pkt:nth-of-type(3){ animation-delay:2.7s; }
@keyframes hv-m-pop{
  from{ opacity:0; transform:scale(0); transform-origin:center; }
  to  { opacity:1; transform:scale(1); }
}

.hv-m__tx{
  font-family:var(--font-h); font-weight:600; font-size:15px; fill:#fff;
  letter-spacing:.08em; opacity:0; animation:hv-m-inn .6s ease 2.8s forwards;
}
.hv-m__tall{
  font-family:var(--font-h); font-weight:700; font-size:27px; fill:var(--rod-lys);
  letter-spacing:.01em; opacity:0; animation:hv-m-inn .6s ease 2.9s forwards;
}
.hv-m__lab{
  font-family:var(--font-h); font-weight:600; font-size:11px; fill:#8f959c;
  letter-spacing:.14em; opacity:0; animation:hv-m-inn .6s ease 3s forwards;
}

/* Tallet er en illustrasjon, ikke en måling av leserens tak – si det. */
.hero-v__maal-eks{
  position:absolute; top:20px; right:0;
  font:600 .6rem var(--font-h); letter-spacing:.14em; text-transform:uppercase;
  color:#8f959c; border:1px solid rgba(255,255,255,.16); padding:4px 9px;
  opacity:0; animation:hv-m-inn .6s ease 3.1s forwards;
}

@media (max-width:980px){
  .hero-v__maal{ padding:0 0 8px; }
  .hero-v__maal svg{ max-width:420px; }
  .hero-v__maal-eks{ top:0; }
}
@media (max-width:620px){
  .hv-m__lab{ font-size:9px; letter-spacing:.1em; }
  .hv-m__tall{ font-size:23px; }
}
@media (prefers-reduced-motion:reduce){
  .hv-m__tak,.hv-m__hjelp,.hv-m__mal,.hv-m__pkt,.hv-m__tx,.hv-m__tall,.hv-m__lab,
  .hero-v__maal-eks{
    animation:none !important; opacity:1 !important;
    stroke-dashoffset:0 !important; transform:none !important;
  }
}

/* CTA-teksten stables mens knappen går til høyre */
.tj__cta-tx{ flex:1 1 auto; min-width:0; }

@media (max-width:620px){
  .tj__k--cta{ flex-direction:column; align-items:flex-start; gap:16px; }
  .tj__k--cta .knapp{ margin-left:0; width:100%; justify-content:center; }
}

/* ==========================================================================
   PROSESS – tidslinje
   Erstatter .prosess (fire kort med vanntall), som er fjernet helt.
   Sporet fylles opp én gang ved innlasting, og punktene kommer etter hvert
   som streken passerer dem – bevegelsen leser seg som tid som går.
   ========================================================================== */

.tidsl{ position:relative; overflow:hidden; }

.tidsl__mnst{
  position:absolute; top:-10%; right:-4%; width:40%; height:130%;
  z-index:0; pointer-events:none; opacity:.45;
}
.tidsl__mnst svg{ width:100%; height:100%; }
.tidsl__mnst path{
  fill:none; stroke:rgba(201,87,71,.12); stroke-width:2;
  animation:tidsl-driv 30s ease-in-out infinite alternate;
}
@keyframes tidsl-driv{ from{ transform:translateY(0); } to{ transform:translateY(-16px); } }

.tidsl__inn{ position:relative; z-index:2; }

/* --- Topprad: overskrift, ingress og knapp deler linje --- */
.tidsl__hd{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:30px; }
.tidsl__hd h2{ font-size:1.7rem; line-height:1.14; margin:10px 0 0; }
.tidsl__led{
  flex:1 1 300px; margin:0; color:var(--tekst-svak); font-size:.9rem; line-height:1.6; max-width:50ch;
}
.tidsl__hd .knapp{ margin-left:auto; flex:none; }

/* --- Linjen ---
   .tidsl__linje er posisjoneringslaget, .tidsl__rad er selve <ol>. Sporet må
   ligge utenfor lista fordi en <ol> bare kan inneholde <li>. */
.tidsl__linje{ position:relative; padding-top:34px; }
.tidsl__spor{ position:absolute; top:12px; left:0; right:0; height:2px; background:var(--linje); }
.tidsl__fylt{
  position:absolute; top:12px; left:0; height:2px; background:var(--rod);
  width:0; animation:tidsl-fyll 2s cubic-bezier(.4,0,.2,1) .3s forwards;
}
@keyframes tidsl-fyll{ to{ width:100%; } }

.tidsl__rad{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.tidsl__p{
  position:relative; padding-right:16px; margin:0;
  animation:tidsl-inn .5s cubic-bezier(.2,.7,.3,1) both;
}
/* Punktene dukker opp i takt med at streken passerer dem */
.tidsl__p:nth-child(1){ animation-delay:.4s; }
.tidsl__p:nth-child(2){ animation-delay:.7s; }
.tidsl__p:nth-child(3){ animation-delay:1s; }
.tidsl__p:nth-child(4){ animation-delay:1.3s; }
.tidsl__p:nth-child(5){ animation-delay:1.6s; }
@keyframes tidsl-inn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Ingen outline rundt prikken: seksjonsbakgrunnen er en gradient, så en
   ensfarget ring ville lagt seg som en lys flekk oppå den. Prikken dekker
   streken helt fint på egen hånd. */
.tidsl__prikk{
  position:absolute; top:-28px; left:0; width:12px; height:12px; background:var(--rod);
}
.tidsl__p--slutt .tidsl__prikk{ background:var(--ink); }

.tidsl__tid{
  display:block; font:700 1.05rem var(--font-h); color:var(--rod-mork); letter-spacing:.02em;
}
.tidsl__p--slutt .tidsl__tid{ color:var(--ink); }
.tidsl__p strong{ display:block; font:700 .96rem var(--font-h); color:var(--ink); margin:5px 0 3px; }
.tidsl__tx{ display:block; font-size:.79rem; color:var(--tekst-svak); line-height:1.5; }

.tidsl__fot{
  margin:22px 0 0; padding-top:14px; border-top:1px solid var(--linje);
  font-size:.82rem; color:var(--tekst-svak);
}
.tidsl__fot strong{ color:var(--ink); }

/* --- Responsivt ---
   Under 820 px blir fem kolonner uleselige. Da snus linjen: den går nedover
   i stedet for bortover, og prikkene legger seg på en loddrett strek. */
@media (max-width:820px){
  .tidsl__hd .knapp{ margin-left:0; }
  .tidsl__linje{ padding:0 0 0 26px; }
  .tidsl__rad{ grid-template-columns:1fr; }
  .tidsl__spor{ top:6px; bottom:6px; left:5px; right:auto; width:2px; height:auto; }
  .tidsl__fylt{
    top:6px; left:5px; width:2px; height:0;
    animation:tidsl-fyll-loddrett 2s cubic-bezier(.4,0,.2,1) .3s forwards;
  }
  @keyframes tidsl-fyll-loddrett{ to{ height:calc(100% - 12px); } }
  .tidsl__p{ padding:0 0 20px; }
  .tidsl__p:last-child{ padding-bottom:0; }
  .tidsl__prikk{ top:4px; left:-26px; }
}
@media (max-width:560px){
  .tidsl__hd .knapp{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .tidsl__mnst path,
  .tidsl__p{ animation:none !important; opacity:1 !important; transform:none !important; }
  /* Sporet skal stå ferdig fylt, ikke tomt */
  .tidsl__fylt{ animation:none !important; width:100% !important; }
}
@media (prefers-reduced-motion:reduce) and (max-width:820px){
  .tidsl__fylt{ width:2px !important; height:calc(100% - 12px) !important; }
}

/* ==========================================================================
   PRISER (forside) – ett regneeksempel
   Erstatter tabellen som var identisk med prissidens. Selve kortet bruker
   .eks-komponentene som allerede finnes der, så eksempelet ser likt ut begge
   steder – og tallet bor ett sted (takproff_regneeksempler()).
   ========================================================================== */

.pris-f{ position:relative; overflow:hidden; }

.pris-f__mnst{
  position:absolute; top:-10%; right:-4%; width:40%; height:130%;
  z-index:0; pointer-events:none; opacity:.45;
}
.pris-f__mnst svg{ width:100%; height:100%; }
.pris-f__mnst path{
  fill:none; stroke:rgba(201,87,71,.12); stroke-width:2;
  animation:prisf-driv 30s ease-in-out infinite alternate;
}
@keyframes prisf-driv{ from{ transform:translateY(0); } to{ transform:translateY(-16px); } }

.pris-f__inn{ position:relative; z-index:2; }

.pris-f__hd{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:24px; }
.pris-f__hd h2{ font-size:1.7rem; line-height:1.14; margin:10px 0 0; }
.pris-f__led{
  flex:1 1 300px; margin:0; color:var(--tekst-svak); font-size:.9rem; line-height:1.6; max-width:52ch;
}
.pris-f__hd .knapp{ margin-left:auto; flex:none; }

.pris-f__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:16px; align-items:stretch; }

/* Eksempelkortet er .eks – her trengs bare litt tilpasning til forsiden */
.pris-f__grid .eks{ margin:0; padding:22px 24px; }
.pris-f__grid .eks h3{ margin:11px 0 12px; }

.pris-f__side{
  background:#fff; border:1px solid var(--linje); padding:20px 22px;
  display:flex; flex-direction:column;
}
.pris-f__side h3{ font-size:1.02rem; margin:0 0 12px; }
.pris-f__opp{ list-style:none; padding:0; margin:0 0 12px; }
.pris-f__opp li{
  position:relative; padding-left:20px; font-size:.84rem; color:var(--tekst-svak);
  line-height:1.5; margin-bottom:7px;
}
/* Samme bracket-hake som resten av temaet */
.pris-f__opp li::before{
  content:""; position:absolute; left:0; top:.42em; width:7px; height:7px;
  border-top:1.5px solid var(--rod); border-right:1.5px solid var(--rod);
  transform:rotate(45deg);
}
.pris-f__side > p{
  margin:auto 0 0; padding-top:12px; border-top:1px solid var(--linje);
  font-size:.79rem; color:var(--tekst-svak); line-height:1.55;
}

@media (max-width:900px){
  .pris-f__grid{ grid-template-columns:1fr; }
  .pris-f__hd .knapp{ margin-left:0; }
}
@media (max-width:560px){
  .pris-f__hd .knapp{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .pris-f__mnst path{ animation:none !important; }
}

/* ==========================================================================
   FAQ (forside) – kompakt
   Erstatter .faq-grid/.faq-aside/.faq-kontaktkort. Kontaktkortet er borte:
   det var femte «Få pris» på siden, og CTA-båndet ligger rett under.
   ========================================================================== */

.faq__inn{ position:relative; z-index:2; }

.faq__hd{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:24px; }
.faq__hd h2{ font-size:1.7rem; line-height:1.14; margin:10px 0 0; }
.faq__led{
  flex:1 1 320px; margin:0; color:var(--tekst-svak); font-size:.9rem; line-height:1.6; max-width:54ch;
}
.faq__led a{ color:var(--rod-mork); font-weight:600; white-space:nowrap; }

/* To kolonner: sju spørsmål nedover ble en lang stripe.
   Masonry hadde vært riktig, men columns holder – punktene er korte og
   trekkspillet endrer høyde ved åpning uten å flytte de andre. */
.faq__liste{ columns:2; column-gap:16px; }
.faq__liste .fq{
  break-inside:avoid;       /* et spørsmål skal aldri deles over to kolonner */
  margin:0 0 8px;
}

@media (max-width:820px){
  .faq__liste{ columns:1; }
}
@media (max-width:560px){
  .faq__led{ flex-basis:100%; }
}

/* ==========================================================================
   GALLERI – ubegrenset antall bilder
   Egen løsning fordi temaet slår av wp-block-library; WP sitt galleri-blokk
   ville sett ødelagt ut. Lightboxen er native <dialog> – ingen bibliotek.
   ========================================================================== */

.tgal-blokk{ margin:1.6em 0; }
.tgal__tit{ font-size:1.15rem; margin:0 0 14px; }

.tgal{ display:grid; gap:10px; }
.tgal--k2{ grid-template-columns:repeat(2,1fr); }
.tgal--k3{ grid-template-columns:repeat(3,1fr); }
.tgal--k4{ grid-template-columns:repeat(4,1fr); }

.tgal__b{
  position:relative; display:block; padding:0; margin:0; overflow:hidden;
  border:1px solid var(--linje); background:#e9e6df; cursor:zoom-in;
  aspect-ratio:4/3;
  transition:border-color .2s ease, transform .2s ease;
}
.tgal__b:hover{ border-color:var(--rod); transform:translateY(-3px); }
.tgal__b:focus-visible{ outline:2px solid var(--rod); outline-offset:2px; }
.tgal__b img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.tgal__b:hover img{ transform:scale(1.05); }

.tgal__tekst{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 12px 9px; text-align:left;
  font-size:.78rem; line-height:1.4; color:#fff;
  background:linear-gradient(transparent, rgba(15,18,22,.85));
  /* Lange bildetekster skal ikke dekke halve bildet */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tgal--stor .tgal__b{ aspect-ratio:3/2; }

/* --- Lightbox --- */
.tlys{
  width:min(1280px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);
  padding:0; border:0; background:none; overflow:visible;
}
.tlys::backdrop{
  background:rgba(15,18,22,.9);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.tlys[open]{ display:flex; align-items:center; justify-content:center;
  animation:tlys-inn .22s ease; }
@keyframes tlys-inn{ from{ opacity:0; } to{ opacity:1; } }

.tlys__inn{ margin:0; max-width:100%; }
.tlys__inn img{
  display:block; max-width:100%; max-height:calc(100vh - 120px);
  width:auto; height:auto; object-fit:contain;
  border:1px solid rgba(255,255,255,.14);
}
.tlys__inn figcaption{
  margin-top:10px; text-align:center; font-size:.86rem; color:#c3c8cd;
}
.tlys__inn figcaption[hidden]{ display:none; }

.tlys__lukk,
.tlys__pil{
  position:fixed; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,18,22,.7); border:1px solid rgba(255,255,255,.2);
  color:#fff; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.tlys__lukk:hover,
.tlys__pil:hover{ border-color:var(--rod); background:var(--rod-mork); }
.tlys__lukk:focus-visible,
.tlys__pil:focus-visible{ outline:2px solid var(--rod-lys); outline-offset:2px; }

.tlys__lukk{ top:18px; right:18px; width:44px; height:44px; }
.tlys__pil{ top:50%; transform:translateY(-50%); width:52px; height:52px; }
.tlys__pil--f{ left:18px; }
.tlys__pil--n{ right:18px; }
.tlys__pil[hidden]{ display:none; }

.tlys__teller{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:2;
  font:600 .76rem var(--font-h); letter-spacing:.12em;
  color:#c3c8cd; background:rgba(15,18,22,.7);
  border:1px solid rgba(255,255,255,.14); padding:6px 14px;
  font-variant-numeric:tabular-nums;
}
.tlys__teller[hidden]{ display:none; }

@media (max-width:900px){
  .tgal--k4{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:620px){
  .tgal--k3,.tgal--k4{ grid-template-columns:repeat(2,1fr); }
  .tgal{ gap:8px; }
  /* Pilene tar for mye plass på liten skjerm – flytt dem ned til hjørnene */
  .tlys__pil{ top:auto; bottom:18px; transform:none; width:46px; height:46px; }
  .tlys__pil--f{ left:14px; }
  .tlys__pil--n{ right:14px; }
  .tlys__teller{ bottom:32px; }
  .tlys__inn img{ max-height:calc(100vh - 160px); }
  .tgal__tekst{ font-size:.72rem; -webkit-line-clamp:1; }
}
@media (prefers-reduced-motion:reduce){
  .tgal__b,.tgal__b img,.tlys[open]{ animation:none !important; transition:none !important; }
  .tgal__b:hover{ transform:none; }
  .tgal__b:hover img{ transform:none; }
}

/* ==========================================================================
   FAGSTOFF (forside) – siste artikler
   Kortene er .akort fra bloggarkivet – ett kortdesign, ikke to.
   Her trengs bare toppraden.
   ========================================================================== */

.fagst__inn{ position:relative; z-index:2; }
.fagst__hd{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:24px; }
.fagst__hd h2{ font-size:1.7rem; line-height:1.14; margin:10px 0 0; }
.fagst__led{
  flex:1 1 300px; margin:0; color:var(--tekst-svak); font-size:.9rem; line-height:1.6; max-width:52ch;
}
.fagst__hd .knapp{ margin-left:auto; flex:none; }

@media (max-width:900px){
  .fagst__hd .knapp{ margin-left:0; }
}
@media (max-width:560px){
  .fagst__hd .knapp{ width:100%; justify-content:center; }
}

/* ==========================================================================
   JURIDISKE SIDER (personvern, vilkår, cookies)
   Bruker .dh + .dok--bred, men litt strammere: smalere topp, mindre pompøs.
   ========================================================================== */

.dh--smal{ padding-block:120px 30px; }
.dh--smal h1{ font-size:clamp(1.7rem,3.6vw,2.5rem); }

.jur .dok__inn{ max-width:64ch; }
.jur__dato{
  margin-top:2.4em; padding-top:16px; border-top:1px solid var(--linje);
  font-size:.84rem; color:var(--tekst-svak);
}