/* RIGHT HAND · «Håndslaget» · designforslag fra Mustvedt Design */

:root {
  --papir: #f8f4ec;
  --papir2: #f0eadc;
  --kort: #fffdf8;
  --blekk: #241f18;
  --demp: #6e6557;
  --linje: #e2d9c8;
  --jord: #b5501f;
  --jord-m: #98411a;
  --vann: #16699c;
  --vann-m: #0f5480;
  --groen: #2e7d4f;
  --roed: #bf3226;
  --sol: #e5a92f;
  --natt: #142830;
  --natt2: #0e1f26;
  --vipps: #ff5b24;
  --hvit: #fff;
  --skygge: 0 18px 50px -18px rgba(36, 31, 24, .28);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--blekk);
  background: var(--papir);
}
img { max-width: 100%; display: block; }
a { color: var(--vann-m); }
.ramme { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hopp { position: absolute; left: -999px; top: 8px; background: var(--blekk); color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 99; }
.hopp:focus { left: 8px; }

h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 560; line-height: 1.12; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 420; color: var(--jord); }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.18rem; }
p { max-width: 62ch; }

.overlinje {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--jord-m); margin-bottom: 14px;
}
.overlinje.lys { color: var(--sol); }
.overlinje::before { content: ""; width: 26px; height: 2px; background: currentColor; }

/* Gambia-stripen */
.flagg-strek { display: flex; width: 74px; border-radius: 99px; overflow: hidden; margin: 18px 0; }
.flagg-strek i { height: 6px; flex: 1; }
.flagg-strek .r { background: var(--roed); }
.flagg-strek .b { background: var(--vann); border-left: 2px solid var(--papir); border-right: 2px solid var(--papir); }
.flagg-strek .g { background: var(--groen); }
.gi .flagg-strek .b, .bunn .flagg-strek .b { border-color: var(--natt); }

/* Topp */
.topp { position: sticky; top: 0; z-index: 50; background: rgba(248, 244, 236, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linje); }
.topp-indre { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.merke { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--blekk); }
.merke-hand { width: 38px; height: 38px; border-radius: 12px; background: var(--jord); color: #fff; display: grid; place-items: center; }
.merke-hand svg { width: 23px; height: 23px; }
.merke-tekst { font-family: 'Fraunces', serif; font-weight: 640; font-size: 1.22rem; line-height: 1.05; display: flex; flex-direction: column; }
.merke-tekst span { font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--demp); margin-top: 3px; }
.meny { display: flex; align-items: center; gap: 4px; }
.meny a { text-decoration: none; color: var(--blekk); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 9px; }
.meny a:hover { background: var(--papir2); }
.meny a.na { color: var(--jord-m); }
.meny-gi { background: var(--vipps); color: #fff !important; margin-left: 8px; box-shadow: 0 6px 18px -8px rgba(255, 91, 36, .8); }
.meny-gi:hover { background: #e64d1a !important; }
.meny-knapp { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.meny-knapp span:not(.sr) { display: block; width: 24px; height: 2.5px; background: var(--blekk); margin: 5px 0; border-radius: 2px; }

/* Hero */
.hero { padding: 64px 0 30px; overflow: hidden; }
.hero-indre { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-lede { font-size: 1.16rem; color: var(--demp); margin: 18px 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.knapp { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 1rem; padding: 14px 26px; border-radius: 12px; transition: transform .15s ease; }
.knapp:hover { transform: translateY(-2px); }
.knapp-vipps { background: var(--vipps); color: #fff; box-shadow: 0 10px 26px -10px rgba(255, 91, 36, .75); }
.knapp-lys { background: var(--blekk); color: var(--papir); }
.knapp-tom { border: 2px solid var(--linje); color: var(--blekk); background: var(--kort); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { font-size: .82rem; font-weight: 700; padding: 7px 14px; border-radius: 99px; background: var(--kort); border: 1px solid var(--linje); color: var(--demp); }
.chip strong { color: var(--jord-m); }

/* Hero-collage */
.collage { position: relative; height: 560px; }
.collage figure { position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: var(--skygge); border: 6px solid var(--kort); background: var(--kort); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { width: 62%; height: 78%; right: 4%; top: 0; transform: rotate(1.6deg); }
.collage .c2 { width: 46%; height: 52%; left: 0; bottom: 4%; transform: rotate(-2.4deg); z-index: 2; }
.collage .c3 { width: 34%; height: 38%; right: 0; bottom: 0; transform: rotate(2.8deg); z-index: 3; }
.stempel {
  position: absolute; z-index: 4; left: 40%; top: -6px;
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--sol); color: var(--blekk);
  display: grid; place-items: center; text-align: center;
  font-family: 'Fraunces', serif; font-weight: 640; font-size: .82rem; line-height: 1.25;
  transform: rotate(-8deg); box-shadow: var(--skygge);
  padding: 12px;
}

/* Tallstripe */
.tall { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); background: var(--papir2); margin-top: 46px; }
.tall-indre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 24px; }
.tall-en { text-align: center; }
.tall-en strong { display: block; font-family: 'Fraunces', serif; font-weight: 640; font-size: 2rem; color: var(--jord-m); }
.tall-en span { font-size: .86rem; color: var(--demp); font-weight: 600; }

/* Seksjoner */
section { padding: 74px 0; }
.seksjon-topp { max-width: 700px; margin-bottom: 44px; }
.seksjon-topp p { color: var(--demp); margin-top: 14px; }
.midt { text-align: center; margin-left: auto; margin-right: auto; }
.midt .flagg-strek, .midt.overlinje { margin-left: auto; margin-right: auto; }
.midt .overlinje::before { display: none; }

/* Kortrader */
.kort-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.verdi-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 30px 26px; }
.verdi-kort .ikon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; }
.verdi-kort .ikon svg { width: 25px; height: 25px; }
.verdi-kort:nth-child(1) .ikon { background: var(--roed); }
.verdi-kort:nth-child(2) .ikon { background: var(--vann); }
.verdi-kort:nth-child(3) .ikon { background: var(--groen); }
.verdi-kort p { font-size: .96rem; color: var(--demp); margin-top: 8px; }

/* Vann-feature */
.vann-feature { background: var(--natt); color: var(--papir); }
.vann-feature .overlinje { color: var(--sol); }
.vann-indre { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.vann-indre h2 { color: #fff; }
.vann-indre > div > p { color: #b9c6cc; margin-top: 14px; }
.vann-foto { border-radius: var(--radius); overflow: hidden; box-shadow: var(--skygge); position: relative; }
.vann-foto img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.vann-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; font-size: .85rem; color: #e8eef0; background: linear-gradient(transparent, rgba(10, 22, 27, .85)); }

/* Rør-progresjon */
.ror-progresjon { margin: 26px 0 8px; }
.ror-progresjon .merker { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 700; color: #b9c6cc; margin-bottom: 8px; }
.ror-bane { height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; position: relative; }
.ror-fyll { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--vann), #3aa2d8); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.ror-bane::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(10, 22, 27, .35) 34px 36px); border-radius: 99px; }

/* Meter-kalkulator */
.meter-boks { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); padding: 24px; margin-top: 26px; }
.meter-boks label { font-weight: 700; font-size: .92rem; display: block; margin-bottom: 14px; color: #e8eef0; }
.meter-boks input[type="range"] { width: 100%; accent-color: var(--sol); cursor: pointer; }
.meter-ut { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.meter-ut .sum { font-family: 'Fraunces', serif; font-weight: 640; font-size: 1.7rem; color: var(--sol); }
.meter-ut .sum small { font-family: 'Public Sans', sans-serif; font-size: .85rem; font-weight: 600; color: #b9c6cc; margin-left: 6px; }
.meter-vipps { font-size: .9rem; color: #b9c6cc; }
.meter-vipps strong { color: #fff; }

/* Prosjektkort */
.prosjekt-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prosjekt-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--blekk); transition: transform .18s ease, box-shadow .18s ease; }
.prosjekt-kort:hover { transform: translateY(-4px); box-shadow: var(--skygge); }
.prosjekt-kort figure { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.prosjekt-kort img { width: 100%; height: 100%; object-fit: cover; }
.status { position: absolute; top: 12px; left: 12px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; color: #fff; }
.status.paagaar { background: var(--vann); }
.status.innspurt { background: var(--jord); }
.status.plan { background: var(--demp); }
.status.ferdig { background: var(--groen); }
.prosjekt-kort .pk-tekst { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prosjekt-kort p { font-size: .93rem; color: var(--demp); }
.pk-mer { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: .9rem; color: var(--jord-m); }

/* Bildetekst-seksjoner (drikkevann-milepæler m.m.) */
.stripe { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.stripe:last-child { margin-bottom: 0; }
.stripe figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--skygge); }
.stripe img { width: 100%; height: 100%; object-fit: cover; max-height: 460px; }
.stripe.snudd figure { order: 2; }
.stripe h3 { font-size: 1.5rem; margin-bottom: 10px; }
.stripe .nr { font-family: 'Fraunces', serif; font-style: italic; font-weight: 420; color: var(--jord); font-size: 1rem; display: block; margin-bottom: 6px; }
.stripe p { color: var(--demp); font-size: .98rem; margin-bottom: 10px; }
.stripe ul { margin: 10px 0 0 18px; color: var(--demp); font-size: .96rem; display: grid; gap: 6px; }

/* Galleri */
.galleri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.galleri figure { border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.galleri img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.galleri figure:hover img { transform: scale(1.05); }

/* Klær */
.klaer-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.plagg { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
.plagg figure { aspect-ratio: 1; overflow: hidden; }
.plagg img { width: 100%; height: 100%; object-fit: cover; }
.plagg-tekst { padding: 16px 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plagg-tekst h3 { font-size: 1.05rem; }
.pris { font-family: 'Fraunces', serif; font-weight: 640; color: var(--jord-m); font-size: 1.2rem; white-space: nowrap; }
.bestill-boks { background: var(--papir2); border: 1px solid var(--linje); border-radius: var(--radius); padding: 30px; margin-top: 36px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.bestill-boks ol { margin-left: 20px; color: var(--demp); display: grid; gap: 4px; font-size: .97rem; }

/* Team */
.team-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-kort { text-align: center; }
.team-kort figure { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; border: 5px solid var(--kort); box-shadow: var(--skygge); }
.team-kort img { width: 100%; height: 100%; object-fit: cover; }
.team-kort h3 { font-size: 1.05rem; }
.team-kort p { font-size: .86rem; color: var(--demp); margin: 6px auto 0; max-width: 24ch; }

/* Sitat */
.sitat { background: var(--papir2); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.sitat blockquote { font-family: 'Fraunces', serif; font-style: italic; font-weight: 420; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.35; max-width: 820px; margin: 0 auto; text-align: center; }
.sitat figcaption { text-align: center; margin-top: 18px; font-weight: 700; font-size: .9rem; color: var(--demp); }

/* Gi-seksjon */
.gi { background: linear-gradient(180deg, var(--natt), var(--natt2)); color: var(--papir); }
.gi-indre { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.gi h2 { color: #fff; }
.gi-tekst > p { color: #b9c6cc; margin-top: 14px; }
.gi-fakta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.gi-fakta span { font-size: .82rem; font-weight: 700; padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); color: #d5dee2; }
.gi-fakta a { color: #d5dee2; text-decoration: none; }
.gi-vipps { background: var(--vipps); border-radius: 20px; padding: 40px 34px; text-align: center; color: #fff; box-shadow: 0 24px 60px -20px rgba(255, 91, 36, .55); transform: rotate(-1.2deg); }
.gi-vipps-topp { font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.gi-vipps strong { display: block; font-family: 'Fraunces', serif; font-weight: 640; font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1.1; margin: 8px 0 2px; }
.gi-vipps-navn { display: block; font-weight: 700; font-size: 1.05rem; }
.gi-vipps p { font-size: .9rem; opacity: .92; margin: 14px auto 0; max-width: 30ch; }

/* Bunn */
.bunn { background: var(--natt2); color: #aebbc1; padding: 60px 0 0; }
.bunn-indre { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.bunn-merke { font-family: 'Fraunces', serif; font-weight: 640; font-size: 1.5rem; color: #fff; }
.bunn-om p { font-size: .92rem; }
.bunn-kol { display: flex; flex-direction: column; gap: 9px; }
.bunn-kol h3 { color: #fff; font-size: .95rem; margin-bottom: 6px; }
.bunn-kol a { color: #aebbc1; text-decoration: none; font-size: .95rem; }
.bunn-kol a:hover { color: #fff; }
.bunn-kol span { font-size: .95rem; }
.bunn-strek { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 20px; padding-bottom: 24px; font-size: .84rem; }

/* Mobil gi-bar */
.gi-bar { display: none; }

/* Innholdssider: smal hero */
.side-hode { padding: 60px 0 10px; }
.side-hode .lede { font-size: 1.12rem; color: var(--demp); max-width: 680px; margin-top: 16px; }

.avstand-0 { padding-top: 20px; }

@media (max-width: 960px) {
  .hero-indre, .vann-indre, .gi-indre { grid-template-columns: 1fr; gap: 36px; }
  .collage { height: 440px; max-width: 560px; }
  .kort-rad, .prosjekt-rad { grid-template-columns: 1fr 1fr; }
  .tall-indre { grid-template-columns: 1fr 1fr; }
  .klaer-rad { grid-template-columns: 1fr 1fr; }
  .team-rad { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .galleri { grid-template-columns: repeat(3, 1fr); }
  .stripe { grid-template-columns: 1fr; gap: 22px; }
  .stripe.snudd figure { order: 0; }
  .bunn-indre { grid-template-columns: 1fr; gap: 28px; }
  .bestill-boks { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .meny { position: fixed; inset: 61px 0 auto 0; background: var(--papir); border-bottom: 1px solid var(--linje); flex-direction: column; align-items: stretch; padding: 14px 20px 20px; gap: 4px; display: none; box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .3); }
  .meny.open { display: flex; }
  .meny a { padding: 12px 12px; }
  .meny-gi { margin-left: 0; text-align: center; }
  .meny-knapp { display: block; }
  section { padding: 54px 0; }
  .hero { padding-top: 40px; }
  .kort-rad, .prosjekt-rad { grid-template-columns: 1fr; }
  .galleri { grid-template-columns: 1fr 1fr; }
  .gi-bar {
    display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    background: var(--vipps); color: #fff; text-align: center; text-decoration: none;
    font-weight: 800; padding: 15px; border-radius: 14px;
    box-shadow: 0 14px 34px -10px rgba(255, 91, 36, .8);
  }
  body { padding-bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ==== Regnskap ==== */
.regn-tall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.regn-tall-en { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 28px 26px; text-align: center; border-top: 4px solid var(--groen); }
.regn-tall-en:nth-child(1) { border-top-color: var(--vann); }
.regn-tall-en:nth-child(2) { border-top-color: var(--jord); }
.regn-tall-en strong { display: block; font-family: 'Fraunces', serif; font-weight: 640; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--blekk); }
.regn-tall-en span { font-size: .89rem; color: var(--demp); font-weight: 600; }

.regn-mellom { margin: 44px 0 16px; font-size: 1.3rem; }
.regn-tabell { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); overflow-x: auto; box-shadow: 0 10px 30px -20px rgba(36, 31, 24, .2); }
.regn-tabell table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.regn-tabell th, .regn-tabell td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--linje); }
.regn-tabell th { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--demp); background: var(--papir2); }
.regn-tabell .tall { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.regn-tabell tbody td { color: var(--demp); }
.regn-tabell tbody td.tall { color: var(--blekk); font-weight: 600; }
.regn-tabell tfoot td { border-bottom: 0; background: var(--papir2); font-weight: 800; color: var(--jord-m); }
.regn-note { font-size: .88rem; color: var(--demp); margin-top: 14px; max-width: 70ch; }

.takk-boks { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); margin-top: 36px; padding: 0 26px; }
.takk-boks summary { cursor: pointer; font-weight: 700; padding: 18px 0; color: var(--vann-m); list-style-position: inside; }
.takk-boks summary:hover { color: var(--jord-m); }
.takk-boks > p { color: var(--demp); font-size: .95rem; margin-bottom: 18px; }
.takk-boks .regn-note { padding-bottom: 20px; }
.takk-liste { list-style: none; columns: 3; column-gap: 36px; margin: 6px 0 10px; }
.takk-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; padding: 5px 0; border-bottom: 1px dashed var(--linje); break-inside: avoid; }
.takk-liste span { color: var(--demp); }
.takk-liste b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.regn-last { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--papir2); border: 1px solid var(--linje); border-radius: var(--radius); padding: 30px; margin-top: 44px; }
.regn-last p { color: var(--demp); font-size: .96rem; margin-top: 6px; }
.regn-last-knapper { display: flex; flex-direction: column; gap: 10px; }
.regn-last-knapper .knapp { font-size: .92rem; padding: 12px 20px; justify-content: center; }

/* ==== Odin-lasten og video ==== */
.last-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.last-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 24px 22px; border-top: 4px solid var(--roed); }
.last-rad .last-kort:nth-child(2) { border-top-color: var(--vann); }
.last-rad .last-kort:nth-child(3) { border-top-color: var(--groen); }
.last-rad .last-kort:nth-child(4) { border-top-color: var(--sol); }
.last-kort h3 { font-size: 1.08rem; margin-bottom: 8px; }
.last-kort p { font-size: .92rem; color: var(--demp); }
.last-kort ul { list-style: none; margin-top: 4px; display: grid; gap: 5px; }
.last-kort li { font-size: .92rem; color: var(--demp); padding-left: 18px; position: relative; }
.last-kort li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); }
.last-takk { margin-top: 26px; font-size: .95rem; color: var(--demp); max-width: 76ch; }

.video-rad { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.video-ramme { border-radius: var(--radius); overflow: hidden; box-shadow: var(--skygge); background: var(--natt2); border: 6px solid var(--kort); }
.video-ramme video { width: 100%; display: block; max-height: 480px; background: var(--natt2); }
.video-ramme figcaption { padding: 12px 16px; font-size: .85rem; color: var(--demp); background: var(--kort); }

@media (max-width: 960px) {
  .regn-tall { grid-template-columns: 1fr; gap: 14px; }
  .takk-liste { columns: 2; }
  .last-rad { grid-template-columns: 1fr 1fr; }
  .video-rad { grid-template-columns: 1fr; gap: 26px; }
  .regn-last { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .takk-liste { columns: 1; }
  .last-rad { grid-template-columns: 1fr; }
}

/* ── «Siste innspill» 07.07.2026: femte teamkort, IT-kort og språkvelger ── */
.team-rad.fem { grid-template-columns: repeat(5, 1fr); }
.team-init { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 16px; border: 5px solid var(--kort); box-shadow: var(--skygge); background: linear-gradient(145deg, var(--jord), var(--jord-m)); display: grid; place-items: center; }
.team-init span { font-family: 'Fraunces', serif; font-weight: 560; font-size: 2.1rem; color: var(--papir); letter-spacing: .04em; }
.meny .sprak { border: 1.5px solid var(--linje); border-radius: 999px; padding: 6px 14px; font-size: .85rem; margin-left: 4px; color: var(--demp); }
.meny .sprak:hover { background: var(--papir2); color: var(--blekk); }
@media (max-width: 1080px) {
  .team-rad.fem { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
}
@media (max-width: 640px) {
  .team-rad.fem { grid-template-columns: 1fr 1fr; }
}

/* ── Meny-fiks 07.07.2026: aldri tekstbryting i topplenkene ── */
.meny a { white-space: nowrap; }
@media (max-width: 1330px) {
  .meny { gap: 2px; }
  .meny a { padding: 8px 9px; font-size: .92rem; }
  .meny .sprak { padding: 6px 12px; }
}
@media (max-width: 1200px) {
  .meny { position: absolute; top: 100%; left: 0; right: 0; background: var(--papir); border-bottom: 1px solid var(--linje); flex-direction: column; align-items: stretch; padding: 14px 20px 20px; gap: 4px; display: none; box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .3); }
  .meny.open { display: flex; }
  .meny a { padding: 12px; font-size: .95rem; }
  .meny-gi { margin-left: 0; text-align: center; }
  .meny .sprak { margin-left: 0; text-align: center; }
  .meny-knapp { display: block; }
}

/* Kreditt-lenke i bunnstreken */
.bunn-strek a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bunn-strek a:hover { color: #fff; }

/* ── Ekte logo innarbeidet 08.07.2026: rundt emblem i header + footer ── */
.merke-logo {
  width: 46px; height: 46px; border-radius: 50%; display: block;
  background: #fff; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(21, 105, 156, .10), 0 2px 7px rgba(0, 0, 0, .12);
}
.merke:hover .merke-logo { box-shadow: 0 0 0 1px rgba(181, 80, 31, .28), 0 3px 10px rgba(0, 0, 0, .16); }
.bunn-om { display: flex; flex-direction: column; align-items: flex-start; }
.bunn-merke-logo {
  width: 64px; height: 64px; border-radius: 50%; display: block;
  background: #fff; margin-bottom: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px rgba(0, 0, 0, .28);
}

/* Vipps-oppsigelse: steg-kort + info-panel */
.v-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 16px; padding: 24px 22px; position: relative; }
.v-kort .v-nr { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vipps); color: #fff; font-weight: 700; font-size: 1.02rem; margin-bottom: 14px; }
.v-kort h3 { font-size: 1.1rem; margin: 0 0 6px; }
.v-kort p { color: var(--demp); margin: 0; }
.v-info { display: flex; gap: 16px; align-items: flex-start; background: var(--papir2); border: 1px solid var(--linje); border-radius: 16px; padding: 22px 24px; margin-top: 6px; }
.v-info svg { width: 30px; height: 30px; color: var(--groen); flex: none; margin-top: 2px; }
.v-info p { margin: 0 0 8px; color: var(--blekk); }
.v-info p:last-child { margin-bottom: 0; }
.v-info strong { color: var(--blekk); }

/* ==== Vipps-knapp rett i appen, portet til produksjon 17.07.2026 ====
   qr.vipps.no/donations/59419 (Vipps Donasjoner) er donasjonslenka. Vipps-appen overtar på telefon,
   med Right Hand som mottaker. På PC finnes ingen app å åpne, så der viser vi QR-kode i stedet. */
.kun-pc { display: none; }

.vipps-ikon { width: 21px; height: 21px; flex: none; }

/* Gi-boksen: hvit knapp på Vipps-oransje */
.gi-vipps-knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 22px; padding: 15px 26px; border-radius: 12px;
  background: #fff; color: var(--vipps); text-decoration: none;
  font-weight: 800; font-size: 1.02rem;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.gi-vipps-knapp:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .6); }
.gi-vipps-knapp:active { transform: translateY(0); }

.gi-vipps-qr { margin-top: 22px; }
.gi-vipps-qr img { display: block; margin: 0 auto; width: 152px; height: 152px; padding: 9px; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); }
.gi-vipps-qr figcaption { margin-top: 11px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .92; }

/* Kalkulatoren: oransje knapp på mørk bunn, teksten som før på PC */
.vipps-knapp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 11px;
  background: var(--vipps); color: #fff; text-decoration: none;
  font-weight: 800; font-size: .95rem; line-height: 1;
  box-shadow: 0 10px 26px -10px rgba(255, 91, 36, .75);
  transition: transform .16s ease;
}
.vipps-knapp:hover { transform: translateY(-2px); }
.vipps-knapp:active { transform: translateY(0); }
.vipps-pc-tekst { font-size: .9rem; color: #b9c6cc; }
.vipps-pc-tekst strong { color: #fff; }

.vipps-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.vipps-hint { font-size: .82rem; color: #b9c6cc; line-height: 1.45; max-width: 34ch; }
.vipps-hint .js-meter-kr { color: var(--sol); font-weight: 700; }

/* PC: knappen åpner Vipps' egen QR-side, og vi viser i tillegg QR-koden rett på siden.
   Den faste mobil-baren skjules på PC. */
@media (hover: hover) and (pointer: fine) {
  .gi-vipps-qr.kun-pc { display: block; }
  .gi-bar { display: none; }
}

@media (max-width: 720px) {
  .gi-bar { display: flex; align-items: center; justify-content: center; gap: 8px; }
}