/* =========================================================================
   VEVSMIA — framside
   Palett, typografi og struktur følgjer VEVSMIA-designkonsept.md.
   Avleidde fargar er lagde til berre for lesbarheit (sjå kommentarar).
   ========================================================================= */

:root {
  /* --- Godkjend kjernepalett --- */
  --mork:            #302F2D;
  --mork-flate:      #3A3835;   /* avleidd, litt lysare enn --mork: kortflate på mørk botn */
  --lys:             #F1EFE8;
  --kopar:           #B87A4B;   /* grafisk aksent: hårstrekar, merke, kantar */

  /* --- Avleidde, av kontrastomsyn (kvit tekst på #B87A4B = 3,5:1 → for lågt) --- */
  --kopar-knapp:     #A0663B;   /* kvit tekst: 4,7:1  ✔ WCAG AA */
  --kopar-knapp-inn: #8A5731;   /* trykk/hover        5,3:1  ✔ */
  --kopar-tekst:     #8A5731;   /* koparfarga tekst på lys botn: 5,2:1 ✔ */
  --kopar-lys:       #D2A277;   /* koparfarga tekst på mørk botn: 5,8:1 ✔ */

  --varmgra:         #8C877D;   /* berre hårstrekar/kantar på lys botn */
  --varmgra-tekst:   #5F5B54;   /* sekundærtekst på lys botn: 6,3:1 ✔ */
  --lys-dempa:       #C7C1B5;   /* sekundærtekst på mørk botn: 7,4:1 ✔ */
  --hairline-mork:   rgba(241, 239, 232, .16);

  /* --- Typografi --- */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --brod:    "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ordmerke: "Hanken Grotesk", "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Rytme --- */
  --rytme:   clamp(72px, 9vw, 116px);
  --ramme:   1120px;
  --gate:    clamp(20px, 5vw, 40px);
  --radius:  6px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--lys);
  color: var(--mork);
  font-family: var(--brod);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wght" 700, "opsz" 72, "SOFT" 30, "WONK" 0;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

.hopp-til {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kopar-knapp); color: #fff;
  padding: 12px 20px; text-decoration: none; font-weight: 500;
}
.hopp-til:focus { left: 8px; top: 8px; }

/* ---------- Ramme ---------- */
.ramme {
  width: 100%;
  max-width: var(--ramme);
  margin-inline: auto;
  padding-inline: var(--gate);
}
.ramme--smal { max-width: 760px; }

/* ---------- Seksjonar ---------- */
.del {
  padding-block: var(--rytme);
  position: relative;
}
.del--tett { padding-block: calc(var(--rytme) * .78); }

.del--mork {
  background: var(--mork);
  color: var(--lys);
}
.del--mork .del__ingress,
.del--mork .del__utgang--tekst { color: var(--lys-dempa); }

/* Rytme: eit hårfint skilje der to mørke seksjonar ligg rett etter kvarandre,
   slik at det aldri kjennest som éin endelaus mørk vegg. Seksjonar skilde av
   ein lys pause (Pakkar og prisar) treng det ikkje — fargeskiftet er skiljet
   i seg sjølv. */
.del--mork + .del--mork {
  border-top: 1px solid var(--hairline-mork);
}

/* Seksjonar som høyrer saman og skal flyte over i kvarandre utan seam. */
.del--flyt-ned { padding-bottom: calc(var(--rytme) * .42); }
.del--flyt-opp { padding-top: calc(var(--rytme) * .42); }

.augnebryn {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kopar-tekst);
  margin: 0 0 .9rem;
}
.del--mork .augnebryn { color: var(--kopar-lys); }

.del__tittel {
  font-size: clamp(2.15rem, 4.2vw, 3.1rem);
  max-width: 18ch;
  margin-bottom: 1.1rem;
}

.del__ingress {
  max-width: 60ch;
  color: var(--varmgra-tekst);
  font-size: 1.09rem;
  margin-bottom: 2.6rem;
}

.del__utgang { margin-top: 2.4rem; margin-bottom: 0; }
.del__utgang--tekst {
  max-width: 62ch;
  color: var(--varmgra-tekst);
}
.del__utgang--fin { margin-top: 1.2rem; font-size: .98rem; }

/* ---------- Knappar og lenkjer ---------- */
.kn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--brod);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.kn--primar {
  background: var(--kopar-knapp);
  border-color: var(--kopar-knapp);
  color: #fff;
}
.kn--primar:hover,
.kn--primar:focus-visible {
  background: var(--kopar-knapp-inn);
  border-color: var(--kopar-knapp-inn);
}

.kn--ghost {
  background: transparent;
  border-color: var(--varmgra);
  color: var(--mork);
}
.kn--ghost:hover,
.kn--ghost:focus-visible {
  border-color: var(--kopar-knapp);
  color: var(--kopar-tekst);
}

.kn--ghost-lys {
  background: transparent;
  border-color: var(--hairline-mork);
  color: var(--lys);
}
.kn--ghost-lys:hover,
.kn--ghost-lys:focus-visible {
  border-color: var(--kopar);
  color: #fff;
}

.kn--full { width: 100%; }

.knapperad {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.2rem;
}

.lenkje {
  color: var(--kopar-tekst);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--kopar);
  padding-bottom: 2px;
}
.lenkje:hover { color: var(--mork); border-bottom-color: var(--mork); }
.lenkje--lys { color: var(--lys); border-bottom-color: var(--kopar); }
.lenkje--lys:hover { color: #fff; border-bottom-color: var(--lys); }

/* Element som ventar på ei underside som ikkje er bygd enno.
   Dei ser normale ut, men navigerer ikkje — ingen daude lenkjer. */
.kn--ventar, .lenkje--ventar { cursor: default; }

/* ---------- Header ---------- */
.topplinje {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mork);
  color: var(--lys);
}
.topplinje__inn {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.merke {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  border-radius: 3px;
}
.merke__v {
  width: 40px;
  height: auto;
  flex: none;
}
.merke__namn {
  font-family: var(--ordmerke);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.035em;
  line-height: 1;
  color: var(--lys);
  white-space: nowrap;
}

.meny {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-left: auto;
}
.meny__liste {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}
.meny__liste a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--lys-dempa);
  font-size: .97rem;
  text-decoration: none;
  transition: color .18s ease;
}
.meny__liste a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--kopar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.meny__liste a:hover { color: var(--lys); }
.meny__liste a:hover::after,
.meny__liste a:focus-visible::after { transform: scaleX(1); }

.sprak {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--lys-dempa);
  white-space: nowrap;
}
.sprak__val--aktiv { color: var(--lys); font-weight: 500; }
.sprak__val--av { opacity: .45; }
.sprak__skil { opacity: .45; }

.menyknapp {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 6px;
  background: none;
  border: 0;
  color: var(--lys);
  font-family: var(--brod);
  font-size: .9rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.menyknapp__strekar { display: inline-block; width: 20px; }
.menyknapp__strekar span {
  display: block;
  height: 1.5px;
  background: var(--lys);
  margin: 4px 0;
}

/* ---------- Hero ---------- */
.hero {
  overflow: hidden;
  padding-block: clamp(84px, 13vw, 152px);
}
.hero__inn { position: relative; z-index: 1; max-width: 720px; }

.hero__tittel {
  font-size: clamp(2.9rem, 8vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 13ch;
}
.strek-kopar {
  box-shadow: inset 0 -3px 0 var(--kopar);
}

.hero__ingress {
  margin-top: 1.6rem;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--lys-dempa);
}

/* ---------- Rutenett og kort ---------- */
.rutenett {
  display: grid;
  gap: 24px;
}
.rutenett--2 { grid-template-columns: repeat(2, 1fr); }
.rutenett--3 { grid-template-columns: repeat(3, 1fr); }

.kort {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--varmgra);
  border-radius: var(--radius);
  background: transparent;
  overflow: hidden;
}
.kort__bilete {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--varmgra);
}
.kort__kropp {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.6vw, 30px);
}
.kort__tittel {
  font-size: 1.42rem;
  margin-bottom: .55rem;
}
.kort__stikk {
  color: var(--kopar-tekst);
  font-size: .95rem;
  margin-bottom: .8rem;
}
.kort__kropp p { color: var(--varmgra-tekst); }
.kort__kropp .kn { margin-top: auto; align-self: flex-start; }

.kort--pakke .kort__kropp { border-top: 3px solid var(--kopar); }

/* Priskorta: dei einaste mørke elementa i ei elles lys seksjon — den lyse
   pusepausen er framleis bakgrunnen rundt korta, ikkje korta sjølve. */
.kort--pakke {
  background: var(--mork-flate);
  border-color: var(--hairline-mork);
}
.kort--pakke .kort__tittel { color: var(--lys); }
.kort--pakke .pris { color: var(--lys); }
.kort--pakke .kort__kropp p { color: var(--lys-dempa); }
.kort--pakke .hakeliste li { color: var(--lys-dempa); }
.kort--pakke .kn--ghost {
  border-color: var(--hairline-mork);
  color: var(--lys);
}
.kort--pakke .kn--ghost:hover,
.kort--pakke .kn--ghost:focus-visible {
  border-color: var(--kopar);
  color: #fff;
}

.pris {
  font-family: var(--display);
  font-variation-settings: "wght" 700, "opsz" 60, "SOFT" 30, "WONK" 0;
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mork);
  margin-bottom: .9rem;
}

.hakeliste { margin: 1.2rem 0 1.7rem; }
.hakeliste li {
  position: relative;
  padding-left: 20px;
  margin-bottom: .5rem;
  font-size: .98rem;
  color: var(--varmgra-tekst);
}
.hakeliste li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 1px;
  background: var(--kopar);
}

/* ---------- Punktrad (tekstblokker utan kortkant) ---------- */
.punktrad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.6vw, 48px);
}
.punkt { max-width: 46ch; }
.punkt__tittel {
  font-size: 1.18rem;
  margin-bottom: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--varmgra);
}
.punkt p { color: var(--varmgra-tekst); margin-bottom: 0; }

.del--mork .punkt__tittel { border-top-color: var(--hairline-mork); }
.del--mork .punkt p { color: var(--lys-dempa); }

/* ---------- Overstyringar for mørk botn ---------- */
.del--mork .kort {
  background: var(--mork-flate);
  border-color: var(--hairline-mork);
}
.del--mork .kort__bilete { border-bottom-color: var(--hairline-mork); }
.del--mork .kort__kropp p { color: var(--lys-dempa); }
.del--mork .kort__stikk { color: var(--kopar-lys); }
.del--mork .hakeliste li { color: var(--lys-dempa); }

.del--mork .kn--ghost {
  border-color: var(--hairline-mork);
  color: var(--lys);
}
.del--mork .kn--ghost:hover,
.del--mork .kn--ghost:focus-visible {
  border-color: var(--kopar);
  color: #fff;
}

.del--mork .lenkje {
  color: var(--lys);
  border-bottom-color: var(--kopar);
}
.del--mork .lenkje:hover { color: #fff; border-bottom-color: var(--lys); }

.del--mork .om__bilete img { border-color: var(--hairline-mork); }
.del--mork .om__tekst p { color: var(--lys-dempa); }

.del--mork .faq { border-top-color: var(--hairline-mork); }
.del--mork .faq__punkt { border-bottom-color: var(--hairline-mork); }
.del--mork .faq__punkt summary::after { color: var(--kopar-lys); }
.del--mork .faq__svar { color: var(--lys-dempa); }

/* ---------- Steg (arbeidsprosess) ---------- */
.steg {
  display: grid;
  gap: 0;
  max-width: 780px;
}
.steg__punkt {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding-block: 26px;
  border-top: 1px solid var(--hairline-mork);
}
.steg__punkt:last-child { border-bottom: 1px solid var(--hairline-mork); }

.steg__tal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--kopar);
  border-radius: 50%;
  color: var(--kopar);
  font-size: .92rem;
  font-weight: 500;
}
.steg__tittel { font-size: 1.16rem; margin-bottom: .4rem; }
.steg__punkt p { color: var(--lys-dempa); margin-bottom: 0; }

/* ---------- Prosjektrader (redaksjonelle rader, éin per prosjekt) ----------
   Teksten kjem først i DOM-en. På desktop blir biletet plassert i venstre
   spalte med grid, og knappen står i rad 2 under teksten. Fordi knappen ligg
   etter biletet i DOM-en, blir mobilrekkjefølgja tekst → bilete → knapp av
   seg sjølv når rutenettet fell til éi spalte. */
.prosjektliste { display: block; }

.prosjekt {
  display: grid;
  grid-template-columns: 1.26fr 1fr;
  column-gap: clamp(32px, 4.2vw, 60px);
  row-gap: 26px;
  align-items: center;
  padding-block: clamp(38px, 4.4vw, 56px);
  border-top: 1px solid var(--varmgra);
}
.prosjekt:last-child { border-bottom: 1px solid var(--varmgra); }
.del--mork .prosjekt { border-top-color: var(--hairline-mork); }
.del--mork .prosjekt:last-child { border-bottom-color: var(--hairline-mork); }

.prosjekt__tekst  { grid-column: 2; grid-row: 1; }
.prosjekt__bilete { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.prosjekt__kn     { grid-column: 2; grid-row: 2; justify-self: start; }

.prosjekt__tittel { font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin-bottom: .5rem; }
.prosjekt__stikk  { color: var(--kopar-tekst); font-size: 1rem; margin-bottom: 1rem; }
.prosjekt__brod   { color: var(--varmgra-tekst); max-width: 46ch; margin-bottom: 0; }
.del--mork .prosjekt__stikk { color: var(--kopar-lys); }
.del--mork .prosjekt__brod  { color: var(--lys-dempa); }

/* ---------- Nettlesarramme rundt skjermbilete ----------
   Ei hårstrek og domenenamnet — ingen ikon, knappar eller dekor. Ramma skal
   dokumentere at nettsidene er publiserte, ikkje etterlikne ein nettlesar. */
.nettlesar {
  margin: 0;
  background: var(--mork-flate);
  border: 1px solid var(--varmgra);
  border-radius: var(--radius);
  overflow: hidden;
}
.nettlesar__domene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding-inline: 12px;
  font-size: .7rem;
  color: var(--lys-dempa);
  background: rgba(241, 239, 232, .06);
  border-bottom: 1px solid var(--hairline-mork);
}
.nettlesar img { width: 100%; }

/* Felles haldarforhold for alle tre skjermbileta, slik at radene får identisk
   visuell vekt sjølv om kjeldefilene skil seg nokre pikslar. */
.prosjekt__bilete img { aspect-ratio: 1903 / 850; object-fit: cover; object-position: top center; }
@media (max-width: 640px) {
  .prosjekt__bilete img { aspect-ratio: 1170 / 1600; }
}
.del--mork .nettlesar { border-color: var(--hairline-mork); }

/* ---------- Om Bjørn ---------- */
.om {
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  column-gap: clamp(36px, 5vw, 76px);
  row-gap: 28px;
  align-items: center;
}
.om__bilete { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
.om__tekst  { grid-column: 2; grid-row: 1; max-width: 46ch; }
.om__utgang { grid-column: 2; grid-row: 2; margin: 0; }

/* portrett-a.png er 760×950, altså eksakt 4:5 — same forhold som haldaren.
   «cover» kuttar difor ingenting i nokon breidd, og forholdet reserverer
   plassen før biletet er lasta (ingen layouthopp). */
.om__bilete img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--varmgra);
}
.om__tekst p { color: var(--varmgra-tekst); line-height: 1.68; margin-bottom: 1.2rem; }
.om__tekst p:last-child { margin-bottom: 0; }
.om__tekst .del__tittel {
  font-size: clamp(2.05rem, 3.5vw, 2.9rem);
  max-width: 24ch;
  margin-bottom: 1.7rem;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--varmgra); }
.faq__punkt { border-bottom: 1px solid var(--varmgra); }

.faq__punkt summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--display);
  font-variation-settings: "wght" 700, "opsz" 48, "SOFT" 30, "WONK" 0;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.32;
  cursor: pointer;
  list-style: none;
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary::after {
  content: "+";
  flex: none;
  color: var(--kopar-tekst);
  font-family: var(--brod);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}
.faq__punkt[open] summary::after { content: "–"; }
.faq__svar {
  padding-bottom: 22px;
  max-width: 62ch;
  color: var(--varmgra-tekst);
}

/* ---------- Kontakt ---------- */
.kontakt {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 460px);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.kontakt__tekst p { color: var(--lys-dempa); max-width: 52ch; }
.kontakt__val { margin: 1.8rem 0; }
.kontakt__val li {
  position: relative;
  padding-left: 20px;
  margin-bottom: .7rem;
  color: var(--lys-dempa);
}
.kontakt__val li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 8px; height: 1px;
  background: var(--kopar);
}
.kontakt__utgang {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-mork);
  font-size: .97rem;
}

.skjemakort {
  border: 1px solid var(--hairline-mork);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
}
.felt { margin-bottom: 18px; }
.felt label {
  display: block;
  margin-bottom: 7px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--lys);
}
.pakravd { color: var(--kopar); }
.valfritt { color: var(--lys-dempa); font-weight: 400; }

.felt input,
.felt textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(241, 239, 232, .05);
  border: 1px solid var(--hairline-mork);
  border-radius: var(--radius);
  color: var(--lys);
  font-family: var(--brod);
  font-size: 1rem;
  line-height: 1.5;
}
.felt textarea { resize: vertical; min-height: 120px; }
.felt input:focus,
.felt textarea:focus {
  border-color: var(--kopar);
  outline: none;
}
.felt input:focus-visible,
.felt textarea:focus-visible {
  outline: 2px solid var(--kopar);
  outline-offset: 2px;
}
.felt input[aria-invalid="true"],
.felt textarea[aria-invalid="true"] { border-color: #E2A08C; }

.skjema__melding {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 2px solid var(--kopar);
  background: rgba(241, 239, 232, .05);
  font-size: .95rem;
  color: var(--lys);
}
.skjema__hjelp {
  margin: 16px 0 0;
  font-size: .86rem;
  color: var(--lys-dempa);
}

/* ---------- Footer ---------- */
.botn {
  background: var(--mork);
  color: var(--lys-dempa);
  padding-top: calc(var(--rytme) * .42);
}
.botn__inn {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.botn__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.botn__logo img { width: 34px; height: auto; flex: none; }
.botn__logo-namn {
  font-family: var(--ordmerke);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: 0.035em;
  line-height: 1;
  color: var(--lys);
}
.botn__merke p { max-width: 40ch; font-size: .95rem; }

.botn__tittel {
  font-family: var(--brod);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lys);
  margin-bottom: 14px;
}
.botn__meny li, .botn__juridisk li { margin-bottom: 8px; }
.botn a { color: var(--lys-dempa); text-decoration: none; }
.botn a:hover { color: var(--lys); text-decoration: underline; text-underline-offset: 3px; }
.botn__kontakt p { font-size: .95rem; }
.botn__juridisk { margin-top: 18px; font-size: .92rem; }

.botn__linje {
  border-top: 1px solid var(--hairline-mork);
  padding-block: 22px;
  font-size: .86rem;
}
.botn__linje p { margin: 0; }

/* =========================================================================
   Responsivt
   ========================================================================= */

@media (max-width: 980px) {
  .rutenett--3 { grid-template-columns: repeat(2, 1fr); }

  /* Éi spalte: DOM-rekkjefølgja tek over — tekst → bilete → knapp. */
  .prosjekt { grid-template-columns: 1fr; }
  .prosjekt__tekst,
  .prosjekt__bilete,
  .prosjekt__kn { grid-column: 1; grid-row: auto; }

  .om { grid-template-columns: 1fr; }
  .om__tekst,
  .om__bilete,
  .om__utgang { grid-column: 1; grid-row: auto; max-width: none; }
  .om__bilete { max-width: 420px; }

  .kontakt { grid-template-columns: 1fr; }
  .botn__inn { grid-template-columns: 1fr 1fr; }
  .botn__merke { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }

  .menyknapp { display: inline-flex; }

  /* Logoen skalerer kontrollert ned, held VEVSMIA-namnet synleg heilt
     ned til 320px — det er god margin att til menyknappen ved den breidda. */
  .merke { gap: 8px; }
  .merke__v { width: 28px; }
  .merke__namn { font-size: 1.05rem; }

  .meny {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px var(--gate) 22px;
    background: var(--mork);
    border-bottom: 1px solid var(--hairline-mork);
  }
  .meny[data-open="ja"] { display: flex; }

  .meny__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .meny__liste a {
    display: block;
    padding: 14px 0;
    font-size: 1.05rem;
    color: var(--lys);
    border-bottom: 1px solid var(--hairline-mork);
  }
  .meny__liste a::after { display: none; }

  .sprak { margin-top: 18px; }

  .topplinje__inn { position: relative; min-height: 64px; }

  .rutenett--3,
  .rutenett--2 { grid-template-columns: 1fr; }

  .punktrad { grid-template-columns: 1fr; gap: 26px; }

  .om__bilete { max-width: none; }
  .prosjekt__kn { justify-self: stretch; }  .steg__punkt { grid-template-columns: 40px 1fr; gap: 14px; }

  .botn__inn { grid-template-columns: 1fr; }

  body { font-size: 1.08rem; }
  .kn { width: 100%; }
  .kort__kropp .kn { align-self: stretch; }
  .knapperad { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}