/* ============================================================
   DEKKSENTRALEN AS — «Natrium på gummi»
   Handling = telefonnummeret, ikke en CTA-boks
   (Pentagram / Mack Trucks: gult på sort som industri, ikke
   Netflix-rødt). Natriumlampe på Tromsøysundvegen + fettstift
   på dekk. Superdekk-rød kun som kjede-hake.
   Display: Big Shoulders Display. Brød: IBM Plex Sans.
   ============================================================ */

:root {
  --ink: #15120f;
  --ink-2: #1e1a16;
  --ink-3: #2a241e;
  --paper: #e7dcc8;
  --paper-2: #cbbfa8;
  --snow: #ebe3d4;
  --natrium: #e2a01a;
  --natrium-mork: #c88814;
  --kjede: #c41e16;
  --rod: var(--natrium);
  --rod-mork: var(--natrium-mork);
  --is: #aea89a;
  --hvit: #f3ead8;
  --linje-lys: rgba(231, 220, 200, 0.16);
  --linje-mork: rgba(21, 18, 15, 0.16);

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", monospace;

  --text-base: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  --text-hero: clamp(2.7rem, 0.4rem + 6.4vw, 6.6rem);
  --text-h2: clamp(2.2rem, 1rem + 4vw, 4.6rem);
  --text-h3: clamp(1.8rem, 1.1rem + 2.4vw, 3.4rem);
  --text-nr: clamp(3.6rem, 2rem + 6.4vw, 8.4rem);

  --space-section: clamp(4.5rem, 3rem + 6vw, 10rem);
  --marg: clamp(1.1rem, 0.5rem + 3vw, 4rem);

  --dur-fast: 180ms;
  --dur: 520ms;
  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, dl, dd, figure, p, table { margin: 0; }
dd { margin-inline-start: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -200vw; top: 0; z-index: 100;
  background: var(--natrium); color: var(--ink);
  padding: 0.6rem 1rem; font-family: var(--font-body);
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--natrium);
  outline-offset: 3px;
}

.rod { color: var(--rod); font-style: normal; }

/* Jobbkort-felt: rød støpt strek, ikke pille. */
.feltmerke {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--is);
  padding-top: 0.55rem;
  border-top: 2px solid var(--natrium);
  margin-bottom: 0.95rem;
}

/* Registerlinje — kun ekte data, aldri overskrift. */
.datalinje {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--is);
}
.datalinje a { color: inherit; text-underline-offset: 3px; }
.datalinje a:hover { color: var(--paper); }

/* Telefonnummeret er handlingen — fettstift på gummi, ingen boks. */
.tlf {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.1rem + 4.2vw, 4.8rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--natrium);
  text-decoration: none;
  text-transform: uppercase;
}
.tlf:hover { color: var(--hvit); }
.tlf--topp {
  font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.65rem);
  margin-left: auto;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.tlf--blokk {
  font-size: clamp(2rem, 1.15rem + 2.2vw, 3.1rem);
}
.tlf--ring {
  white-space: nowrap;
}
/* Selve nummeret under «Ring oss» — mindre enn kallet, men samme lenke,
   så hele blokka er ett trykkfelt på mobil. */
.tlf__nummer {
  display: block;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 0.4rem;
}
.post {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--natrium);
  padding-bottom: 0.12rem;
}
.post:hover { color: var(--natrium); }

/* Telefonnummer midt i en tekstlinje — må se trykkbart ut uten å bryte
   setningen, derfor samme understrek som e-postlenken. */
.tlf-inline {
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--natrium);
  padding-bottom: 0.08em;
}
.tlf-inline:hover { color: var(--natrium); }

.lenke-pil {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--natrium);
  padding-bottom: 0.15rem;
}
.lenke-pil::after { content: " →"; color: var(--natrium); }
.lenke-pil:hover { color: var(--natrium); }

/* Skilletegnet hører til lenken, så det forsvinner sammen med den når
   sporing ikke er satt opp og lenken skjules. */
.bunn__meta .js-samtykke-endre::before { content: "· "; }

/* ---------- dataline: utstyrsplate øverst ---------- */
.dataline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem var(--marg);
  border-bottom: 1px solid var(--linje-lys);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--is);
}
.dataline__cell--tid { white-space: nowrap; }
@media (max-width: 820px) {
  .dataline__cell:first-child { display: none; }
  .dataline { justify-content: center; }
}

/* ---------- topp / header ---------- */
.topp {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  border-bottom: 1px solid var(--linje-lys);
}
.topp__inner {
  display: flex; align-items: center; gap: 2rem;
  padding: 0.85rem var(--marg);
}
.merke { text-decoration: none; line-height: 1.05; }
.merke__navn {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 1.25rem + 2vw, 2.75rem);
  letter-spacing: -0.015em;
  line-height: 1;
}
.merke__under {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--is);
  margin-top: 0.22rem;
}
.kjede {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  background: var(--kjede);
  flex-shrink: 0;
}
/* Superdekk-logoen i toppen, merket «Webshop» etter kundens ønske.
   Den norske logofila har en hvit pille innebygd i selve merket, så den
   leses rett mot den mørke toppen og trenger ingen plate bak seg. */
.kjedelogo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.kjedelogo__merkelapp {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--is);
  white-space: nowrap;
}
.kjedelogo img {
  height: 34px;
  width: auto;
  transition: opacity var(--dur-fast) linear;
}
.kjedelogo:hover img { opacity: 0.85; }
.kjedelogo:hover .kjedelogo__merkelapp { color: var(--paper); }

.nav {
  display: flex; gap: 1.5rem; margin-left: auto;
}
.nav a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--paper);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.nav a:hover { color: var(--natrium); border-bottom-color: var(--natrium); }
@media (max-width: 960px) { .nav { display: none; } }
@media (max-width: 560px) {
  .topp__inner { justify-content: space-between; gap: 0.8rem; }
  .tlf--topp { font-size: 1.15rem; }
  .merke__under { font-size: 0.66rem; }
  .merke__navn { font-size: 1.65rem; }
  /* Ordmerket og telefonnummeret fyller hele bredden på små skjermer, så
     kjedelogoen brytes ned på egen linje i stedet for å presses inn. */
  .topp__inner { flex-wrap: wrap; row-gap: 0.55rem; }
  .kjedelogo { order: 3; width: 100%; gap: 0.5rem; }
  .kjedelogo__merkelapp { font-size: 0.66rem; }
  .kjedelogo img { height: 27px; }
}
.tlf--topp { margin-left: auto; }
.nav + .tlf--topp { margin-left: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 88vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero__bilde {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bilde img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5;
  transform: scale(1.06);
  animation: heroPan 26s var(--ease-ut) forwards;
}
@keyframes heroPan {
  to { transform: scale(1) translateX(0.6%); }
}
.hero__bilde::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--ink) 18%, rgba(21, 18, 15, 0.78) 48%, rgba(21, 18, 15, 0.28) 100%);
}
.hero__innhold {
  position: relative; z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vh, 6rem) var(--marg) 2rem;
  max-width: 1180px;
}
.hero__tittel {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.hero__linje {
  display: block;
  overflow: hidden;
  padding-top: 0.16em;
  margin-top: -0.06em;
}
.hero__linje--kontur { font-size: 0.52em; margin-top: 0.12em; letter-spacing: -0.01em; }
.hero__linje--kontur > span {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--paper);
}
.hero__linje--kontur .rod {
  color: var(--rod);
  -webkit-text-stroke: 0;
}
.hero__linje > span {
  display: inline-block;
  transform: translateY(110%);
  animation: linjeOpp 0.9s var(--ease-ut) forwards;
}
.hero__linje:nth-child(2) > span { animation-delay: 90ms; }
.hero__linje:nth-child(3) > span { animation-delay: 180ms; }
@keyframes linjeOpp { to { transform: translateY(0); } }
.hero__ingress {
  max-width: 34rem;
  color: var(--paper-2);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.hero__rail {
  position: absolute;
  right: 1.1rem; bottom: 3.4rem;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--is);
  margin: 0;
}
@media (max-width: 900px) { .hero__rail { display: none; } }

.hero__data {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.85rem var(--marg) 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--is);
}

/* ---------- ticker: merker som lastebil-livery ---------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--linje-lys);
  background: var(--ink-2);
  padding: 0.55rem 0;
}
.ticker__spor {
  display: flex; gap: 2.2rem; width: max-content;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-2);
  animation: tick 38s linear infinite;
}
.ticker__spor i { color: var(--natrium); font-style: normal; font-weight: 800; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- seksjonsmerke ---------- */
.seksjonsmerke {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
  padding: var(--space-section) var(--marg) clamp(2rem, 4vw, 4rem);
}

/* ---------- sortiment: katalograder ---------- */
.sortiment { padding-bottom: var(--space-section); }
.rad {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 5rem) var(--marg);
  border-top: 1px solid var(--linje-lys);
}
.rad--speilet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.rad--speilet .rad__tekst { order: 2; }
.rad--speilet .rad__figur { order: 1; }

.rad__nr {
  position: absolute;
  top: -0.12em;
  right: var(--marg);
  font-family: var(--font-display);
  font-size: var(--text-nr);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(174, 168, 154, 0.38);
  pointer-events: none;
  user-select: none;
}
.rad--speilet .rad__nr { right: auto; left: var(--marg); }

.rad__tittel {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}
.rad__tekst p { color: var(--paper-2); max-width: 36rem; }

.rad__merker {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
  margin: 1.35rem 0 1.5rem;
  max-width: 36rem;
}
.rad__merker i {
  color: var(--natrium);
  font-style: normal;
  font-weight: 400;
  margin: 0 0.28em;
}

/* Felger har ingen merkelinje. Lenken arver da luften merkelinjen ga. */
.rad__tekst p + .lenke-pil { margin-top: 1.5rem; }

.rad__figur {
  position: relative;
  overflow: hidden;
}
.rad__figur a { display: block; color: inherit; }
.rad__figur img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 700ms var(--ease-ut);
}
/* Tilhengeren er et langt motiv — bredt utsnitt, ellers kappes trekkstanga. */
.rad__figur--bred img { aspect-ratio: 16 / 9; }
.rad:hover .rad__figur img { transform: scale(1.035); }

@media (max-width: 860px) {
  .rad, .rad--speilet { grid-template-columns: 1fr; }
  .rad--speilet .rad__tekst { order: 1; }
  .rad--speilet .rad__figur { order: 2; }
  .rad__nr { font-size: 3.2rem; top: 1.4rem; }
  /* Raden er én kolonne her, så teksten står til venstre i alle tre radene.
     Da må tallet til høyre også i den speilvendte — ellers legger det seg
     rett bak overskriften. */
  .rad--speilet .rad__nr { left: auto; right: var(--marg); }
}

/* ---------- vinter (arktisk hvit seksjon) ---------- */
.vinter {
  background: var(--snow);
  color: var(--ink);
}
.vinter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: var(--space-section) var(--marg);
}
.vinter__tittel {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.vinter__tekst { grid-column: 2; max-width: 38rem; }
.vinter__tekst p + p { margin-top: 1rem; }

.vinter__figur { grid-column: 1 / -1; position: relative; margin-top: clamp(1.5rem, 3vw, 3rem); }
.vinter__figur img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 860px) {
  .vinter__inner { grid-template-columns: 1fr; }
  .vinter__tittel, .vinter__tekst { grid-column: 1; }
}

/* ---------- sidevegg-dekoder ---------- */
.dekoder { padding-bottom: var(--space-section); }
.dekoder__ingress {
  padding: 0 var(--marg);
  max-width: 40rem;
  color: var(--paper-2);
  margin-top: -1rem;
}
.dekoder__kode {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(0.8rem, 2.5vw, 2.4rem);
  padding: clamp(2rem, 4vw, 4rem) var(--marg) 0;
}
.kode__del { display: grid; gap: 0.55rem; }
.kode__del b {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.8rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--paper);
  border-bottom: 2px solid var(--rod);
  padding-bottom: 0.28rem;
  letter-spacing: -0.03em;
}
.kode__del small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--is);
  line-height: 1.45;
}
.kode__skille {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.8rem);
  font-weight: 800;
  color: var(--is);
  line-height: 0.9;
}

/* ---------- spesifikasjonsplate (hvorfor) ---------- */
.plate { background: var(--snow); color: var(--ink); }
.plate__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--linje-mork);
}
.plate__grid .plate__celle {
  position: relative;
  padding: clamp(1.8rem, 3vw, 3rem) 1.5rem clamp(2rem, 3vw, 3rem);
  border-right: 1px solid var(--linje-mork);
}
.plate__grid .plate__celle:last-child { border-right: 0; }
.plate__celle::before {
  content: "";
  position: absolute; top: 6px; left: 6px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--natrium);
  border-left: 1px solid var(--natrium);
}

.plate__grid dt {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.65rem;
}
.plate__grid dd {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.35rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}
.plate__grid p { font-size: 0.95rem; color: #4a433a; }
/* Kjedenavnet er en lenke til Superdekk — understreket i natrium, som
   lenkene ellers, men på lys bunn her. */
.plate__lenke {
  text-decoration: none;
  border-bottom: 3px solid var(--natrium);
  transition: color var(--dur-fast) linear;
}
.plate__lenke:hover { color: var(--natrium-mork); }
@media (max-width: 980px) {
  .plate__grid { grid-template-columns: 1fr 1fr; }
  .plate__grid .plate__celle:nth-child(2n) { border-right: 0; }
  .plate__grid .plate__celle:nth-child(-n+2) { border-bottom: 1px solid var(--linje-mork); }
}
@media (max-width: 520px) {
  .plate__grid { grid-template-columns: 1fr; }
  .plate__grid .plate__celle { border-right: 0; border-bottom: 1px solid var(--linje-mork); }
  .plate__grid .plate__celle:last-child { border-bottom: 0; }
}

/* ---------- kontakt ---------- */
.kontakt {
  background: url("/img/tread-tekstur.webp") center / cover no-repeat;
  position: relative;
}
.kontakt::before {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
}
.kontakt__inner {
  position: relative;
  padding: var(--space-section) var(--marg);
}
.kontakt__tittel {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.kontakt__ingress {
  max-width: 36rem;
  color: var(--paper-2);
  margin: 1.4rem 0 3rem;
}
.kontakt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.kontakt__blokk { font-style: normal; }
.kontakt__stor {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 1rem + 1.15vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.kontakt__blokk .lenke-pil { margin-top: 1rem; }

/* Kartutsnittet er et stillbilde i en lenke til Google Maps — ingenting
   lastes fra Google før besøkende selv klikker. */
.kart {
  display: block;
  margin-top: 1.2rem;
  overflow: hidden;
  border: 1px solid var(--linje-lys);
}
.kart img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 700ms var(--ease-ut);
}
.kart:hover img { transform: scale(1.04); }
.kontakt__tel { text-decoration: none; color: var(--natrium); }
.kontakt__tel:hover { color: var(--hvit); }
.kontakt__cta { margin-top: 1rem; }
.tider { border-collapse: collapse; }
.tider th, .tider td {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.35rem 0;
}
.tider th { padding-right: 2rem; color: var(--is); font-family: var(--font-body); font-weight: 500; }
.tider td { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .kontakt__grid { grid-template-columns: 1fr; } }

/* ---------- bunn ---------- */
.bunn { border-top: 1px solid var(--linje-lys); }
.bunn__inner {
  padding: clamp(2.5rem, 5vw, 4rem) var(--marg);
  display: grid;
  gap: 0.4rem;
}
.bunn__merke {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-bottom: 0.9rem;
}
.bunn__linje {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--is);
  max-width: 48rem;
}
.bunn__linje a { color: inherit; text-underline-offset: 3px; }
.bunn__linje a:hover { color: var(--paper); }
.bunn__meta { color: rgba(174, 168, 154, 0.7); }

/* ---------- samtykkebanner ---------- */
.samtykke[hidden] { display: none; }
.samtykke {
  position: fixed;
  left: var(--marg); right: var(--marg); bottom: 1rem;
  z-index: 90;
  max-width: 560px;
  background: var(--snow);
  color: var(--ink);
  border: 1px solid var(--linje-mork);
  padding: 1.2rem 1.3rem;
  display: grid;
  gap: 0.9rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.samtykke p { font-size: 0.9rem; }
.samtykke a { color: var(--natrium-mork); }
.samtykke__valg { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline; }
.valg {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linje-mork);
  padding: 0.2rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.valg--ja {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--natrium);
  color: var(--ink);
}
.valg:hover { color: var(--natrium-mork); }

/* ---------- scroll-avsløring (kun når JS kjører — no-js-sikkert) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease-ut), transform var(--dur) var(--ease-ut);
}
.js .reveal.er-synlig { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bilde img { animation: none; transform: none; }
  .hero__linje > span { animation: none; transform: none; }
  .ticker__spor { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .rad:hover .rad__figur img { transform: none; }
  .kart:hover img { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}