/* Studio Avtrykk — stil */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blekk: #0D0D0F;
  --blekk-2: #17171B;
  --blekk-linje: #2A2A30;
  --grafitt: #1C1C21;
  --dempet: #6C6C73;
  --dempet-mork: #A3A3AB;
  --linje: #E4E2DD;
  --papir: #F6F5F1;
  --stein: #ECEAE4;
  --hvit: #FFFFFF;
  --accent: #E4492B;
  --accent-lys: #F9DDD5;

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bredde: 1200px;
  --kant: clamp(20px, 5vw, 48px);
  --radius: 18px;
  --seksjon: clamp(88px, 12vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--grafitt);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

.hopp {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
.hopp:focus { top: 16px; }

/* ---------- typografi ---------- */
h1, h2, h3 { font-weight: 550; letter-spacing: -0.04em; line-height: 0.96; color: inherit; }
h1 { font-size: clamp(48px, 8.5vw, 112px); }
h2 { font-size: clamp(36px, 5.2vw, 68px); letter-spacing: -0.038em; margin-top: 18px; }
h2.stor { font-size: clamp(44px, 7vw, 96px); }
h3 { font-size: clamp(21px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; }

.etikett {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dempet);
}
.nr { color: var(--accent); margin-right: 10px; }
.ingress { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--dempet); max-width: 38em; }
.liten { font-size: 14px; color: var(--dempet); }
.merknad {
  margin-top: 36px; font-size: 15px; color: var(--dempet);
  border-left: 2px solid var(--accent); padding-left: 14px; max-width: 46em;
}
.verb { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; }
.verb span {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.verb span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 2px; }

/* ---------- layout ---------- */
.ramme { width: 100%; max-width: var(--bredde); margin: 0 auto; padding: 0 var(--kant); }
.seksjon { padding: var(--seksjon) 0; position: relative; }
.seksjon--stein { background: var(--stein); }
.seksjon--hvit { background: var(--hvit); }
.seksjon--mork { background: var(--blekk); color: #F2F1EE; }
.seksjon--mork .etikett { color: #8D8D95; }
.seksjon--mork .ingress, .seksjon--mork .liten { color: var(--dempet-mork); }
.delt { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) {
  .delt { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .delt > div:last-child { padding-top: 34px; }
}

/* ---------- knapper ---------- */
.knapper { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  background: var(--blekk); color: #fff;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.knapp svg { width: 18px; height: 18px; transition: transform .2s ease; }
.knapp:hover svg { transform: translateX(3px); }
.knapp:hover { transform: translateY(-1px); }
.knapp:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.knapp--lys { background: #fff; color: var(--blekk); }
.knapp--spokelse { background: transparent; color: #fff; border-color: #3A3A42; }
.knapp--spokelse:hover { border-color: #5A5A64; }
.knapp--aksent { background: var(--accent); color: #fff; }
.knapp--aksent:hover { background: #cf3d21; }
.knapp--kant { background: #fff; color: var(--blekk); border-color: var(--linje); }
.knapp--liten { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 99px; }

/* ---------- meny ---------- */
.meny {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(calc(100% - 32px), 1100px);
}
.meny__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 20px; border-radius: 99px;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.03em; font-size: 17px; white-space: nowrap; }
.logo__merke { width: 22px; height: 22px; color: currentColor; }
.meny__lenker { display: none; margin-left: auto; gap: 28px; }
.meny__lenker a { text-decoration: none; font-size: 15px; color: #C9C9D0; transition: color .2s; }
.meny__lenker a:hover { color: #fff; }
.meny__kontakt { display: none; }
.meny__knapp {
  margin-left: auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; cursor: pointer;
  display: grid; place-content: center; gap: 5px;
}
.meny__knapp span { display: block; width: 16px; height: 1.5px; background: #fff; transition: transform .25s ease; }
.meny[data-apen] .meny__knapp span:first-child { transform: translateY(3.25px) rotate(45deg); }
.meny[data-apen] .meny__knapp span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.meny__mobil {
  display: grid; gap: 4px; margin-top: 8px; padding: 12px; border-radius: 22px;
  background: rgba(20, 20, 24, 0.9); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.meny[data-apen] .meny__mobil { opacity: 1; visibility: visible; transform: none; }
.meny__mobil a { color: #fff; text-decoration: none; font-size: 20px; font-weight: 550; letter-spacing: -0.02em; padding: 12px 14px; border-radius: 12px; }
.meny__mobil a:hover { background: rgba(255,255,255,.06); }
@media (min-width: 860px) {
  .meny__lenker { display: flex; }
  .meny__kontakt { display: inline-flex; }
  .meny__knapp, .meny__mobil { display: none; }
}

/* ---------- åpning ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  background: var(--blekk); color: #fff; text-align: center; overflow: hidden;
  padding: 140px var(--kant) 120px;
}
.hero__ringer, .kontakt__ringer { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__innhold { position: relative; max-width: 980px; }
.hero .etikett { color: #8D8D95; }
.hero h1 { margin: 26px 0 26px; }
.hero__tekst { font-size: clamp(17px, 1.6vw, 20px); color: var(--dempet-mork); max-width: 32em; margin: 0 auto 38px; }
.hero__ned {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3A3A42;
  display: grid; place-items: center; color: #BDBDC4;
}
.hero__ned svg { width: 18px; height: 18px; transform: rotate(90deg); }

/* ---------- prosjekter ---------- */
.prosjekter { display: grid; gap: 24px; margin-top: 56px; }
@media (min-width: 800px) { .prosjekter { grid-template-columns: 1fr 1fr; } }
.prosjekt { text-decoration: none; display: block; }
.prosjekt__bilde {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--blekk);
}
.prosjekt__bilde img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.prosjekt:hover .prosjekt__bilde img { transform: scale(1.03); }
.prosjekt__tom {
  height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: #5E5E66; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.prosjekt__tom svg { width: 56px; height: 56px; color: #3A3A42; }
.prosjekt__tekst { padding: 22px 4px 0; }
.prosjekt__tekst h3 { margin: 8px 0 8px; }
.prosjekt__tekst p:last-child { color: var(--dempet); }

/* ---------- kort ---------- */
.kort-rutenett { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 640px) { .kort-rutenett { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .kort-rutenett { grid-template-columns: repeat(4, 1fr); } }
.kort {
  background: var(--hvit); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: 28px; transition: transform .25s ease, box-shadow .25s ease;
}
.kort:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13, 13, 15, 0.06); }
.kort__ikon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--blekk); color: #fff;
  display: grid; place-items: center; margin-bottom: 28px;
}
.kort:nth-child(2) .kort__ikon { background: var(--accent); }
.kort__ikon svg { width: 22px; height: 22px; }
.kort h3 { margin-bottom: 10px; }
.kort p { color: var(--dempet); font-size: 16px; }

/* ---------- fra bunnen ---------- */
.seksjon--mork h2 { color: #fff; }
.seksjon--mork .ingress { margin-top: 28px; }
.sporsmal ol { list-style: none; padding: 0; display: grid; gap: 0; }
.sporsmal li {
  display: flex; gap: 20px; align-items: baseline;
  font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;
  padding: 22px 0; border-top: 1px solid var(--blekk-linje);
}
.sporsmal li:last-child { border-bottom: 1px solid var(--blekk-linje); }
.sporsmal__nr { color: var(--accent); font-size: 15px; font-weight: 600; min-width: 18px; }
.sporsmal .liten { margin: 22px 0 30px; }

/* ---------- pakker ---------- */
.pakker { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 640px) { .pakker { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) {
  .pakker { grid-template-columns: repeat(3, 1fr); }
  .pakker:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); max-width: calc((100% - 32px) / 3 * 2 + 16px); }
}
.pakke {
  display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius);
  background: var(--papir); border: 1px solid var(--linje);
}
.pakke__topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pakke__under { color: var(--accent); font-weight: 600; font-size: 14px; margin-top: 6px; }
.pakke__pris { font-size: clamp(26px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.035em; margin-top: 28px; line-height: 1.1; }
.pakke__mva { font-size: 13px; color: var(--dempet); margin-top: 4px; }
.hakeliste { list-style: none; padding: 22px 0 0; margin: 22px 0 32px; border-top: 1px solid var(--linje); display: grid; gap: 10px; }
.hakeliste li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.4; }
.hakeliste li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.pakke__knapp { margin-top: auto; width: 100%; background: #fff; color: var(--blekk); border-color: var(--linje); }
.pakke--uthevet { background: #fff; border: 1.5px solid var(--blekk); box-shadow: 5px 5px 0 var(--blekk); }
.pakke--uthevet .pakke__knapp { background: var(--blekk); color: #fff; border-color: var(--blekk); }
.pakke--mork { background: var(--blekk); border-color: var(--blekk); color: #fff; }
.pakke--mork .pakke__mva { color: #8D8D95; }
.pakke--mork .hakeliste { border-color: var(--blekk-linje); color: #D6D6DB; }
.pakke--mork .pakke__knapp { background: #fff; color: var(--blekk); border-color: #fff; }
.merkelapp {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-lys); padding: 5px 10px; border-radius: 99px; white-space: nowrap;
}

/* ---------- prosess ---------- */
.steg { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 860px) { .steg { grid-template-columns: repeat(3, 1fr); } }
.steg li { padding: 28px 0 0; border-top: 1.5px solid var(--blekk); }
.steg__nr { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .14em; }
.steg h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.035em; margin: 14px 0 12px; }
.steg p { color: var(--dempet); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--linje); }
.faq details:last-child { border-bottom: 1px solid var(--linje); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 550; letter-spacing: -0.015em;
}
.faq 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: 6px; width: 14px; height: 2px; background: var(--accent);
  transition: transform .25s ease;
}
.faq__pluss::after { transform: rotate(90deg); }
.faq details[open] .faq__pluss::after { transform: rotate(0); }
.faq details p { padding: 0 40px 24px 0; color: var(--dempet); }

/* ---------- kontakt ---------- */
.kontakt { overflow: hidden; }
.kontakt .ramme { position: relative; }
.kontakt__epost {
  display: inline-block; margin-top: 32px; font-size: clamp(20px, 2vw, 26px); font-weight: 550;
  letter-spacing: -0.02em; text-decoration: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 2px;
}
.skjema {
  display: grid; gap: 16px; background: rgba(23, 23, 27, 0.85); border: 1px solid var(--blekk-linje);
  border-radius: 22px; padding: clamp(22px, 3vw, 36px);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.skjema label { display: grid; gap: 8px; font-size: 14px; color: #BDBDC4; }
.skjema input, .skjema select, .skjema textarea {
  width: 100%; background: #0F0F12; border: 1px solid #2E2E35; border-radius: 12px;
  padding: 14px 16px; color: #fff; font-size: 16px; resize: vertical;
  transition: border-color .2s;
}
.skjema input:focus, .skjema select:focus, .skjema textarea:focus { outline: none; border-color: var(--accent); }
.skjema .knapp { justify-self: start; margin-top: 6px; }

/* ---------- bunn ---------- */
.bunn { background: var(--blekk); color: #8D8D95; border-top: 1px solid var(--blekk-linje); padding: 36px 0; font-size: 14px; }
.bunn__rad { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.bunn .logo { color: #fff; font-size: 15px; }
.bunn a { text-decoration: none; }
.bunn a:hover { color: #fff; }

/* ---------- inntoning ---------- */
.vis { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.vis.synlig { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vis { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; animation: none !important; }
}

/* ---------- tjenester: interaktive bokser ---------- */
h4 { margin: 0; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.tj-hint { margin-top: 22px; font-size: 15px; color: var(--dempet); display: flex; align-items: center; gap: 10px; }
.tj-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-lys); }
.tj { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 640px) { .tj { grid-template-columns: 1fr 1fr; } }
.tj__kort {
  background: var(--hvit); border: 1px solid var(--linje); border-radius: var(--radius);
  display: flex; flex-direction: column; min-width: 0;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.tj__kort:not(.aktiv):hover { box-shadow: 0 14px 30px rgba(13, 13, 15, 0.07); border-color: #D6D3CC; }
.tj__hode {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%; flex: 1; padding: 28px; border-radius: var(--radius);
}
.tj__hode .kort__ikon { margin-bottom: 18px; flex: none; }
.kort__ikon--aksent { background: var(--accent); }
.tj__navn { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.tj__kort-tekst { color: var(--dempet); font-size: 16px; line-height: 1.5; }
.tj__mer { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.tj__mer-tekst::before { content: "Les mer"; }
.aktiv .tj__mer-tekst::before { content: "Lukk"; }
.tj__pluss { position: relative; width: 12px; height: 12px; flex: none; }
.tj__pluss::before, .tj__pluss::after {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: var(--accent);
  transition: transform .3s ease;
}
.tj__pluss::after { transform: rotate(90deg); }
.aktiv .tj__pluss::before { transform: rotate(45deg); }
.aktiv .tj__pluss::after { transform: rotate(135deg); }

/* aktiv boks */
.tj__kort.aktiv { grid-column: 1 / -1; box-shadow: 0 24px 60px rgba(13, 13, 15, 0.08); }
.tj__kort.aktiv .tj__hode { flex: none; flex-direction: row; align-items: center; gap: 16px; padding: 24px 32px; }
.tj__kort.aktiv .tj__hode .kort__ikon { margin: 0; }
.tj__kort.aktiv .tj__kort-tekst { display: none; }
.tj__kort.aktiv .tj__mer { margin: 0 0 0 auto; padding: 0; }
.tj__panel { padding: 8px 32px 40px; }
.tj__kort.aktiv .tj__panel { animation: tj-inn .5s .15s both; }
@keyframes tj-inn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* de andre boksene krymper (mobil og nettbrett) */
.tj.har-aktiv .tj__kort:not(.aktiv) .tj__hode { flex-direction: row; align-items: center; gap: 14px; padding: 16px 20px; }
.tj.har-aktiv .tj__kort:not(.aktiv) .kort__ikon { width: 36px; height: 36px; margin: 0; border-radius: 10px; }
.tj.har-aktiv .tj__kort:not(.aktiv) .kort__ikon svg { width: 18px; height: 18px; }
.tj.har-aktiv .tj__kort:not(.aktiv) .tj__navn { font-size: 18px; }
.tj.har-aktiv .tj__kort:not(.aktiv) .tj__kort-tekst,
.tj.har-aktiv .tj__kort:not(.aktiv) .tj__mer-tekst { display: none; }
.tj.har-aktiv .tj__kort:not(.aktiv) .tj__mer { margin: 0 0 0 auto; padding: 0; }

/* stor skjerm: boksene ligger på rad, den valgte vokser */
@media (min-width: 1040px) {
  .tj { display: flex; align-items: stretch; gap: 12px; }
  .tj__kort { flex: 1 1 0; transition: flex-grow .6s cubic-bezier(.2,.7,.2,1), flex-basis .6s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
  .tj.har-aktiv .tj__kort:not(.aktiv) { flex: 0 0 84px; }
  .tj.har-aktiv .tj__kort:not(.aktiv) .tj__hode {
    position: sticky; top: 100px; flex: none;
    flex-direction: column; align-items: center; gap: 18px; padding: 24px 0 26px;
  }
  .tj.har-aktiv .tj__kort:not(.aktiv) .tj__navn {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 18px;
  }
  .tj.har-aktiv .tj__kort:not(.aktiv) .tj__mer { margin: 0; }
  .tj__kort.aktiv .tj__hode { padding: 28px 40px; }
  .tj__panel { padding: 8px 40px 48px; }
}

/* innhold i panelene */
.tj__overskrift { font-size: clamp(32px, 3.8vw, 52px); font-weight: 550; letter-spacing: -0.04em; line-height: 0.98; margin: 12px 0 20px; }
.tj__panel > .ingress { margin-bottom: 36px; }
.tj__panel > .knapp { margin-top: 36px; }
.tj__panel .hakeliste { margin-top: 0; }

.varianter { display: grid; gap: 14px; }
@media (min-width: 760px) { .varianter { grid-template-columns: 1fr 1fr; } }
.variant { background: var(--papir); border: 1px solid var(--linje); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
.variant h4 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.03em; margin: 12px 0 20px; }
.variant dl { margin: 0 0 20px; }
.variant dt { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); }
.variant dd { margin: 4px 0 16px; font-size: 16px; }
.variant__regel { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linje); font-weight: 550; letter-spacing: -0.01em; }
.variant__regel::before { content: "→ "; color: var(--accent); }

.hakeliste--to { gap: 10px 32px; }
@media (min-width: 640px) { .hakeliste--to { grid-template-columns: 1fr 1fr; } }

.eksempel { margin-top: 8px; padding-top: 40px; border-top: 1px solid var(--linje); }
.eksempel__tekst { color: var(--dempet); margin: 10px 0 24px; max-width: 40em; }
.logoer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .logoer { grid-template-columns: repeat(4, 1fr); } }
.logo-flis {
  aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--linje);
  display: grid; place-items: center; overflow: hidden;
}
.logo-flis--bred { grid-column: span 2; aspect-ratio: auto; min-height: 170px; }
.logo-flis--mork { background: var(--blekk); color: #fff; border-color: var(--blekk); }
.logo-flis--lys { background: #fff; color: var(--blekk); }
.logo-flis--rod { background: #E4492B; color: #fff; border-color: #E4492B; --accent: #fff; }
.logo-flis--stein { background: var(--stein); color: var(--blekk); border-color: var(--stein); }
.ordmerke { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 650; letter-spacing: -0.03em; font-size: clamp(22px, 2.6vw, 34px); white-space: nowrap; }
.ordmerke svg { width: 1.35em; height: 1.35em; }
.symbol { width: 30%; height: auto; aspect-ratio: 1; max-width: 72px; }
.kortform { font-weight: 650; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.05em; }
.kortform span { color: var(--accent); }
.bildetekst { font-size: 13px; color: var(--dempet); margin-top: 12px; }

.palett { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-top: 40px; }
@media (min-width: 560px) { .palett { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .palett { grid-template-columns: repeat(5, 1fr); } }
.farge { display: grid; gap: 1px; font-size: 14px; }
.farge__prove { aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid rgba(13, 13, 15, 0.08); margin-bottom: 10px; }
.farge span { color: var(--dempet); font-variant-numeric: tabular-nums; }
.farge .farge__bruk { font-size: 12.5px; }

.fontprove {
  display: grid; gap: 20px 36px; align-items: center; margin-top: 40px;
  background: var(--papir); border: 1px solid var(--linje); border-radius: 16px; padding: 28px;
}
@media (min-width: 640px) { .fontprove { grid-template-columns: auto 1fr; } }
.fontprove__aa { font-size: clamp(80px, 10vw, 128px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.85; }
.fontprove__navn { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.fontprove__alfabet { font-size: 17px; line-height: 1.45; margin-top: 12px; overflow-wrap: anywhere; }
.fontprove__vekter { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 15px; }

.prisbokser { display: grid; gap: 12px; margin-top: 44px; }
@media (min-width: 640px) { .prisbokser { grid-template-columns: 1fr 1fr; } }
.prisboks { border: 1px solid var(--linje); border-radius: 16px; padding: 24px; }
.prisboks > p:last-child { color: var(--dempet); font-size: 15px; }
.prisboks__pris { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 8px 0 10px; }
.prisboks__pris span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--dempet); }

.to-kol { display: grid; gap: 32px; }
@media (min-width: 760px) { .to-kol { grid-template-columns: 1fr 1fr; gap: 48px; } }
.to-kol h4 { margin-bottom: 14px; }
.to-kol p { color: var(--dempet); }
.to-kol p + h4 { margin-top: 28px; }
.prisrad { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linje); }
.prisrad .prisboks__pris { margin-top: 0; }

.nivaer { display: grid; gap: 12px; }
@media (min-width: 760px) { .nivaer { grid-template-columns: repeat(3, 1fr); } }
.niva { background: var(--papir); border: 1px solid var(--linje); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.niva--uthevet { background: #fff; border: 1.5px solid var(--blekk); box-shadow: 4px 4px 0 var(--blekk); }
.niva > p { color: var(--dempet); font-size: 15px; }
.niva .prisboks__pris { color: var(--grafitt); font-size: clamp(26px, 2.4vw, 32px); margin-top: 14px; }
.niva__eksempel { margin-top: auto; padding-top: 18px; color: var(--grafitt) !important; font-weight: 500; }
.tj__panel .merknad { margin-top: 28px; }
@media (max-width: 639px) {
  .tj__kort.aktiv .tj__hode { padding: 20px 22px; }
  .tj__panel { padding: 4px 22px 32px; }
  .variant, .niva, .prisboks, .fontprove { padding: 22px; }
}

/* ---------- designsjekk ---------- */
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prikk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 12px; vertical-align: 1px; }
.sjekk__tilbud { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 860px) { .sjekk__tilbud { grid-template-columns: 1fr 1fr; } }
.sjekk-kort {
  display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px);
  background: var(--hvit); border: 1px solid var(--linje); border-radius: 22px;
}
.sjekk-kort h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.035em; }
.sjekk-kort__under { color: var(--accent); font-weight: 600; margin-top: 10px; }
.sjekk-kort__tekst { color: var(--dempet); margin-top: 14px; }
.sjekk-kort .hakeliste { margin-bottom: 28px; }
.sjekk-kort__bunn { margin-top: auto; }
.sjekk-kort .prisboks__pris { margin: 0; }
.sjekk-kort__notat { font-size: 13.5px; color: var(--dempet); margin-top: 6px; }
.sjekk-kort__knapp { margin-top: 22px; }
.sjekk-kort--mork { background: var(--blekk); border-color: var(--blekk); color: #fff; }
.sjekk-kort--mork .sjekk-kort__tekst, .sjekk-kort--mork .sjekk-kort__notat { color: var(--dempet-mork); }
.sjekk-kort--mork .hakeliste { border-color: var(--blekk-linje); color: #D6D6DB; }
.sjekk-kort--mork .sjekk-kort__knapp { background: #fff; color: var(--blekk); }

.sjekk-skjema {
  margin-top: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 22px;
  background: var(--stein); display: grid; gap: 22px;
}
.sjekk-skjema h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.025em; }
.sjekk-skjema__valg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.valgknapp { cursor: pointer; }
.valgknapp input { position: absolute; opacity: 0; pointer-events: none; }
.valgknapp span {
  display: inline-block; padding: 10px 18px; border-radius: 99px; border: 1px solid #D6D3CC;
  background: #fff; font-weight: 600; font-size: 15px; transition: background .2s, color .2s, border-color .2s;
}
.valgknapp input:checked + span { background: var(--blekk); color: #fff; border-color: var(--blekk); }
.valgknapp input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.sjekk-skjema__felt { display: grid; gap: 14px; }
@media (min-width: 760px) { .sjekk-skjema__felt { grid-template-columns: 1fr 1fr; } .sjekk-skjema__felt .bred { grid-column: 1 / -1; } }
.sjekk-skjema label { display: grid; gap: 8px; font-size: 14px; color: var(--dempet); }
.sjekk-skjema input[type=text], .sjekk-skjema input[type=email], .sjekk-skjema textarea {
  width: 100%; background: #fff; border: 1px solid #D6D3CC; border-radius: 12px;
  padding: 14px 16px; font-size: 16px; color: var(--grafitt); resize: vertical; transition: border-color .2s;
}
.sjekk-skjema input:focus, .sjekk-skjema textarea:focus { outline: none; border-color: var(--accent); }
.sjekk-skjema .knapp { justify-self: start; }

/* ---------- pakker: faner ---------- */
.faner {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 44px; padding: 5px;
  background: var(--stein); border-radius: 99px;
}
.fane {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 11px 22px; border-radius: 99px; font-weight: 600; font-size: 15.5px; color: var(--dempet);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.fane:hover { color: var(--grafitt); }
.fane[aria-selected="true"] { background: var(--blekk); color: #fff; box-shadow: 0 6px 16px rgba(13, 13, 15, 0.15); }
.fanepanel { margin-top: 28px; }
.fanepanel:not([hidden]) { animation: tj-inn .45s ease both; }
.fanepanel__intro { color: var(--dempet); margin-bottom: 24px; max-width: 46em; }
.pakke__eksempel { margin: -14px 0 28px; font-weight: 500; font-size: 15px; }
.pakke__notat { margin: -14px 0 24px; font-size: 13.5px; color: var(--dempet); }
.pakke--mork .pakke__notat { color: var(--dempet-mork); }

/* ---------- helpakke (Fra bunnen) ---------- */
.helpakke {
  position: relative; overflow: hidden; margin-top: 16px;
  display: grid; gap: 24px; align-items: center;
  padding: clamp(28px, 4vw, 48px); border-radius: 22px;
  background: var(--blekk); color: #fff;
}
@media (min-width: 900px) { .helpakke { grid-template-columns: 1fr auto; gap: 48px; } }
.helpakke__ringer { position: absolute; right: -80px; top: 50%; width: 420px; height: 420px; transform: translateY(-50%); pointer-events: none; }
.helpakke__tekst, .helpakke__knapp { position: relative; }
.helpakke .etikett { color: #8D8D95; }
.helpakke h3 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.04em; line-height: 1; margin: 14px 0 14px; }
.helpakke h3 span { display: block; color: var(--accent); white-space: nowrap; font-size: 0.62em; letter-spacing: -0.03em; margin-top: 10px; }
.helpakke p:last-child { color: var(--dempet-mork); max-width: 38em; }
.helpakke__knapp { justify-self: start; }
@media (max-width: 899px) { .helpakke__ringer { right: -160px; top: auto; bottom: -200px; transform: none; } }

/* ---------- 4 pakker i en fane ---------- */
@media (min-width: 1040px) and (max-width: 1199px) {
  .pakker:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .pakker:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
  .pakker:has(> :nth-child(4)) .pakke { padding: 26px 24px; }
}

/* ---------- tillegg ---------- */
.tillegg { margin-top: 48px; }
.tillegg h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.025em; }
.tillegg__liste { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 560px) { .tillegg__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .tillegg__liste { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .tillegg__liste { grid-template-columns: repeat(5, 1fr); } }
.tillegg__kort {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  padding: 20px; border-radius: 16px; background: var(--papir); border: 1px solid var(--linje);
  transition: border-color .2s ease, transform .2s ease;
}
.tillegg__kort:hover { border-color: var(--blekk); transform: translateY(-2px); }
.tillegg__kort strong { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.tillegg__tekst { color: var(--dempet); font-size: 14.5px; line-height: 1.45; }
.tillegg__pris { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 15px; color: var(--accent); }

.tj__ogsa { margin: 20px 0 36px; color: var(--dempet); font-size: 15px; }

/* ---------- skjema: status og personvern ---------- */
.skjema__personvern { font-size: 13px; color: var(--dempet); margin: -4px 0 0; }
.seksjon--mork .skjema__personvern { color: #8D8D95; }
.skjema__status { font-size: 15px; font-weight: 500; margin: 0; min-height: 0; }
.skjema__status:empty { display: none; }
.skjema__status--ok { color: #1F7A4C; }
.seksjon--mork .skjema__status--ok { color: #7BD8A5; }
.skjema__status--feil { color: #C0381C; }
.seksjon--mork .skjema__status--feil { color: #FF8F77; }
.skjema__status a { color: inherit; }
.knapp:disabled { opacity: .6; cursor: wait; transform: none; }

/* ---------- tillit ---------- */
.tillit { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linje); font-weight: 500; letter-spacing: -0.01em; }
.tillit svg { width: 28px; height: 28px; flex: none; color: var(--blekk); }

/* ---------- ett prosjekt: bred visning ---------- */
.prosjekter:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }
.prosjekter:not(:has(> :nth-child(2))) .prosjekt__bilde { aspect-ratio: 16 / 9; background: var(--stein); }
@media (min-width: 900px) {
  .prosjekter:not(:has(> :nth-child(2))) .prosjekt { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: end; }
  .prosjekter:not(:has(> :nth-child(2))) .prosjekt__tekst { padding: 0 0 12px; }
}
.prosjekt__tekst h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }

/* ---------- firmainfo ---------- */
.bunn__firma { margin-top: 18px; font-size: 13px; color: #6E6E76; }
.bunn__firma p { padding-top: 18px; border-top: 1px solid var(--blekk-linje); }

/* =========================================================
   «Hvor står dere?» – to veier
   ========================================================= */
.anker { position: absolute; top: 0; }
.veier-seksjon { position: relative; }
.veier__ingress { margin-top: 20px; }
.veier { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 860px) { .veier { grid-template-columns: 1fr 1fr; } .veier.har-aktiv { grid-template-columns: 1fr; } }
.vei { border-radius: 22px; background: var(--hvit); border: 1px solid var(--linje); transition: box-shadow .25s ease; }
.vei:not(.aktiv):hover { box-shadow: 0 16px 36px rgba(13, 13, 15, 0.08); }
.vei--mork { background: var(--blekk); border-color: var(--blekk); color: #fff; }
.vei__hode {
  appearance: none; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  width: 100%; padding: clamp(24px, 3vw, 36px); border-radius: 22px;
  display: grid; gap: 10px; justify-items: start;
}
.vei__merke {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-lys); padding: 5px 11px; border-radius: 99px;
}
.vei--mork .vei__merke { background: rgba(228, 73, 43, .16); color: #FF8F77; }
.vei__sporsmal { font-size: clamp(26px, 2.8vw, 38px); font-weight: 550; letter-spacing: -0.035em; line-height: 1.02; margin-top: 6px; }
.vei__tekst { color: var(--dempet); font-size: 17px; max-width: 30em; }
.vei--mork .vei__tekst { color: var(--dempet-mork); }
.vei .tj__mer { padding-top: 10px; }
.vei.aktiv .tj__mer-tekst::before { content: "Lukk"; }
.vei__panel { padding: 0 clamp(24px, 3vw, 36px) clamp(26px, 3vw, 40px); }
.vei.aktiv .vei__panel { animation: tj-inn .45s .1s both; }
.vei__panel > .knapp { margin-top: 28px; }
.vei--mork .to-kol p, .vei--mork .liten { color: var(--dempet-mork); }
.vei--mork .hakeliste { border-color: var(--blekk-linje); color: #D6D6DB; }
.vei--mork .prisboks__pris span { color: #8D8D95; }
.vei__liste { list-style: none; padding: 0; margin: 0 0 14px; }
.vei__liste li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--blekk-linje); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
.vei__liste li span { color: var(--accent); font-weight: 600; font-size: 14px; padding-top: 3px; }
/* lukket vei blir kompakt når den andre er åpen */
.veier.har-aktiv .vei:not(.aktiv) .vei__hode { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 24px; }
.veier.har-aktiv .vei:not(.aktiv) .vei__sporsmal { font-size: clamp(18px, 1.8vw, 22px); margin: 0; }
.veier.har-aktiv .vei:not(.aktiv) .vei__tekst,
.veier.har-aktiv .vei:not(.aktiv) .tj__mer-tekst { display: none; }
.veier.har-aktiv .vei:not(.aktiv) .tj__mer { padding: 0; }
@media (max-width: 559px) { .veier.har-aktiv .vei:not(.aktiv) .vei__merke { display: none; } .veier.har-aktiv .vei:not(.aktiv) .vei__hode { grid-template-columns: 1fr auto; } }

/* designsjekk-valg */
.sjekk-skjema { margin-top: 0; background: none; padding: 0; gap: 20px; }
.valg { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .valg { grid-template-columns: 1fr 1fr; } }
.valg legend { font-size: 14px; color: var(--dempet); margin-bottom: 12px; padding: 0; }
.valg__kort { border: 1.5px solid var(--linje); border-radius: 16px; background: var(--papir); transition: border-color .2s ease, background .2s ease; }
.valg__kort:has(input:checked) { border-color: var(--blekk); background: #fff; box-shadow: 4px 4px 0 var(--blekk); }
.valg__hode {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px;
  padding: 20px 20px 10px; cursor: pointer;
}
.valg__hode input { position: absolute; opacity: 0; pointer-events: none; }
.valg__radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B9B6AF; display: grid; place-items: center; background: #fff; }
.valg__hode input:checked + .valg__radio { border-color: var(--blekk); }
.valg__hode input:checked + .valg__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.valg__hode input:focus-visible + .valg__radio { outline: 2px solid var(--accent); outline-offset: 3px; }
.valg__navn { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.valg__pris { font-weight: 600; font-size: 16px; white-space: nowrap; }
.valg__kort-tekst { grid-column: 2 / -1; color: var(--dempet); font-size: 15px; line-height: 1.45; }
.valg__mer { padding: 0 20px 16px 52px; }
.valg__mer summary { cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; display: inline-flex; gap: 8px; align-items: center; }
.valg__mer summary::-webkit-details-marker { display: none; }
.valg__mer summary::after { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; }
.valg__mer[open] summary::after { content: "–"; }
.valg__mer .hakeliste { margin: 12px 0 8px; padding-top: 12px; }
.sjekk-skjema__resten { display: grid; gap: 16px; }
.sjekk-skjema__resten:not([hidden]) { animation: tj-inn .4s ease both; }

/* =========================================================
   Pakker – tydelige valgknapper
   ========================================================= */
.faner__sporsmal { margin-top: 44px; font-size: clamp(20px, 2vw, 24px); font-weight: 550; letter-spacing: -0.02em; }
.faner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px;
  padding: 0; background: none; border-radius: 0; width: 100%;
}
@media (min-width: 860px) { .faner { max-width: 820px; } }
.fane {
  display: grid; justify-items: start; gap: 4px; text-align: left;
  padding: 18px; border-radius: 16px; border: 1.5px solid var(--linje); background: var(--papir);
  color: var(--grafitt); box-shadow: none;
}
.fane:hover { border-color: var(--blekk); color: var(--grafitt); }
.fane__ikon { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--linje); display: grid; place-items: center; margin-bottom: 8px; }
.fane__ikon svg { width: 18px; height: 18px; }
.fane__navn { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.fane__under { font-size: 13.5px; font-weight: 400; color: var(--dempet); line-height: 1.35; }
.fane[aria-selected="true"] { background: var(--blekk); border-color: var(--blekk); color: #fff; box-shadow: 0 10px 24px rgba(13, 13, 15, 0.18); position: relative; }
.fane[aria-selected="true"] .fane__under { color: var(--dempet-mork); }
.fane[aria-selected="true"] .fane__ikon { background: var(--accent); border-color: var(--accent); color: #fff; }
.fane[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--blekk);
  transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
@media (max-width: 559px) {
  .fane { padding: 14px 10px; justify-items: center; text-align: center; }
  .fane__under { display: none; }
  .fane__ikon { margin-bottom: 4px; }
  .fane__navn { font-size: 16px; }
}
.fanepanel { margin-top: 30px; }

/* færre punkter */
.hakeliste [data-ekstra] { display: none; }
.hakeliste.vis-alle [data-ekstra] { display: list-item; }
.se-alt {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0; margin: -18px 0 26px;
  font-size: 14px; font-weight: 600; color: inherit; display: inline-flex; gap: 8px; align-items: center; align-self: flex-start;
}
.se-alt::after { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; }
.se-alt[aria-expanded="true"]::after { content: "–"; }

/* tillegg bak én knapp */
details.tillegg { margin-top: 16px; border: 1px solid var(--linje); border-radius: 18px; background: var(--papir); }
details.tillegg summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; font-size: clamp(18px, 1.8vw, 21px); font-weight: 550; letter-spacing: -0.015em;
}
details.tillegg summary::-webkit-details-marker { display: none; }
.tillegg__knapp { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
details.tillegg[open] .tj__pluss::before { transform: rotate(45deg); }
details.tillegg[open] .tj__pluss::after { transform: rotate(135deg); }
details.tillegg .tillegg__liste { margin: 0; padding: 0 24px 24px; }
details.tillegg .tillegg__kort { background: #fff; }
.vei__knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- historie-kort (inngang til «Fra idé til avtrykk») ---------- */
.historie-kort {
  position: relative; overflow: hidden; margin-top: clamp(40px, 6vw, 64px);
  display: grid; gap: 24px; align-items: center;
  padding: clamp(24px, 3.4vw, 40px); border-radius: 22px;
  background: var(--blekk); color: #fff; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.historie-kort:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(13,13,15,.55); }
.historie-kort:hover .historie-kort__knapp { background: #cf3d21; }
.historie-kort:hover .historie-kort__knapp svg { transform: translateX(3px); }
@media (min-width: 900px) { .historie-kort { grid-template-columns: auto 1fr auto; gap: 40px; } }
.historie-kort__bilde { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.historie-kort__prikk { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 24px 6px rgba(228,73,43,.45); }
.historie-kort__ring {
  position: absolute; inset: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0; animation: hk-puls 3.3s cubic-bezier(.2,.6,.3,1) infinite;
}
.historie-kort__ring:nth-child(2) { animation-delay: 1.1s; }
.historie-kort__ring:nth-child(3) { animation-delay: 2.2s; }
@keyframes hk-puls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .historie-kort__ring { animation: none; } }
.historie-kort__tekst { display: grid; gap: 10px; }
.historie-kort .etikett { color: #8D8D95; margin: 0; }
.historie-kort__tittel { font-size: clamp(26px, 3vw, 40px); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; }
.historie-kort__brod { color: var(--dempet-mork); max-width: 36em; }
.historie-kort__knapp { justify-self: start; }

/* ---------- fire faner + Fra bunnen-sammenligning ---------- */
.faner:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.faner:has(> :nth-child(4)) { max-width: none; }
@media (max-width: 559px) { .faner:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
.sammenlign {
  align-self: stretch; display: grid; align-content: start; gap: 18px;
  padding: 28px; border-radius: var(--radius); border: 1.5px dashed var(--linje); background: var(--papir);
}
.sammenlign .etikett { margin: 0; }
.sammenlign dl { margin: 0; display: grid; }
.sammenlign dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linje); }
.sammenlign dt { color: var(--dempet); }
.sammenlign dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; }
.sammenlign__sum dd s { color: var(--dempet); text-decoration-thickness: 1.5px; }
.sammenlign__pakke { border-bottom: 0 !important; }
.sammenlign__pakke dt { color: var(--grafitt); font-weight: 600; }
.sammenlign__pakke dd { color: var(--accent); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.sammenlign__spar { margin: 0; font-weight: 500; }
.pakke__ekstra { width: 100%; margin-top: 10px; background: transparent; color: var(--blekk); border-color: var(--linje); }
.pakke__ekstra:hover { border-color: var(--blekk); }

/* ---------- 05 gratis designsjekk ---------- */
.sjekk-boks {
  margin-top: 44px; padding: clamp(24px, 3vw, 40px);
  border-radius: 22px; background: var(--hvit); border: 1px solid var(--linje);
}