/* Hafrsfjord Rør AS – felles stil for alle sider.
   Flater: børstet stål (mørk) og kalk (lys). Én aksent: messing fra logoen og varebilen. Skrift: Lexend. */

@font-face {
  font-family: "League Spartan";
  src: url("/assets/fonts/league-spartan.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --natt: #141312;
  --natt-2: #1d1c1a;
  --kalk: #f1eee8;
  --kalk-2: #e8e3d9;
  --blekk: #161513;
  --dempet: #5c574f;
  --dempet-mork: #a39d93;
  --lys: #ece7de;
  --messing: #c8a065;
  --messing-lys: #dcbb88;
  --messing-mork: #7b5d30;
  --linje: rgba(22, 21, 19, 0.14);
  --linje-sterk: rgba(22, 21, 19, 0.3);
  --linje-mork: rgba(236, 231, 222, 0.14);
  --feil: #a3372a;
  --ok: #3f6b4a;

  --ramme: 1320px;
  --kant: clamp(16px, 4vw, 48px);
  --seksjon: clamp(72px, 10vw, 140px);
  --topp-h: 72px;
  --r: 3px;
  --lett: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-tittel: "League Spartan", "Lexend", ui-sans-serif, system-ui, sans-serif;   /* overskrifter: samme stemme som ordmerket på logoen og bilen */
  --tittel-vekt: 700;
  --tittel-vekt-liten: 500;
  --tittel-sperring: -0.03em;
  --tittel-skala: 1.06;
  --bilde-mork: url("/assets/tekstur/stal.webp");   /* sømløst, kodelaget stål (tools/flater.py), 1280 px vist 640 */
  --mork-flate: var(--bilde-mork) 0 0 / 640px auto repeat var(--natt);
  --band: var(--messing);
  --band-tekst: var(--natt);
  --topp-bak: rgba(20, 19, 18, 0.97);
  --logo-lys: #9b7136;     /* logoen på lys flate: mørkere gull, som på bilen */
}

/* Lilla tema: dyp aubergine avledet av lillafargen på bilene og Facebook (#470988), med gull. */
:root[data-tema="lilla"] {
  --natt: #170b25;
  --natt-2: #22123a;
  --dempet-mork: #b2a6c2;
  --linje-mork: rgba(236, 231, 222, 0.15);
  --bilde-mork: url("/assets/tekstur/fiolett.webp");
  --band: #470988;
  --band-tekst: #f3eefb;
  --topp-bak: rgba(23, 11, 37, 0.97);
  --messing-mork: #5a1f96;   /* aksent på lys flate: lilla i stedet for mørk messing */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topp-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 330;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--blekk);
  background: var(--natt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); letter-spacing: var(--tittel-sperring); line-height: 0.98; text-wrap: balance; }
.kontaktblokk__tittel, .kontakt__tlf, .velkommen__omtale blockquote p, .anmeldelser__liste blockquote p,
.pakke__pris b, .ptopp__pris b, .sammendrag__sum b, .send__sum b, .tj__navn, .tj2 h3, .kvittering h3 {
  font-family: var(--font-tittel); font-weight: var(--tittel-vekt-liten); letter-spacing: -0.015em;
}
.kontaktblokk__tittel, .kontakt__tlf { font-weight: var(--tittel-vekt); letter-spacing: var(--tittel-sperring); }
h1 { font-size: calc(clamp(2.6rem, 6vw, 5.4rem) * var(--tittel-skala)); }
h2 { font-size: calc(clamp(2rem, 4.2vw, 3.5rem) * var(--tittel-skala)); }
h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
p { text-wrap: pretty; }
small { font-size: 0.8em; }
::selection { background: var(--messing); color: var(--natt); }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; }

.skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--messing); color: var(--natt); }
.hopp:focus { top: 12px; }
.ramme { width: 100%; max-width: calc(var(--ramme) + 2 * var(--kant)); margin-inline: auto; padding-inline: var(--kant); }

/* ---------------------------------------------------------------- flater */
.flate--mork, .med-intro .intro { background: var(--mork-flate); }
.flate--mork { color: var(--lys); }
/* lyse flater: den varme, kodelagde kalken (toppen og tjenestene på forsiden), og Grok-kalk og -marmor andre steder */
.flate--kalk { background: var(--kalk) url("/assets/tekstur/kalk.webp") repeat; background-size: 640px; color: var(--blekk); }
.flate--puss { background: var(--kalk) url("/assets/tekstur/flate-kalk.webp") 0 0 / 896px auto repeat; color: var(--blekk); }
.flate--marmor { background: var(--kalk) url("/assets/tekstur/flate-marmor.webp") center / cover no-repeat; color: var(--blekk); }
/* fagnære flater fra Grok på forsiden (tools/grok.py): mikrosementen gjentas skarpt, dråpene ligger nede til venstre */
.flate--betong { background: #ddd9d2 url("/assets/tekstur/flate-betong.webp") 0 0 / 704px auto repeat; color: var(--blekk); }
.flate--drapar { background: #ebe6e1 url("/assets/tekstur/flate-drapar.webp") left bottom / 896px auto no-repeat; color: var(--blekk); }
@media (max-width: 760px) { .flate--drapar { background-size: 560px auto; } }
.ark { position: relative; z-index: 2; margin-top: -28px; border-radius: 22px 22px 0 0; }

/* ---------------------------------------------------------------- små byggeklosser */
.etikett {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--messing-mork);
}
.flate--mork .etikett, .slutt .etikett, .topp .etikett { color: var(--messing); }
.etikett a { text-decoration: none; }
/* små overskrifter inne i kort og kolonner: vanlig skrift, ikke store bokstaver */
.deltittel { font-family: var(--font-tittel); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.005em; line-height: 1.2; color: inherit; }
.etikett a:hover { text-decoration: underline; }

.pil { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.35s var(--lett); }
a:hover > .pil, a:hover .lenke .pil, button:hover > .pil { transform: translateX(4px); }

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.7em 1.35em;
  border: 1px solid var(--blekk); border-radius: var(--r);
  background: var(--blekk); color: var(--kalk);
  font-size: 0.95rem; font-weight: 450; letter-spacing: 0.01em; text-decoration: none; line-height: 1.2;
  cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.knapp:hover { background: #2a2825; border-color: #2a2825; }
.knapp svg:not(.pil) { width: 1.1em; height: 1.1em; }
.knapp--messing { background: var(--messing); border-color: var(--messing); color: var(--natt); }
.knapp--messing:hover { background: var(--messing-lys); border-color: var(--messing-lys); }
.knapp--strek-lys { background: transparent; color: var(--lys); border-color: rgba(236, 231, 222, 0.38); }
.knapp--strek-lys:hover { background: rgba(236, 231, 222, 0.08); border-color: var(--lys); }
.knapp--strek { background: transparent; color: inherit; border-color: currentColor; }
.knapp--natt { background: var(--natt); border-color: var(--natt); color: var(--lys); }
.knapp--natt:hover { background: #2a2825; }
.knapp--liten { min-height: 40px; padding: 0.5em 1.05em; font-size: 0.88rem; }
.knapp--stor { min-height: 58px; padding: 0.9em 1.7em; font-size: 1.02rem; }
.knapp[disabled] { opacity: 0.55; cursor: progress; }

.lenke {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 450; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.prikk { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7fbf8c; box-shadow: 0 0 0 4px rgba(127, 191, 140, 0.16); flex: none; }

/* ---------------------------------------------------------------- toppmenyen */
.topp {
  position: fixed; inset: 0 0 auto; z-index: 50; color: var(--lys);
  transition: background 0.35s, border-color 0.35s, transform 0.4s var(--lett);
  border-bottom: 1px solid transparent;
}
.topp.er-rullet { background: var(--topp-bak); border-color: var(--linje-mork); }
.topp.er-skjult { transform: translateY(-100%); }
.topp__bar {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  height: var(--topp-h); max-width: calc(var(--ramme) + 2 * var(--kant)); margin-inline: auto; padding-inline: var(--kant);
}
.topp__logo { display: flex; align-items: center; min-height: 44px; color: var(--messing); margin-right: auto; flex: none; }
.logo { width: auto; height: 26px; fill: currentColor; }
.logo__skjold { transition: transform 0.6s var(--lett); transform-origin: 8% 50%; }
.topp__logo:hover .logo__skjold { transform: rotate(-6deg); }
.topp__nav { display: flex; gap: clamp(16px, 2vw, 30px); font-size: 0.92rem; }
.topp__nav > a { text-decoration: none; padding: 6px 0; position: relative; color: rgba(236, 231, 222, 0.82); }
.topp__nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--messing); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--lett); }
.topp__nav > a:hover, .topp__nav > a[aria-current] { color: var(--lys); }
.topp__nav > a:hover::after, .topp__nav > a[aria-current]::after { transform: scaleX(1); }
.topp__mobilinfo { display: none; }
.topp__tlf { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 450; white-space: nowrap; }
.topp__tlf svg { width: 18px; height: 18px; color: var(--messing); }
.topp__meny { display: none; }

@media (max-width: 960px) {
  :root { --topp-h: 64px; }
  .logo { height: 22px; }
  .topp__tlf span { display: none; }
  .topp__tlf { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--linje-mork); border-radius: var(--r); }
  .topp__meny {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: none; border: 1px solid var(--linje-mork); border-radius: var(--r); cursor: pointer; padding: 0;
  }
  .topp__meny-strek, .topp__meny-strek::before { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.3s var(--lett); }
  .topp__meny-strek::before { content: ""; position: absolute; top: 6px; }
  .topp__meny-strek { transform: translateY(-3px); }
  .topp__meny[aria-expanded="true"] .topp__meny-strek { transform: rotate(45deg); }
  .topp__meny[aria-expanded="true"] .topp__meny-strek::before { transform: translateY(-6px) rotate(-90deg); }
  .topp__nav {
    position: fixed; inset: var(--topp-h) 0 0; flex-direction: column; gap: 0; padding: 12px var(--kant) 32px;
    background: var(--natt); overflow-y: auto; font-size: 1.5rem; font-weight: 300;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.3s, transform 0.35s var(--lett), visibility 0s 0.35s;
  }
  .topp__nav > a { padding: 14px 0; border-bottom: 1px solid var(--linje-mork); }
  .topp__nav > a::after { display: none; }
  .meny-apen .topp__nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.3s, transform 0.35s var(--lett); }
  .meny-apen .topp { background: var(--natt); }
  .topp__mobilinfo { display: grid; gap: 12px; margin-top: 28px; font-size: 0.95rem; }
  .topp__mobilinfo p { color: var(--dempet-mork); margin-top: 8px; line-height: 1.7; }
}
@media (max-width: 520px) { .topp__bestill { display: none; } }

/* ---------------------------------------------------------------- produkttegningene */
.tegning { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.t-kontur { stroke-width: 1.6; }
.t-detalj { stroke-width: 1; }
.t-senter { stroke-width: 0.7; stroke-dasharray: 14 4 2 4; opacity: 0.4; }
.t-gulv { stroke-width: 0.8; opacity: 0.45; }
.t-mal { stroke: var(--messing-mork); stroke-width: 0.8; }
.t-mal text { fill: var(--messing-mork); stroke: none; font-family: var(--font); font-size: 11px; font-weight: 450; letter-spacing: 0.1em; }
.flate--mork .t-mal { stroke: var(--messing); }
.flate--mork .t-mal text { fill: var(--messing); }
.t-ror { stroke-width: 1.1; opacity: 0.55; }
.t-flyt { stroke: var(--messing); stroke-width: 2.4; stroke-dasharray: 7 13; opacity: 0; transition: opacity 1.2s 1.4s; }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .t-flyt { stroke: var(--messing-mork); }
.er-tegnet .t-flyt, .flyter .t-flyt { opacity: 1; }
html:not(.js) .t-flyt { opacity: 1; }
.flyter .t-flyt { animation: flyt 1.6s linear infinite; }
@keyframes flyt { to { stroke-dashoffset: -20; } }

/* strekene tegnes fram når tegningen kommer inn i bildet (script.js setter --l og .er-tegnet) */
.js [data-tegn] .t-kontur, .js [data-tegn] .t-detalj, .js [data-tegn] .t-ror path { stroke-dasharray: var(--l, 2000); stroke-dashoffset: var(--l, 2000); }
.js [data-tegn] .t-mal, .js [data-tegn] .t-senter, .js [data-tegn] .t-gulv { opacity: 0; transition: opacity 0.8s 0.9s; }
.js [data-tegn].er-tegnet .t-kontur { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--lett); }
.js [data-tegn].er-tegnet .t-detalj { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s 0.35s var(--lett); }
.js [data-tegn].er-tegnet .t-ror path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s 0.5s var(--lett); }
.js [data-tegn].er-tegnet .t-mal { opacity: 1; }
.js [data-tegn].er-tegnet .t-senter { opacity: 0.4; }
.js [data-tegn].er-tegnet .t-gulv { opacity: 0.45; }

/* ---------------------------------------------------------------- forsiden: velkommen (lys topp)
   Delt topp: teksten til venstre står nederst (tittel over to linjer, andre linje i messing, så ingress og
   handling på én rad, og en bunnlinje med godkjenning, Google og akutt), bildet fyller høyre kolonne helt
   ut til kanten. Bildet trekkes fram fra høyre når toppen kommer inn. */
.velkommen { display: grid; grid-template-columns: minmax(0, 1fr) min(40vw, 700px); min-height: max(640px, 100svh); padding: var(--topp-h) 0 0 max(var(--kant), (100% - var(--ramme)) / 2); }
.velkommen__tekst { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 5vh, 64px) clamp(28px, 3.4vw, 64px) 0 0; container-type: inline-size; }
.velkommen__tittel { margin-top: auto; }
.velkommen__bunn { margin-top: auto !important; }
.velkommen__tittel { font-size: min(12.1cqi, 8.4rem); line-height: 1; color: var(--blekk); }   /* «Din lokale rørlegger» fyller kolonnen */
.velkommen__tittel .velkommen__linje, .velkommen__tittel .aksent { display: block; white-space: nowrap; }
.aksent { color: var(--logo-lys); }
.velkommen__rad { display: grid; grid-template-columns: minmax(0, 1.15fr) auto; gap: 20px clamp(28px, 3.4vw, 56px); align-items: end; margin-top: clamp(28px, 5vh, 56px); margin-bottom: clamp(32px, 6vh, 72px); }
.velkommen__ingress { max-width: 40ch; font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.28rem); color: var(--dempet); }
.velkommen__handling { display: grid; justify-items: start; gap: 14px; }
.velkommen__tlf { display: grid; font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: clamp(1.4rem, 1rem + 0.9vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.05; text-decoration: none; color: var(--blekk); transition: color 0.3s; }
.velkommen__tlf span { margin-bottom: 4px; font-family: var(--font); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; color: var(--dempet); }
.velkommen__tlf:hover { color: var(--logo-lys); }
/* bunnlinja: merket for sentral godkjenning, Google og akutt */
.velkommen__bunn { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0 26px; border-top: 1px solid var(--linje-sterk); }
.velkommen__merker { display: flex; align-items: center; gap: 26px; }
.velkommen__sg { height: 54px; width: auto; color: var(--blekk); opacity: 0.85; }
.velkommen__google { display: flex; align-items: center; gap: 12px; padding-left: 26px; border-left: 1px solid var(--linje-sterk); font-size: 0.9rem; line-height: 1.35; color: var(--dempet); text-decoration: none; }
.velkommen__google b { color: var(--blekk); font-weight: 600; }
.velkommen__google:hover span { color: var(--blekk); }
.velkommen__akutt { display: grid; justify-items: end; gap: 3px; text-align: right; }
.velkommen__akutt b { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--blekk); }
.velkommen__akutt i { width: 8px; height: 8px; border-radius: 50%; background: var(--messing); box-shadow: 0 0 0 4px color-mix(in srgb, var(--messing) 22%, transparent); }
.velkommen__akutt.er-apen i { background: #3f9a5b; box-shadow: 0 0 0 4px rgba(63, 154, 91, 0.18); }
.velkommen__akutt span { font-size: 0.88rem; color: var(--dempet); }
.velkommen__foto { position: relative; margin: 0; overflow: hidden; background: var(--natt); }
.velkommen__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.js .velkommen__foto { clip-path: inset(0 0 0 100%); transition: clip-path 1.5s cubic-bezier(0.7, 0, 0.2, 1) 0.1s; }
.js .velkommen__foto img { scale: 1.12; transition: scale 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s; }
.js .velkommen.er-inne .velkommen__foto, .reserve .velkommen__foto { clip-path: inset(0 0 0 0); }
.js .velkommen.er-inne .velkommen__foto img, .reserve .velkommen__foto img { scale: 1; }
@media (prefers-reduced-motion: reduce) { .js .velkommen__foto { clip-path: none; transition: none; } .js .velkommen__foto img { scale: 1; } }
@media (max-width: 1180px) { .velkommen__rad { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 900px) {
  .velkommen { display: flex; flex-direction: column; min-height: 0; padding: var(--topp-h) 0 0; }
  .velkommen__tekst { display: contents; }
  .velkommen__tittel { order: 1; padding: 28px var(--kant) 0; font-size: min(3.4rem, 12.5vw); }
  .velkommen__tittel .velkommen__linje { white-space: normal; }
  .velkommen__rad { order: 2; padding: 0 var(--kant); margin-top: 22px; }
  .velkommen__foto { order: 3; margin-top: 36px; aspect-ratio: 4 / 5; }
  .velkommen__bunn { order: 4; margin: 0 var(--kant) !important; padding: 20px 0 8px; border-top: 0; flex-wrap: wrap; }
  .velkommen__rad { margin-bottom: 0; }
  .velkommen__sg { height: 44px; }
  .velkommen__merker { gap: 18px; }
  .velkommen__google { padding-left: 18px; }
}
@media (max-width: 520px) { .velkommen__akutt { justify-items: start; text-align: left; } }

/* logo-intro: første besøk på forsiden i en økt. Skjoldet fylles nedenfra som vann som stiger,
   ordmerket glir inn, og det mørke teppet trekkes opp. */
.intro { display: none; }
.med-intro .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; color: var(--messing); }
.med-intro body { overflow: hidden; }
.intro__merke { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.intro__skjold { width: auto; height: clamp(64px, 9vw, 112px); fill: currentColor; clip-path: inset(100% 0 0 0); animation: intro-fyll 1.1s 0.15s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.intro__ord { width: auto; height: clamp(22px, 3.1vw, 40px); fill: currentColor; clip-path: inset(0 100% 0 0); animation: intro-ord 0.9s 0.75s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
.med-intro .intro.er-ferdig { transform: translateY(-100%); transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1); }
@keyframes intro-fyll { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-ord { to { clip-path: inset(0 0 0 0); } }
.ordmerke { display: block; }

/* myke overganger mellom sidene (Chrome og Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }


/* menyen er mørk tekst over den lyse toppen, til man scroller */
.side-forside .topp:not(.er-rullet) { color: var(--blekk); }
.side-forside .topp:not(.er-rullet) .topp__logo { color: var(--logo-lys); }
.side-forside .topp:not(.er-rullet) .topp__nav > a { color: rgba(22, 21, 19, 0.78); }
.side-forside .topp:not(.er-rullet) .topp__nav > a:hover { color: var(--blekk); }
.side-forside .topp:not(.er-rullet) .topp__tlf svg { color: var(--messing-mork); }
.side-forside .topp:not(.er-rullet) .topp__tlf, .side-forside .topp:not(.er-rullet) .topp__meny { border-color: var(--linje-sterk); }
.side-forside.meny-apen .topp { color: var(--lys); }
.side-forside.meny-apen .topp .topp__logo { color: var(--messing); }
.side-forside.meny-apen .topp .topp__nav > a { color: var(--lys); }
.side-forside.meny-apen .topp .topp__tlf svg { color: var(--messing); }
.side-forside.meny-apen .topp .topp__tlf, .side-forside.meny-apen .topp .topp__meny { border-color: var(--linje-mork); }

/* ---------------------------------------------------------------- forsiden: toppen */
.helt { position: relative; padding-top: calc(var(--topp-h) + clamp(32px, 6vh, 72px)); overflow: hidden; }
.helt__ramme { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(78vh, 760px); }
.helt__etikett { margin-bottom: 26px; }
.helt__tittel { font-size: clamp(2.8rem, 6.2vw, 5.6rem); max-width: 12ch; }
.helt__ingress { margin-top: 28px; max-width: 46ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: rgba(236, 231, 222, 0.82); }
.helt__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.helt__figur { position: relative; justify-self: end; width: min(100%, 640px); }
.helt__tegning { color: var(--lys); }
.helt__felt { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(48px, 6vw, 72px); }
.helt__akutt { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 0.92rem; color: var(--dempet-mork); }

.tittelfelt { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--linje-mork); }
.tittelfelt > div { padding: 18px 20px 4px 0; border-right: 1px solid var(--linje-mork); margin-right: 20px; }
.tittelfelt > div:last-child { border-right: 0; margin-right: 0; }
.tittelfelt dt { font-weight: 450; font-size: 0.95rem; }
.tittelfelt dd { margin-top: 4px; font-size: 0.85rem; color: var(--dempet-mork); line-height: 1.45; }
.tittelfelt a { text-decoration: none; }
.tittelfelt a:hover { text-decoration: underline; }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .tittelfelt { border-color: var(--linje); }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .tittelfelt > div { border-color: var(--linje); }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .tittelfelt dd { color: var(--dempet); }

@media (max-width: 900px) {
  .helt__ramme { grid-template-columns: 1fr; min-height: 0; }
  .helt__figur { width: 100%; justify-self: start; margin-top: 8px; }
  .tittelfelt { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .tittelfelt > div { border-right: 0; margin-right: 0; padding: 14px 0 12px; }
  .tittelfelt > div:nth-child(n + 3) { border-top: 1px solid var(--linje-mork); }
  :is(.flate--kalk, .flate--puss) .tittelfelt > div:nth-child(n + 3) { border-color: var(--linje); }
}

/* ---------------------------------------------------------------- seksjoner */
.seksjon { padding-block: var(--seksjon); }
.seksjon + .seksjon { background: linear-gradient(var(--linje), var(--linje)) top center / calc(100% - 2 * var(--kant)) 1px no-repeat; }
.flate--mork .seksjon + .seksjon { background-image: linear-gradient(var(--linje-mork), var(--linje-mork)); }
.seksjon__hode { margin-bottom: clamp(36px, 5vw, 64px); }
.seksjon__hode .etikett { margin-bottom: 18px; }
.seksjon__hode h2 { max-width: 18ch; }
.seksjon__hode--delt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.seksjon__hode--midt { display: grid; justify-items: center; gap: 18px; max-width: 52rem; margin-inline: auto; text-align: center; }
.seksjon__hode--midt h2 { max-width: none; text-wrap: balance; }
.seksjon__hode--midt + .pakker--2 { margin-inline: auto; }
.seksjon__hode--midt .seksjon__ingress { justify-items: center; max-width: 46ch; font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); }
.flate--mork .aksent { color: var(--messing); }
.seksjon__mer { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 52px); }
/* anmeldelsene på forsiden: én stor, sentrert, og to mindre under */
.omtaler { display: grid; justify-items: center; text-align: center; }
.omtaler__snitt { display: inline-flex; align-items: center; gap: 12px; color: var(--dempet); font-size: 0.95rem; }
.omtaler__snitt b { color: var(--blekk); font-weight: 600; }
.omtaler__stor { margin: clamp(28px, 4vw, 48px) 0 0; display: grid; justify-items: center; gap: 26px; }
.omtaler__stor blockquote p { max-width: 28ch; font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: clamp(1.8rem, 1.1rem + 2.3vw, 3.2rem); letter-spacing: var(--tittel-sperring); line-height: 1.1; text-wrap: balance; }
.omtaler figcaption { font-weight: 600; }
.omtaler figcaption::before { content: "– "; color: var(--dempet); }
.omtaler__sma { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); max-width: 60rem; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linje); }
.omtaler__sma figure { margin: 0; display: grid; gap: 12px; }
.omtaler__sma blockquote p { font-size: 1.08rem; line-height: 1.5; color: var(--dempet); }
.omtaler .lenke { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 760px) { .omtaler__sma { grid-template-columns: 1fr; } }
.seksjon__ingress { display: grid; gap: 18px; justify-items: start; color: var(--dempet); max-width: 48ch; }
.flate--mork .seksjon__ingress { color: rgba(236, 231, 222, 0.78); }
.ledig-linje { display: inline-flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--blekk); font-weight: 450; }
.ledig-linje[hidden] { display: none; }
.ledig-linje--lys { color: var(--lys); margin-top: 22px; }
@media (max-width: 900px) { .seksjon__hode--delt { grid-template-columns: 1fr; align-items: start; } }

/* ---------------------------------------------------------------- fastprispakkene */
.pakker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--linje-sterk); }
.pakker--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pakker--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pakker--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.pakker--3 .pakke__tegning, .pakker--2 .pakke__tegning { max-width: 250px; }
.pakke__pris--avtales { flex-direction: column; align-items: flex-start; gap: 0; }
.pakke__pris--avtales b { font-size: 1.3rem; }
.pakke { border-right: 1px solid var(--linje); }
.pakke:last-child { border-right: 0; }
.pakke > a { display: flex; flex-direction: column; height: 100%; padding: 26px 22px 30px; text-decoration: none; transition: background 0.35s; }
.pakke:first-child > a { padding-left: 0; }
.pakke > a:hover { background: rgba(22, 21, 19, 0.035); }
.pakke__tegning { display: block; aspect-ratio: 360 / 440; margin: 0 auto 22px; width: 100%; max-width: 230px; color: var(--blekk); }
/* produktbildet i fastpriskortene: på hvitt, som i bestillingsboksen */
.pakke__bilde { display: grid; place-items: center; aspect-ratio: 1; margin: 0 0 22px; border: 1px solid var(--linje); border-radius: 6px; background: #fff; overflow: hidden; }
.pakke__bilde img { width: 78%; height: 78%; object-fit: contain; transition: transform 0.6s var(--lett); }
.pakke > a:hover .pakke__bilde img { transform: scale(1.04); }
.pakke__navn { margin-top: 10px; font-size: 1.22rem; font-weight: 450; letter-spacing: -0.015em; line-height: 1.25; }
.pakke__ingress { margin-top: 6px; font-size: 0.88rem; color: var(--dempet); line-height: 1.45; }
.pakke__pris { margin-top: auto; padding-top: 22px; display: flex; align-items: baseline; gap: 6px; }
.pakke__pris small { font-size: 0.85rem; color: var(--dempet); }
.pakke__pris b { font-size: 1.65rem; font-weight: var(--tittel-vekt); letter-spacing: -0.02em; }
.pakke .lenke { margin-top: 14px; align-self: flex-start; font-size: 0.9rem; }
.pakke .tegning .t-kontur { transition: stroke-width 0.3s; }
.pakke > a:hover .tegning .t-kontur { stroke-width: 2; }

@media (max-width: 860px) {
  .pakker, .pakker--4, .pakker--3, .pakker--2 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--kant)); padding-inline: var(--kant); scroll-padding-inline: var(--kant); }
  .pakker::-webkit-scrollbar { display: none; }
  .pakke { flex: 0 0 min(300px, 74vw); scroll-snap-align: start; }
  .pakke:last-child { border-right: 1px solid var(--linje); }
}

/* ---------------------------------------------------------------- fra jobbene og anmeldelser (mørk) */
.jobber { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
.jobb > a { display: grid; gap: 6px; text-decoration: none; }
.jobb__bilde { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r); background: var(--natt-2); margin-bottom: 12px; }
.jobb__bilde img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lett); }
.jobb > a:hover .jobb__bilde img { transform: scale(1.03); }
.jobb__tittel { font-weight: 450; font-size: 1.05rem; }
.jobb__tekst { font-size: 0.9rem; color: var(--dempet-mork); line-height: 1.5; }
@media (max-width: 900px) {
  .jobber { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--kant)); padding-inline: var(--kant); scroll-padding-inline: var(--kant); }
  .jobber::-webkit-scrollbar { display: none; }
  .jobb { flex: 0 0 min(260px, 66vw); scroll-snap-align: start; }
}

.anmeldelser { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--linje-mork); display: grid; gap: 28px; justify-items: start; }
.anmeldelser__snitt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--dempet-mork); font-size: 0.92rem; }
.anmeldelser__snitt b { color: var(--lys); font-weight: 500; }
.anmeldelser__liste { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); width: 100%; }
.anmeldelser__liste li { display: grid; gap: 14px; align-content: start; }
.anmeldelser__liste blockquote p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 300; line-height: 1.5; letter-spacing: -0.005em; }
.anmeldelser__liste li:first-child blockquote p { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.32; letter-spacing: -0.02em; }
.anmeldelser__navn { font-size: 0.85rem; color: var(--messing); letter-spacing: 0.04em; }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .anmeldelser { border-color: var(--linje); margin-top: 0; padding-top: 0; border: 0; }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .anmeldelser__snitt { color: var(--dempet); }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .anmeldelser__snitt b { color: var(--blekk); }
:is(.flate--kalk, .flate--puss, .flate--marmor, .flate--betong, .flate--drapar) .anmeldelser__navn { color: var(--messing-mork); }
@media (max-width: 900px) { .anmeldelser__liste { grid-template-columns: 1fr; } }

/* jobbilde på pakkesiden */
.pjobb { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; padding-block: 0 clamp(48px, 6vw, 80px); }
.seksjon + .pjobb { background: none; }
.pjobb__bilde { width: 100%; max-width: min(var(--w), 360px); aspect-ratio: var(--r); overflow: hidden; border-radius: var(--r); background: var(--kalk-2); }
.pjobb__bilde img { width: 100%; height: 100%; object-fit: cover; }
.pjobb__tekst { display: grid; gap: 14px; justify-items: start; max-width: 52ch; }
.pjobb__tekst p:not(.etikett) { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; }
@media (max-width: 760px) { .pjobb { grid-template-columns: 1fr; } .pjobb__bilde { max-width: 260px; } }

/* bilde i undersidetoppen (tjenester) */
.stopp__bilde { justify-self: center; width: min(100%, 340px); max-width: var(--w); aspect-ratio: var(--r); overflow: hidden; border-radius: var(--r); }
.stopp__bilde img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .stopp__bilde { justify-self: start; width: min(64%, 260px); } }

/* ---------------------------------------------------------------- slik bestiller du (røret som fylles) */
.steg { position: relative; --fyll: 0; }
.steg__ror { position: absolute; left: 0; right: 0; top: 23px; height: 8px; border-block: 1px solid var(--linje-sterk); }
.steg__vann { position: absolute; inset: 1px 0; background: linear-gradient(90deg, var(--messing-mork), var(--messing)); transform-origin: left; transform: scaleX(var(--fyll)); }
.steg__liste { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steg__node { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--linje-sterk); background: var(--kalk); margin-bottom: 26px; position: relative; }
.steg__node span { font-size: 0.9rem; font-weight: 500; transition: color 0.4s; }
.steg__node::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--messing); transform: scale(0); transition: transform 0.5s var(--lett); }
.steg__punkt.er-fylt .steg__node::before { transform: scale(1); }
.steg__punkt.er-fylt .steg__node span { color: var(--natt); position: relative; }
.steg__node span { position: relative; z-index: 1; }
.steg h3 { font-size: 1.2rem; }
.steg p { margin-top: 8px; color: var(--dempet); font-size: 0.97rem; max-width: 30ch; }
@media (max-width: 860px) {
  .steg__ror { left: 26px; right: auto; top: 0; bottom: 0; width: 8px; height: auto; border-block: 0; border-inline: 1px solid var(--linje-sterk); }
  .steg__vann { inset: 0 1px; transform-origin: top; transform: scaleY(var(--fyll)); background: linear-gradient(180deg, var(--messing-mork), var(--messing)); }
  .steg__liste { grid-template-columns: 1fr; gap: 34px; }
  .steg__punkt { display: grid; grid-template-columns: 54px 1fr; column-gap: 22px; }
  .steg__node { grid-row: span 2; margin: 0; }
}

/* ---------------------------------------------------------------- fast pris (forsiden)
   Berederen som et stort, mørkt tilbudskort; blandebatteri og vannstopper som to mindre kort ved siden av. */
.fastpris { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.fp-hoved { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 8px; background: var(--mork-flate); color: var(--lys); }
.fp-hoved__navn { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: clamp(1.8rem, 2.4vw, 2.3rem); letter-spacing: var(--tittel-sperring); line-height: 1; }
.fp-hoved__info { margin-top: 10px; color: var(--dempet-mork); font-size: 0.95rem; }
.fp-hoved__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 26px; }
.fp-hoved__pris small { font-size: 1rem; color: var(--dempet-mork); }
.fp-hoved__pris b { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: clamp(2.8rem, 4.6vw, 4rem); letter-spacing: var(--tittel-sperring); line-height: 1; color: var(--messing-lys); }
.fp-hoved__pris span { width: 100%; font-size: 0.88rem; color: var(--dempet-mork); }
.fp-hoved__med { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linje-mork); font-size: 0.95rem; }
.fp-hoved__med li { display: flex; gap: 10px; align-items: baseline; }
.fp-hoved__med svg { flex: none; width: 15px; height: 15px; color: var(--messing); transform: translateY(2px); }
.fp-hoved__knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.fp-hoved__tegning { justify-self: center; width: min(100%, 300px); color: var(--lys); }
.fp-hoved__tegning svg { display: block; width: 100%; height: auto; }
.fp-hoved .t-mal { stroke: var(--messing); }
.fp-hoved .t-mal text { fill: var(--messing); }
.fp-andre { display: grid; gap: 16px; }
.fp-kort { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 26px 22px 18px; border: 1px solid var(--linje); border-radius: 8px; background: rgba(255, 255, 255, 0.62); text-decoration: none; transition: background 0.25s, border-color 0.25s, transform 0.35s var(--lett), box-shadow 0.35s var(--lett); }
.fp-kort:hover { background: #fff; border-color: var(--messing); transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(22, 21, 19, 0.45); }
.fp-kort__tegning { display: block; color: var(--blekk); }
.fp-kort__bilde { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--linje); border-radius: 6px; background: #fff; overflow: hidden; }
.fp-kort__bilde img { width: 84%; height: 84%; object-fit: contain; }
.fp-kort .t-kontur { stroke-width: 1.6; }
.fp-kort__tegning svg { display: block; width: 100%; height: auto; }
.fp-kort__tekst { display: grid; gap: 4px; }
.fp-kort__navn { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.1; }
.fp-kort__info { font-size: 0.88rem; color: var(--dempet); }
.fp-kort__pris { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.fp-kort__pris b { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.15rem; }
.fp-kort__pris small { font-size: 0.85rem; color: var(--dempet); }
.fp-kort .pil { color: var(--messing-mork); transition: transform 0.3s var(--lett); }
.fp-kort:hover .pil { transform: translateX(4px); }
@media (max-width: 1000px) { .fastpris { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .fp-hoved { grid-template-columns: 1fr; }
  .fp-hoved__tegning { order: -1; width: 150px; justify-self: start; margin: -8px 0 -12px -12px; }
  .fp-kort { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 16px; }
}

/* ---------------------------------------------------------------- tjenester (forsiden) */
.tjenester { display: grid; gap: clamp(28px, 4vw, 56px); }
.tjenester__ogsa { display: grid; gap: 18px; margin-top: clamp(24px, 4vw, 48px); }
.tjenester .tj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); border-top: 1px solid var(--linje-sterk); }
.tjenester .tj li { border-color: var(--linje); }
.tjenester .tj a { grid-template-columns: 1fr auto; gap: 4px 18px; padding: 20px 0; }
.tjenester .tj__navn { font-size: 1.35rem; line-height: 1.2; grid-column: 1; }
.tjenester .tj__tekst { grid-column: 1; color: var(--dempet); font-size: 0.92rem; }
.tjenester .tj .pil { grid-column: 2; grid-row: 1 / span 2; color: var(--messing-mork); }
@media (max-width: 900px) {
  .tjenester .tj { grid-template-columns: 1fr; }
}

/* tjenestene på forsiden: kort som legger seg over hverandre. Kortet under krymper litt og mørkner
   (script.js setter transform og skyggen direkte, ikke via CSS-variabler, så det er lett å tegne). */
.tjstabel { display: grid; gap: 28px; }
.tjkort {
  position: sticky; top: calc(var(--topp-h) + 18px + var(--i) * 14px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center;
  min-height: min(74vh, 640px); padding: clamp(28px, 4vw, 60px); border-radius: 8px; overflow: hidden;
  background: #faf8f4; border: 1px solid var(--linje); transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 -18px 50px -30px rgba(22, 21, 19, 0.35), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.tjkort__skygge { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2; }
.tjkort__tekst { display: grid; gap: 18px; justify-items: start; position: relative; z-index: 1; }
.tjkort__tittel { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); letter-spacing: var(--tittel-sperring); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; max-width: 13ch; }
.tjkort__ingress { color: var(--dempet); max-width: 40ch; font-size: 1.05rem; }
.tjkort__punkter { display: grid; width: 100%; max-width: 30rem; border-top: 1px solid var(--linje); }
.tjkort__punkter li { padding: 11px 0; border-bottom: 1px solid var(--linje); font-size: 0.95rem; }
/* tegningen står på et eget ark med tittelfelt nederst, som en arbeidstegning */
.tjkort__ark { position: relative; z-index: 1; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; border: 1px solid var(--linje); border-radius: 4px; background: #fdfcf9; overflow: hidden; }
.tjkort__tegning { display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); color: var(--blekk); }
.tjkort__tegning svg { display: block; width: 100%; max-height: min(46vh, 400px); }
.tjkort__bilde { position: relative; min-height: 300px; }
.tjkort__bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tjkort__felt { display: grid; grid-template-columns: 1fr 1.3fr; border-top: 1px solid var(--linje); font-size: 0.78rem; color: var(--dempet); }
.tjkort__felt span { display: grid; gap: 2px; padding: 10px 14px; }
.tjkort__felt span + span { border-left: 1px solid var(--linje); }
.tjkort__felt b { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blekk); }
/* mørke kort (annenhver): stålflate, tegningen i lyse streker og messingmål */
.tjkort--mork { background: var(--mork-flate); color: var(--lys); border-color: transparent; }
.tjkort--mork .tjkort__ingress { color: rgba(236, 231, 222, 0.78); }
.tjkort--mork .tjkort__punkter, .tjkort--mork .tjkort__punkter li { border-color: var(--linje-mork); }
.tjkort--mork .tjkort__ark { background: rgba(255, 255, 255, 0.025); border-color: var(--linje-mork); }
.tjkort--mork .tjkort__tegning { color: var(--lys); }
.tjkort--mork .tjkort__felt { border-color: var(--linje-mork); color: var(--dempet-mork); }
.tjkort--mork .tjkort__felt span + span { border-color: var(--linje-mork); }
.tjkort--mork .tjkort__felt b { color: var(--lys); }
.tjkort--mork .t-mal { stroke: var(--messing); }
.tjkort--mork .t-mal text { fill: var(--messing); }
.tjkort--mork .t-flyt { stroke: var(--messing); }
@media (max-width: 900px) {
  .tjkort { grid-template-columns: 1fr; min-height: 0; padding: 26px; top: calc(var(--topp-h) + 10px + var(--i) * 8px); }
  .tjkort__ark { order: -1; }
  .tjkort__bilde { min-height: 0; aspect-ratio: 4 / 3; }
}

/* vannbåren varme */
.varme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--linje-sterk); padding-top: 28px; }
.varmeoversikt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.varmeoversikt .varme { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.varmeoversikt .varme__punkt { padding: 22px 0; border-bottom: 1px solid var(--linje); }
/* mørkt kort med en teknisk tegning (samme flate og farger som de mørke tjenestekortene) */
.tegningkort { margin: 0; padding: clamp(28px, 4vw, 56px); border-radius: 8px; background: var(--mork-flate); color: var(--lys); }
.tegningkort svg { display: block; width: 100%; height: auto; }
.tegningkort .t-mal { stroke: var(--messing); }
.tegningkort .t-mal text { fill: var(--messing); }
.tegningkort .t-flyt { stroke: var(--messing); }
.tegningkort figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linje-mork); font-size: 0.88rem; color: var(--dempet-mork); }
@media (max-width: 900px) { .varmeoversikt { grid-template-columns: 1fr; } }
.varme h3 { margin: 0 0 6px; font-family: var(--font-tittel); font-size: 1.4rem; font-weight: var(--tittel-vekt); letter-spacing: -0.015em; }
.varme p { color: var(--dempet); }
.stopp__objekt--bred { width: min(100%, 560px); }
@media (max-width: 900px) { .varme { grid-template-columns: 1fr; } .stopp__objekt--bred { width: 100%; } }

/* ---------------------------------------------------------------- alt annet (mørk) */
.seksjon-flate .seksjon { padding-block: var(--seksjon); }
.tj { border-top: 1px solid var(--linje-mork); }
.tj li { border-bottom: 1px solid var(--linje-mork); }
.tj a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px; align-items: center; padding: 24px 0; text-decoration: none; transition: padding 0.35s var(--lett), color 0.3s; }
.tj a:hover { padding-left: 12px; }
.tj__navn { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.tj__tekst { color: var(--dempet-mork); font-size: 0.95rem; }
.tj .pil { color: var(--messing); }
@media (max-width: 760px) { .tj a { grid-template-columns: 1fr auto; } .tj__tekst { grid-column: 1; } .tj .pil { grid-row: 1 / span 2; grid-column: 2; } }

/* ---------------------------------------------------------------- akutt (messing) */
.akutt { background: var(--band); color: var(--band-tekst); }
.akutt .etikett { color: var(--band-tekst); opacity: 0.75; }
:root[data-tema="lilla"] .akutt .etikett { color: var(--messing-lys); opacity: 1; }
:root[data-tema="lilla"] .akutt .knapp--natt { background: var(--messing); border-color: var(--messing); color: var(--natt); }
:root[data-tema="lilla"] .akutt__liste li { border-color: rgba(243, 238, 251, 0.3); }
.akutt__ramme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; padding-block: clamp(56px, 7vw, 96px); }
.akutt__hode h2 { margin: 14px 0 28px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.akutt__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-content: start; }
.akutt__liste li { border-top: 1px solid rgba(20, 19, 18, 0.35); padding-top: 18px; }
.akutt__nr { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; }
.akutt__liste h3 { margin-top: 10px; }
.akutt__liste p { margin-top: 6px; font-size: 0.93rem; line-height: 1.5; }
@media (max-width: 900px) { .akutt__ramme, .akutt__liste { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- om oss og sitat */
.om { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.om__bilde { width: 100%; max-width: var(--w); aspect-ratio: var(--r); overflow: hidden; border-radius: var(--r); background: var(--kalk-2); }
.om__bilde img { width: 100%; height: 100%; object-fit: cover; }
.om__tekst { display: grid; gap: 18px; justify-items: start; }
.om__felt { grid-column: 1 / -1; margin-top: clamp(24px, 4vw, 48px); }
.om__tekst h2 { margin-bottom: 6px; }
.om__tekst p { color: var(--dempet); max-width: 50ch; }
.sitat { grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--linje); text-align: center; display: grid; justify-items: center; gap: 18px; }
.sitat blockquote p { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.2; max-width: 26ch; }
.sitat figcaption { color: var(--dempet); font-size: 0.92rem; }
.sitat__snitt { display: inline-flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--dempet); }
.sitat__snitt b { color: var(--blekk); font-weight: 500; }
.stjerner { display: inline-flex; gap: 2px; color: var(--messing); }
.stjerner svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .om { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- spørsmål og svar */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; }
.faq .seksjon__hode { margin: 0; }
.faq__liste { border-top: 1px solid var(--linje-sterk); }
.faq__sporsmal { border-bottom: 1px solid var(--linje); }
.faq__sporsmal summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font-size: 1.08rem; font-weight: 400; }
.faq__sporsmal summary::-webkit-details-marker { display: none; }
.faq__pluss { position: relative; width: 14px; height: 14px; flex: none; }
.faq__pluss::before, .faq__pluss::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: currentColor; transition: transform 0.35s var(--lett); }
.faq__pluss::after { transform: rotate(90deg); }
.faq__sporsmal[open] .faq__pluss::after { transform: rotate(0); }
.faq__svar { padding: 0 48px 24px 0; color: var(--dempet); max-width: 66ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- slutten: kontakt og bunn */
.kontaktblokk { padding-block: clamp(80px, 10vw, 140px) clamp(56px, 7vw, 96px); }
/* varmt vann (Grok) bak kontaktblokken og toppen på vannbåren varme: mørkt til venstre der teksten står */
.kontaktblokk, .stopp--vann {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--natt) 94%, transparent) 0%, color-mix(in srgb, var(--natt) 62%, transparent) 42%, transparent 78%),
    linear-gradient(0deg, var(--natt) 0%, transparent 38%),
    url("/assets/tekstur/vann.webp") 70% 55% / cover no-repeat;
}
.stopp--vann { background-color: var(--natt); }
/* i kontaktblokken står det tekst på begge sider: vannet dempes jevnt, så lenkene til høyre er lette å lese */
.kontaktblokk {
  background:
    linear-gradient(0deg, var(--natt) 0%, transparent 40%),
    linear-gradient(90deg, color-mix(in srgb, var(--natt) 90%, transparent) 0%, color-mix(in srgb, var(--natt) 58%, transparent) 50%, color-mix(in srgb, var(--natt) 70%, transparent) 100%),
    url("/assets/tekstur/vann.webp") 60% 40% / cover no-repeat;
}
@media (max-width: 900px) {
  .kontaktblokk, .stopp--vann { background:
    linear-gradient(0deg, color-mix(in srgb, var(--natt) 92%, transparent) 0%, color-mix(in srgb, var(--natt) 70%, transparent) 55%, color-mix(in srgb, var(--natt) 35%, transparent) 100%),
    url("/assets/tekstur/vann.webp") 70% 50% / cover no-repeat var(--natt); }
}
.kontaktblokk__ramme { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 64px; align-items: end; }
.kontaktblokk__tittel { margin-top: 18px; font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -0.045em; }
.kontaktblokk__tittel a { text-decoration: none; background: linear-gradient(var(--messing), var(--messing)) left bottom / 0 1px no-repeat; transition: background-size 0.6s var(--lett); }
.kontaktblokk__tittel a:hover { background-size: 100% 1px; }
.kontaktblokk__under { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--dempet-mork); }
.kontaktblokk__valg { border-top: 1px solid var(--linje-mork); }
.kontaktvalg { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 20px 0; border-bottom: 1px solid var(--linje-mork); text-decoration: none; }
.kontaktvalg .etikett { grid-column: 1; }
.kontaktvalg__tittel { grid-column: 1; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; margin-top: 6px; overflow-wrap: anywhere; }
.kontaktvalg__tekst { grid-column: 1; font-size: 0.9rem; color: var(--dempet-mork); }
.kontaktvalg .pil { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--messing); }
.kontaktvalg--lys { border-color: var(--linje); }
.kontaktvalg--lys .kontaktvalg__tekst { color: var(--dempet); }
.kontaktvalg--lys .pil { color: var(--messing-mork); }
@media (max-width: 900px) { .kontaktblokk__ramme { grid-template-columns: 1fr; } }

.bunn { padding-block: 56px 40px; border-top: 1px solid var(--linje-mork); }
.bunn__ramme { display: grid; gap: 48px; }
.bunn__merke { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; color: var(--messing); }
.bunn__logo { height: clamp(34px, 5.4vw, 64px); }
.bunn__kolonner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.bunn__kolonner ul { margin-top: 14px; display: grid; gap: 8px; font-size: 0.93rem; color: rgba(236, 231, 222, 0.8); }
.bunn__kolonner a { text-decoration: none; }
.bunn__kolonner a:hover { text-decoration: underline; color: var(--lys); }
.bunn__info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--linje-mork); font-size: 0.82rem; color: var(--dempet-mork); }
@media (max-width: 760px) {
  .bunn__kolonner { grid-template-columns: 1fr 1fr; }
  .bunn__kolonner ul { gap: 0; }
  .bunn__kolonner li > a { display: inline-flex; align-items: center; min-height: 44px; }
  .bunn__info a { display: inline-flex; align-items: center; min-height: 44px; }
  .lenke { padding-block: 10px 6px; }
  .bryter { min-height: 44px; }
}

/* mobil: ringelinje nederst */
.ringelinje { display: none; }
@media (max-width: 760px) {
  .ringelinje {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(20, 19, 18, 0.97); border-top: 1px solid var(--linje-mork);
    transform: translateY(110%); transition: transform 0.4s var(--lett);
  }
  .ringelinje.er-synlig { transform: none; }
  .ringelinje a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--r); text-decoration: none; font-size: 0.95rem; font-weight: 450; }
  .ringelinje svg { width: 18px; height: 18px; }
  .ringelinje__ring { background: var(--messing); color: var(--natt); }
  .ringelinje__bestill { border: 1px solid rgba(236, 231, 222, 0.35); color: var(--lys); }
  .side-pakke .ringelinje, .meny-apen .ringelinje { display: none; }
  .slutt { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------- undersidetopper */
.stopp { padding-top: calc(var(--topp-h) + clamp(48px, 9vh, 110px)); padding-bottom: calc(clamp(64px, 9vw, 120px) + 28px); overflow: hidden; }
.stopp--kort { padding-bottom: calc(clamp(40px, 6vw, 72px) + 28px); }
.stopp__ramme { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
.stopp--kort .stopp__ramme, .stopp--kontakt .stopp__ramme { grid-template-columns: 1fr; }
.stopp__tekst .etikett { margin-bottom: 22px; }
.stopp__ingress { margin-top: 24px; max-width: 52ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); color: rgba(236, 231, 222, 0.8); }
.stopp__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stopp__objekt { justify-self: center; color: var(--lys); width: min(100%, 420px); }
.stopp__objekt--tegninger { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 6px; width: min(100%, 520px); }
.stopp__skjold { width: min(70%, 260px); height: auto; margin-inline: auto; fill: var(--messing); }
.kontakt__tlf { font-size: clamp(3.2rem, 11vw, 9rem); letter-spacing: -0.05em; }
.kontakt__tlf a { text-decoration: none; }
.stopp--kontakt .kontaktblokk__under { margin-top: 22px; }
@media (max-width: 900px) {
  .stopp__ramme { grid-template-columns: 1fr; }
  .stopp__objekt { width: min(64%, 300px); }
  .stopp__objekt--tegninger { width: min(100%, 420px); }
  .stopp__skjold { width: 120px; margin: 0; }
  .stopp .stopp__objekt:has(.stopp__skjold) { justify-self: start; }
}

/* oppfordringen nederst på undersidene: et messingkort, samme farge som akuttbåndet */
.ikke-her > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 48px; padding: clamp(32px, 5vw, 64px); border-radius: 8px; background: var(--band); color: var(--band-tekst); }
.ikke-her .etikett { grid-column: 1 / -1; color: var(--band-tekst); opacity: 0.75; }
.ikke-her h2 { grid-column: 1; font-size: clamp(2rem, 4vw, 3.4rem); max-width: 16ch; }
.ikke-her p:not(.etikett) { grid-column: 1; max-width: 52ch; color: var(--band-tekst); opacity: 0.85; }
.ikke-her .knapp { grid-column: 2; grid-row: 2 / span 2; align-self: end; background: var(--natt); border-color: var(--natt); color: var(--lys); }
.ikke-her .knapp:hover { background: #2a2825; }
:root[data-tema="lilla"] .ikke-her .knapp { background: var(--messing); border-color: var(--messing); color: var(--natt); }
@media (max-width: 760px) { .ikke-her > div { grid-template-columns: 1fr; } .ikke-her .knapp { grid-column: 1; grid-row: auto; justify-self: start; } }

/* tjenestesiden */
.tj2 { border-top: 1px solid var(--linje-sterk); }
.tj2__rad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 11rem; gap: 18px 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--linje); }
.tj2 h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: var(--tittel-vekt); letter-spacing: var(--tittel-sperring); line-height: 1.1; }
.tj2 p { color: var(--dempet); }
.tj2 .lenke { white-space: nowrap; font-size: 0.92rem; justify-self: end; }
@media (max-width: 820px) { .tj2__rad { grid-template-columns: 1fr; gap: 8px; } .tj2 .lenke { justify-self: start; margin-top: 8px; } }

/* om oss */
.folk { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; width: 100%; border-top: 1px solid var(--linje); padding-top: 22px; }
.person__navn { font-weight: 450; }
.person__rolle { color: var(--messing-mork); font-size: 0.85rem; }
.person__kontakt { margin-top: 10px; font-size: 0.88rem; color: var(--dempet); line-height: 1.7; overflow-wrap: anywhere; }
.person__kontakt a { text-decoration: none; }
.person__kontakt a:hover { text-decoration: underline; }
.godkj__merk { margin-top: 28px; max-width: 70ch; color: var(--dempet); }
.om--side { align-items: start; }
@media (max-width: 520px) { .folk { grid-template-columns: 1fr; } }

/* kontakt */
.kontaktside { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 80px; }
.kontaktside__valg { border-top: 1px solid var(--linje-sterk); align-self: start; }
.kontaktside__info { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; align-content: start; }
.kontaktside__info dt { font-family: var(--font-tittel); font-weight: 600; font-size: 1.05rem; color: var(--blekk); }
.kontaktside__venstre { display: grid; gap: clamp(28px, 4vw, 48px); align-content: start; }
.kontaktside__bilde { margin: 0; aspect-ratio: var(--r); overflow: hidden; border-radius: 6px; }
.kontaktside__bilde img { width: 100%; height: 100%; object-fit: cover; }
.kontaktside__info dd { margin-top: 8px; line-height: 1.6; }
.kontaktside__info a { text-decoration: none; border-bottom: 1px solid var(--linje-sterk); }
@media (max-width: 900px) { .kontaktside { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kontaktside__info { grid-template-columns: 1fr; } }

/* tekstsider (vilkår, personvern) */
.tekstside { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 32px 80px; }
.tekstside__meny { position: sticky; top: calc(var(--topp-h) + 24px); align-self: start; display: grid; gap: 10px; font-size: 0.9rem; }
.tekstside__meny a { text-decoration: none; color: var(--dempet); }
.tekstside__meny a:hover { color: var(--blekk); }
.tekst { max-width: 68ch; }
.tekst h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 56px 0 16px; scroll-margin-top: calc(var(--topp-h) + 24px); }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin: 28px 0 8px; }
.tekst p, .tekst li { color: #3a3732; }
.tekst p + p { margin-top: 14px; }
.tekst ul { margin: 12px 0; display: grid; gap: 8px; }
.tekst ul li { padding-left: 20px; position: relative; }
.tekst ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 9px; height: 1px; background: var(--messing-mork); }
.skjemaboks { margin-top: 18px; padding: 24px; border: 1px solid var(--linje-sterk); border-radius: var(--r); background: rgba(255, 255, 255, 0.35); white-space: pre-line; font-size: 0.95rem; }
@media (max-width: 900px) { .tekstside { grid-template-columns: 1fr; } .tekstside__meny { position: static; } }

/* ---------------------------------------------------------------- pakkesiden */
.ptopp { padding-top: calc(var(--topp-h) + clamp(40px, 7vh, 90px)); padding-bottom: calc(clamp(56px, 8vw, 110px) + 28px); overflow: hidden; }
.ptopp__ramme { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
.ptopp__tekst .etikett { margin-bottom: 22px; }
.ptopp h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }   /* «Ny varmtvannsbereder» skal stå på én linje på PC */
.ptopp__ingress { margin-top: 22px; max-width: 48ch; color: rgba(236, 231, 222, 0.8); font-size: clamp(1.02rem, 1.25vw, 1.15rem); }
.ptopp__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 30px; }
.ptopp__pris small { color: var(--dempet-mork); font-size: 0.95rem; }
.ptopp__pris b { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: var(--tittel-vekt); letter-spacing: var(--tittel-sperring); }
.ptopp__pris span { width: 100%; font-size: 0.88rem; color: var(--dempet-mork); }
.ptopp__pris--kommer b { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.ptopp__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ptopp__tegninger { display: grid; justify-self: center; width: min(100%, 400px); color: var(--lys); }
.ptopp__tegning { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }
.ptopp__tegning.er-aktiv { opacity: 1; visibility: visible; transition: opacity 0.5s; }
@media (max-width: 900px) { .ptopp__ramme { grid-template-columns: 1fr; } .ptopp__tegninger { width: min(62%, 300px); justify-self: start; } }
@media (max-width: 520px) { .ptopp h1 { font-size: clamp(2.1rem, 9.6vw, 3rem); } }

.datablad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-block: clamp(56px, 7vw, 96px); }
.datablad__kol { padding: 0 32px; border-left: 1px solid var(--linje); }
.datablad__kol:first-child { padding-left: 0; border-left: 0; }
.datablad__kol .deltittel { margin-bottom: 16px; }
.liste-sjekk, .liste-strek { display: grid; gap: 12px; }
.liste-sjekk li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.liste-sjekk svg { width: 20px; height: 20px; color: var(--messing-mork); margin-top: 2px; }
.liste-strek li { position: relative; padding-left: 22px; color: var(--dempet); }
.liste-strek li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--dempet); }
.datablad__merk { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linje); font-size: 0.9rem; color: var(--blekk); }
@media (max-width: 900px) {
  .datablad { grid-template-columns: 1fr; gap: 36px; }
  .datablad__kol { padding: 0; border-left: 0; }
}

/* ---------------------------------------------------------------- bestillingsskjemaet */
.seksjon--skjema { padding-top: clamp(56px, 7vw, 96px); }
.skjema-ramme { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.skjema-ramme--en { grid-template-columns: minmax(0, 820px); }
.skjema { min-width: 0; }
.skjema__steg { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px 32px; padding: 34px 0; border-top: 1px solid var(--linje-sterk); }
.skjema__tittel { display: grid; gap: 6px; align-content: start; font-size: 1.05rem; font-weight: 450; }
.skjema__tittel span { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.17em; color: var(--messing-mork); }
.skjema__tittel small { font-weight: 330; color: var(--dempet); font-size: 0.85rem; }
.skjema__innhold { display: grid; gap: 26px; min-width: 0; }
@media (max-width: 720px) { .skjema__steg { grid-template-columns: 1fr; padding: 28px 0; } .skjema__tittel { grid-auto-flow: column; justify-content: start; gap: 12px; align-items: baseline; } }

.rader { border: 0; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
.rad { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 14px 16px 12px; border-bottom: 1px solid var(--linje); cursor: pointer; position: relative; transition: background 0.25s; }
.rad:hover { background: rgba(22, 21, 19, 0.03); }
.rad input { position: absolute; opacity: 0; pointer-events: none; }
.rad::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--messing); transform: scaleY(0); transition: transform 0.3s var(--lett); }
.rad:has(input:checked) { background: rgba(200, 160, 101, 0.1); }
.rad:has(input:checked)::before { transform: scaleY(1); }
.rad:has(input:focus-visible) { outline: 2px solid var(--messing); outline-offset: -2px; }
.rad__merke { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--linje-sterk); display: grid; place-items: center; background: #fff; transition: border-color 0.2s; }
.rad__merke::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blekk); transform: scale(0); transition: transform 0.25s var(--lett); }
.rad:has(input:checked) .rad__merke { border-color: var(--blekk); }
.rad:has(input:checked) .rad__merke::after { transform: scale(1); }
.rad__merke--boks { border-radius: 3px; }
.rad__merke--boks::after { display: none; }
.rad__merke--boks svg { width: 16px; height: 16px; opacity: 0; transition: opacity 0.2s; color: #fff; }
.rad:has(input:checked) .rad__merke--boks, .kryss:has(input:checked) .rad__merke--boks { background: var(--blekk); border-color: var(--blekk); }
.rad:has(input:checked) .rad__merke--boks svg, .kryss:has(input:checked) .rad__merke--boks svg { opacity: 1; }
.rad__navn { display: grid; gap: 2px; font-weight: 400; line-height: 1.35; }
.rad__navn small { color: var(--dempet); font-size: 0.85rem; font-weight: 330; }
.rad__pris { font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rad__pris--kommer { color: var(--dempet); font-size: 0.9rem; }
.rad.er-av { opacity: 0.4; pointer-events: none; }

fieldset.felt { border: 0; margin: 0; padding: 0; min-width: 0; }
.felt legend, .felt label { display: block; padding: 0; margin-bottom: 10px; font-size: 0.95rem; font-weight: 400; }
.felt legend small, .felt label small { color: var(--dempet); font-weight: 330; font-size: 0.82rem; margin-left: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg__valg { position: relative; margin: 0 !important; }
.seg__valg input { position: absolute; opacity: 0; pointer-events: none; }
.seg__valg span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 15px; border: 1px solid var(--linje-sterk); border-radius: var(--r); background: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 0.93rem; line-height: 1.25; transition: background 0.2s, border-color 0.2s, color 0.2s; user-select: none; }
.seg__valg span small { color: var(--dempet); font-size: 0.8rem; }
.seg__valg:hover span { border-color: var(--blekk); }
.seg__valg input:checked + span { background: var(--blekk); border-color: var(--blekk); color: var(--kalk); }
.seg__valg input:checked + span small { color: rgba(241, 238, 232, 0.7); }
.seg__valg input:focus-visible + span { outline: 2px solid var(--messing); outline-offset: 2px; }
.seg--uker .seg__valg span { flex-direction: column; align-items: flex-start; gap: 0; min-width: 118px; padding: 8px 14px; }
.seg--uker .seg__valg span b { font-weight: 450; }
.seg--uker .seg__valg span small { font-size: 0.78rem; }
.felt--seg.er-av { opacity: 0.35; pointer-events: none; }

.bryter { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.97rem; justify-self: start; }
.bryter input { position: absolute; opacity: 0; pointer-events: none; }
.bryter__spor { width: 44px; height: 26px; border-radius: 13px; background: var(--kalk-2); border: 1px solid var(--linje-sterk); position: relative; transition: background 0.25s; flex: none; }
.bryter__spor::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--lett); }
.bryter input:checked + .bryter__spor { background: var(--blekk); }
.bryter input:checked + .bryter__spor::after { transform: translateX(18px); }
.bryter input:focus-visible + .bryter__spor { outline: 2px solid var(--messing); outline-offset: 2px; }

.felter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.felter .felt { grid-column: span 3; }
.felter .felt--hel { grid-column: 1 / -1; }
.felter .felt--kort { grid-column: span 2; }
.felter .felt--lang { grid-column: span 4; }
.felt input, .felt textarea, .felt select {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--linje-sterk); border-radius: var(--r);
  background: rgba(255, 255, 255, 0.7); font-size: 1rem; transition: border-color 0.2s, background 0.2s;
}
.felt textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.felt input:hover, .felt textarea:hover { border-color: var(--dempet); }
.felt input:focus, .felt textarea:focus { outline: none; border-color: var(--blekk); background: #fff; box-shadow: 0 0 0 3px rgba(200, 160, 101, 0.35); }
.felt.er-feil input, .felt.er-feil textarea { border-color: var(--feil); }
.felt__feil { margin-top: 6px; font-size: 0.85rem; color: var(--feil); }
.hjelp { font-size: 0.88rem; color: var(--dempet); line-height: 1.5; }
.hjelp[hidden] { display: none; }
.hjelp--varsel { color: var(--messing-mork); }
@media (max-width: 520px) { .felter .felt, .felter .felt--lang { grid-column: 1 / -1; } .felter .felt--kort { grid-column: 1 / -1; } }

.bilder { display: grid; gap: 14px; }
.bilder__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bilder__liste:empty { display: none; }
.bilde-forh { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--kalk-2); }
.bilde-forh img { width: 100%; height: 100%; object-fit: cover; }
.bilde-forh button { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(20, 19, 18, 0.75); color: #fff; cursor: pointer; }
.bilde-forh button svg { width: 16px; height: 16px; }
.bilde-forh.laster::after { content: ""; position: absolute; inset: 0; background: rgba(241, 238, 232, 0.6); }
.bilder__legg-til { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px dashed var(--dempet); border-radius: var(--r); cursor: pointer; background: rgba(255, 255, 255, 0.35); transition: background 0.2s, border-color 0.2s; }
.bilder__legg-til:hover, .bilder__legg-til.er-over { background: rgba(200, 160, 101, 0.1); border-color: var(--messing-mork); }
.bilder__legg-til input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bilder__legg-til:has(input:focus-visible) { outline: 2px solid var(--messing); outline-offset: 2px; }
.bilder__legg-til svg { width: 30px; height: 30px; color: var(--messing-mork); flex: none; }
.bilder__legg-til span { display: grid; font-weight: 400; }
.bilder__legg-til small { color: var(--dempet); font-weight: 330; }
.bilder.er-full .bilder__legg-til { display: none; }
.bilder.er-feil .bilder__legg-til { border-color: var(--feil); background: rgba(163, 55, 42, 0.05); }

.send { display: grid; gap: 18px; justify-items: start; }
.kryss { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; cursor: pointer; font-size: 0.95rem; line-height: 1.5; position: relative; }
.kryss input { position: absolute; opacity: 0; pointer-events: none; }
.kryss .rad__merke { margin-top: 1px; }
.kryss small { color: var(--dempet); }
.kryss:has(input:focus-visible) .rad__merke { outline: 2px solid var(--messing); outline-offset: 2px; }
.kryss.er-feil .rad__merke { border-color: var(--feil); box-shadow: 0 0 0 3px rgba(163, 55, 42, 0.18); }
.send__feil { padding: 12px 16px; border-left: 2px solid var(--feil); background: rgba(163, 55, 42, 0.07); color: var(--feil); font-size: 0.93rem; }
.send__feil[hidden] { display: none; }
.send__turnstile:empty { display: none; }
.send__oppsummering { width: 100%; display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--linje-sterk); border-radius: var(--r); background: rgba(255, 255, 255, 0.5); }
.send__oppsummering:empty { display: none; }
.send__hva { font-weight: 400; }
.send__sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--linje); }
.send__sum span { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dempet); }
.send__sum b { font-size: 1.6rem; font-weight: var(--tittel-vekt); letter-spacing: -0.02em; }
fieldset.felt .hjelp--varsel { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--messing); color: var(--blekk); }

/* prislisten som ett prisark */
.prisark { display: grid; gap: clamp(36px, 4vw, 52px); padding: clamp(24px, 4vw, 52px); border: 1px solid var(--linje); border-radius: 10px; background: rgba(255, 255, 255, 0.55); }
.prisark__hode { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.prisark__hode .deltittel { font-size: 1.3rem; }
.prisark__hode p { font-size: 0.9rem; color: var(--dempet); }
.priskortene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.priskort { display: grid; gap: 10px; padding: 22px 24px; border: 1px solid var(--linje); border-radius: 8px; background: #fff; }
.priskort dt { color: var(--dempet); }
.priskort dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.priskort b { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: clamp(1.8rem, 2.6vw, 2.3rem); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.priskort span { font-size: 0.88rem; color: var(--dempet); }
.prisark__to { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.pristabell { border-top: 1px solid var(--linje-sterk); }
.pristabell div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.pristabell dd { white-space: nowrap; font-family: var(--font-tittel); font-weight: var(--tittel-vekt-liten); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pristabell small { font-family: var(--font); font-size: 0.8rem; font-weight: 400; color: var(--dempet); }
.utrykning { display: grid; gap: 4px; margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--messing); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--messing) 14%, transparent); font-size: 0.92rem; color: var(--dempet); }
.utrykning b { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.08rem; color: var(--blekk); }
.soner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: sone; }
.sone { display: grid; gap: 4px; padding: 16px 14px; border: 1px solid var(--linje); border-radius: 8px; background: #fff; }
.sone__nr { font-size: 0.8rem; color: var(--messing-mork); font-weight: 500; }
.sone__km { font-size: 0.92rem; }
.sone b { margin-top: 6px; font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.prisark__merk { margin-top: 14px; font-size: 0.9rem; color: var(--dempet); }
.prisinfo { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 22px; border-top: 1px solid var(--linje); font-size: 0.92rem; color: var(--dempet); }
.prisinfo li::before { content: "–"; margin-right: 8px; color: var(--messing-mork); }
@media (max-width: 900px) { .prisark__to { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .priskortene { grid-template-columns: 1fr; gap: 8px; }
  .priskort { grid-template-columns: 1fr auto; align-items: baseline; padding: 16px 18px; }
  .priskort dd { display: grid; justify-items: end; gap: 2px; text-align: right; }
  .priskort b { font-size: 1.5rem; white-space: nowrap; }
  .prisark { padding: 20px 16px; }
  .sone { padding: 12px 10px; }
  .sone b { font-size: 1.05rem; }
  .pristabell dt { font-size: 0.95rem; }
  .prisinfo { flex-direction: column; }
}
.prisliste-seksjon { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; }
.prisliste-seksjon .seksjon__hode { margin: 0; }
.prisliste { border-top: 1px solid var(--linje-sterk); }
.prisliste div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--linje); }
.prisliste dt { display: grid; gap: 2px; font-weight: 400; }
.prisliste dt small { color: var(--dempet); font-weight: 330; font-size: 0.85rem; }
.prisliste dd { white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--font-tittel); font-weight: var(--tittel-vekt-liten); font-size: 1.08rem; }
.prisliste dd.kommer { color: var(--dempet); font-size: 0.92rem; }
.prisliste dt a { text-decoration: none; border-bottom: 1px solid var(--linje-sterk); }
.prisliste__merk { margin-top: 16px; }
@media (max-width: 900px) { .prisliste-seksjon { grid-template-columns: 1fr; } }

.sammendrag { position: sticky; top: calc(var(--topp-h) + 24px); }
.sammendrag__indre { padding: 28px; border: 1px solid var(--linje-sterk); border-radius: var(--r); background: rgba(255, 255, 255, 0.45); }
.sammendrag__tegning { width: 140px; margin: 18px 0 12px; color: var(--blekk); }
/* bildet av produktet som er valgt (blandebatteri, og bereder og vannstopper når bildene kommer) */
.sammendrag__produkt { margin: 16px 0 14px; aspect-ratio: 4 / 3; border: 1px solid var(--linje); border-radius: 6px; background: #fff; overflow: hidden; }
.sammendrag__produkt img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: opacity 0.25s; }
.sammendrag__produkt[hidden], .sammendrag__tegning[hidden], .sammendrag__beskrivelse[hidden] { display: none; }
.sammendrag__beskrivelse { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--dempet); }
.sammendrag__navn { font-size: 1.2rem; font-weight: 450; letter-spacing: -0.01em; }
.sammendrag__linjer { display: grid; gap: 6px; margin-top: 14px; font-size: 0.9rem; }
.sammendrag__linjer div { display: flex; justify-content: space-between; gap: 16px; }
.sammendrag__linjer dt { color: var(--dempet); }
.sammendrag__linjer dd { text-align: right; font-variant-numeric: tabular-nums; }
.sammendrag__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linje-sterk); }
.sammendrag__sum span { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dempet); }
.sammendrag__sum b { font-size: 2rem; font-weight: var(--tittel-vekt); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sammendrag__info { margin-top: 6px; font-size: 0.85rem; color: var(--dempet); line-height: 1.5; }
.sammendrag__fremdrift { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linje); font-size: 0.85rem; }
.sammendrag__fremdrift li { display: flex; align-items: center; gap: 10px; color: var(--dempet); }
.sammendrag__fremdrift li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--linje-sterk); flex: none; transition: background 0.3s, border-color 0.3s; }
.sammendrag__fremdrift li.er-ok { color: var(--blekk); }
.sammendrag__fremdrift li.er-ok::before { background: var(--messing) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23141312' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--messing); }
@media (max-width: 1000px) {
  .skjema-ramme { grid-template-columns: 1fr; }
  .sammendrag { position: sticky; top: auto; bottom: 0; z-index: 20; order: 2; margin-inline: calc(-1 * var(--kant)); }
  .sammendrag__indre { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 16px; padding: 12px var(--kant) calc(12px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--linje-sterk); border-radius: 0; background: rgba(241, 238, 232, 0.97); }
  .sammendrag__tittel, .sammendrag__tegning, .sammendrag__produkt, .sammendrag__beskrivelse, .sammendrag__linjer, .sammendrag__fremdrift, .sammendrag__info { display: none; }
  .sammendrag__navn { font-size: 0.95rem; }
  .sammendrag__sum { margin: 0; padding: 0; border: 0; grid-row: 1 / span 2; grid-column: 2; }
  .sammendrag__sum span { display: none; }
  .sammendrag__sum b { font-size: 1.5rem; }
  .sammendrag[data-valgt]::after { content: attr(data-valgt); display: block; }
}

.kvittering { padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--linje-sterk); outline: none; }
.kvittering h3 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: var(--tittel-vekt); letter-spacing: var(--tittel-sperring); line-height: 1.05; }
.kvittering__nr { display: inline-block; margin-bottom: 18px; }
.kvittering p { margin-top: 16px; max-width: 56ch; color: var(--dempet); }
.kvittering ol { margin-top: 28px; display: grid; gap: 14px; counter-reset: k; max-width: 56ch; }
.kvittering ol li { counter-increment: k; display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.kvittering ol li::before { content: counter(k, decimal-leading-zero); font-size: 0.75rem; letter-spacing: 0.15em; color: var(--messing-mork); font-weight: 500; padding-top: 3px; }
.kvittering .knapp { margin-top: 30px; }
.skjema-ramme.er-sendt .skjema, .skjema-ramme.er-sendt .sammendrag, .skjema-ramme.er-sendt .hjelpekort { display: none; }
/* kortet ved siden av henvendelsesskjemaet */
.hjelpekort { position: sticky; top: calc(var(--topp-h) + 24px); display: grid; gap: 26px; padding: clamp(26px, 3vw, 40px); border-radius: 8px; background: var(--mork-flate); color: var(--lys); }
.hjelpekort .deltittel { color: var(--lys); }
.hjelpekort__steg { display: grid; gap: 14px; margin-top: -12px; counter-reset: steg; }
.hjelpekort__steg li { display: grid; gap: 2px; padding-left: 36px; position: relative; font-size: 0.9rem; color: var(--dempet-mork); counter-increment: steg; }
.hjelpekort__steg li::before { content: counter(steg); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--messing); color: var(--natt); font-size: 0.75rem; font-weight: 600; }
.hjelpekort__steg b { font-weight: 500; color: var(--lys); font-size: 0.98rem; }
.hjelpekort__akutt { display: grid; gap: 6px; padding-top: 22px; border-top: 1px solid var(--linje-mork); }
.hjelpekort__akutt p:not(.etikett) { font-size: 0.88rem; color: var(--dempet-mork); }
.hjelpekort__tlf { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: clamp(2rem, 3vw, 2.6rem); letter-spacing: var(--tittel-sperring); line-height: 1; text-decoration: none; color: var(--lys); }
.hjelpekort__tlf:hover { color: var(--messing-lys); }
.hjelpekort__sitat { margin: 0; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--linje-mork); }
.hjelpekort__snitt { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--dempet-mork); }
.hjelpekort__snitt b { color: var(--lys); font-weight: 500; }
.hjelpekort blockquote p { font-size: 1rem; line-height: 1.5; font-weight: 300; }
.hjelpekort figcaption { font-size: 0.82rem; color: var(--messing); }
@media (max-width: 900px) { .hjelpekort { position: static; } }
.skjema-ramme.er-sendt { grid-template-columns: minmax(0, 820px); }
.kvittering__test { margin-top: 32px; padding: 18px 20px; border: 1px dashed var(--dempet); border-radius: var(--r); background: rgba(255, 255, 255, 0.4); }
.kvittering__test summary { cursor: pointer; font-weight: 450; }
.kvittering__test .etikett { margin-top: 18px; }
.kvittering__test pre { margin: 8px 0 0; white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; line-height: 1.5; color: #3a3732; }


/* ---------------------------------------------------------------- bevegelse */
.js [data-inn] { opacity: 0; transform: translateY(18px); }
.js .er-inne [data-inn], .js [data-inn].er-inne { opacity: 1; transform: none; transition: opacity 0.9s var(--lett), transform 1s var(--lett); transition-delay: calc(var(--n, 0) * 90ms); }
.js [data-vis] { opacity: 0; transform: translateY(24px); }
.js [data-vis].er-synlig { opacity: 1; transform: none; transition: opacity 0.9s var(--lett), transform 1s var(--lett); }
.js [data-delt] .ord { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js [data-delt] .ord > span { display: inline-block; transform: translateY(105%); }
.js .er-delt-inne .ord > span { transform: none; transition: transform 1s var(--lett); transition-delay: calc(var(--o, 0) * 55ms + 80ms); }
.js [data-avdekk] { display: block; clip-path: inset(100% 0 0 0); }
.js [data-avdekk].er-synlig, .js .er-synlig [data-avdekk] { clip-path: inset(0); transition: clip-path 1.2s var(--lett); }
.avdekk { display: block; height: 100%; }
.avdekk img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-inn], .js [data-vis] { opacity: 1; transform: none; }
  .js [data-delt] .ord > span { transform: none; }
  .js [data-avdekk] { clip-path: none; }
  .js [data-tegn] .t-kontur, .js [data-tegn] .t-detalj { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js [data-tegn] .t-mal, .js [data-tegn] .t-gulv { opacity: 1; }
  .js [data-tegn] .t-senter { opacity: 0.4; }
  .steg { --fyll: 1 !important; }
}
.reserve [data-inn], .reserve [data-vis] { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------- produktbilde i valgradene (blandebatteri) */
.rad:has(.rad__bilde) { grid-template-columns: 22px 64px minmax(0, 1fr) auto; }
.rad__bilde { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--linje); }
.rad__bilde img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 520px) { .rad:has(.rad__bilde) { grid-template-columns: 22px 52px minmax(0, 1fr); } .rad__bilde { width: 52px; height: 52px; } .rad:has(.rad__bilde) .rad__pris { grid-column: 3; } }

/* ---------------------------------------------------------------- våre leverandører: navnene som ordmerker */
.leverandorer { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.leverandorer li { display: grid; place-items: center; min-height: 96px; padding: 20px 22px; border: 1px solid var(--linje); border-radius: 6px; background: #fff;
  font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.2rem; color: var(--blekk); text-align: center; }
.leverandorer img { width: auto; max-width: 100%; }
.om__lev { grid-column: 1 / -1; display: grid; gap: 18px; margin-top: clamp(28px, 4vw, 48px); }

/* ---------------------------------------------------------------- kamerainspeksjon */
.kamera-nar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--linje-sterk); padding-top: 28px; }
.kamera-nar__punkt h3 { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 8px; }
.kamera-nar__punkt p { color: var(--dempet); }
.spyling__tekst { display: grid; gap: 18px; justify-items: start; max-width: 40rem; }
.spyling__tekst p { color: var(--dempet); font-size: 1.08rem; }

/* ---------------------------------------------------------------- mobil: strammere og lettere å trykke */
.bunn__laget { white-space: nowrap; }
.sammendrag__valgt { display: none; }
@media (max-width: 900px) {
  /* tjenestekortene: uten tittelfeltet og med lavere tegning, så de ikke blir så høye */
  .tjkort { gap: 22px; padding: 20px 20px 24px; }
  .tjkort__felt { display: none; }
  .tjkort__tegning { padding: 18px; }
  .tjkort__tegning svg { max-height: 190px; }
  .tjkort__bilde { aspect-ratio: 16 / 10; }
  .tjkort__tittel { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .tjkort__tekst { gap: 14px; }
  .tjkort__ingress { font-size: 1rem; }
  /* bunnlinja i bestillingen: lite produktbilde og hvilket produkt som er valgt */
  .sammendrag__indre { grid-template-columns: auto 1fr auto; }
  .sammendrag__produkt:not([hidden]) { display: block; grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; aspect-ratio: 1; border-radius: 4px; }
  .sammendrag__produkt img { padding: 4px; }
  .sammendrag__navn { display: grid; gap: 1px; line-height: 1.25; }
  .sammendrag__valgt { display: block; font-size: 0.8rem; color: var(--dempet); }
  .sammendrag__sum { grid-column: 3; }
  .ptopp__tegninger { width: min(46%, 190px); }
  .bunn__info { flex-direction: column; gap: 4px; }
}
@media (max-width: 620px) {
  .stopp__objekt--tegninger { display: none; }   /* tre små tegninger i toppen på prissiden */
}
/* trykkflater på minst 44 px på berøringsskjerm */
@media (pointer: coarse) {
  .lenke { min-height: 44px; padding-top: 4px; }
  .velkommen__tlf, .velkommen__google { min-height: 44px; }
  .hjelpekort__tlf { display: inline-flex; align-items: center; min-height: 44px; }
  .prisliste dt a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* «uten montering» o.l. etter prisen */
.pakke__pris-note, .fp-kort__pris-note { width: 100%; font-size: 0.82rem; color: var(--dempet); }
.pakke__pris { flex-wrap: wrap; }
.fp-kort__pris { flex-wrap: wrap; }

/* utstyret på kamerasiden: produktbildene på hvitt */
.utstyr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1000px; margin-inline: auto; }
.utstyr__kort { display: grid; align-content: start; gap: 12px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--linje); border-radius: 10px; background: rgba(255, 255, 255, 0.55); }
.utstyr__bilde { position: relative; margin: 0 0 10px; aspect-ratio: 4 / 3; border-radius: 6px; background: #fff; overflow: hidden; }
.utstyr__bilde img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.utstyr__kort h3 { font-family: var(--font-tittel); font-weight: var(--tittel-vekt); font-size: 1.5rem; letter-spacing: -0.015em; }
.utstyr__kort p { color: var(--dempet); }
@media (max-width: 700px) { .utstyr { grid-template-columns: 1fr; } }
/* produktbilde i et tjenestekort (kameraet): hele produktet på hvitt */
.tjkort__bilde--produkt { background: #fff; }
.tjkort__bilde--produkt img { object-fit: contain; padding: 6%; }
.priskortene--to { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kamerapris { max-width: 760px; margin-inline: auto; }
.kamerapris .seksjon__mer { margin-top: 24px; }
@media (max-width: 620px) { .priskortene--to { grid-template-columns: 1fr; } }