/* MK Maskintjenester – stilark. Samme uttrykk som Horizons-utgaven (mørk bunn, oransje aksent, Plus Jakarta Sans), bygd på nytt 6.11.2026. */
@import url("/fonter/plus-jakarta-sans.css");

:root {
  --bunn: #141414;
  --bunn-2: #1a1a1a;
  --kort: #1f1f1f;
  --kort-2: #262626;
  --tekst: #f2f2f2;
  --demp: #a6a6a6;
  --linje: #333333;
  --oransje: #ff6600;
  --oransje-mork: #e05a00;
  --oransje-svak: rgba(255, 102, 0, .12);
  --stjerne: #ffb400;
  --radius: 1rem;
  --radius-stor: 1.5rem;
  --bredde: 1200px;
  --skygge: 0 20px 50px -20px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bunn); color: var(--tekst);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--oransje); outline-offset: 3px; border-radius: 6px; }
.skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boks { width: 100%; max-width: var(--bredde); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .boks { padding: 0 2rem; } }
.seksjon { padding: 5rem 0; }
@media (min-width: 1024px) { .seksjon { padding: 7rem 0; } }
.seksjon.mork { background: var(--bunn-2); border-top: 1px solid #222; border-bottom: 1px solid #222; }
.oransje { color: var(--oransje); }
.demp { color: var(--demp); }

/* Overskrifter for seksjoner */
.etikett {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oransje); margin-bottom: 1rem;
}
.etikett::before { content: ""; width: 1.75rem; height: 2px; background: var(--oransje); border-radius: 2px; }
.tittel { font-size: clamp(2rem, 4.2vw, 3rem); }
.ingress { color: var(--demp); font-size: 1.125rem; max-width: 40rem; margin-top: 1.1rem; }
.hode-midt { text-align: center; margin: 0 auto 3.5rem; }
.hode-midt .ingress { margin-left: auto; margin-right: auto; }
.hode-midt .etikett::after { content: ""; width: 1.75rem; height: 2px; background: var(--oransje); border-radius: 2px; }

/* Knapper */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1; border: 2px solid transparent; cursor: pointer; font-family: inherit;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.knapp:hover { transform: translateY(-1px); }
.knapp-hoved { background: var(--oransje); color: #111; }
.knapp-hoved:hover { background: #ff7a1f; }
.knapp-kant { border-color: rgba(255, 255, 255, .28); color: var(--tekst); }
.knapp-kant:hover { border-color: var(--tekst); background: rgba(255, 255, 255, .06); }
.knapp svg { width: 1.15em; height: 1.15em; }
.knapper { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Toppmeny */
.topp { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s, padding .3s; padding: 1rem 0; }
.topp.fast { background: rgba(20, 20, 20, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 #262626; padding: .5rem 0; }
.topp .boks { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo img { height: 64px; width: auto; transition: height .3s; }
.topp.fast .logo img { height: 52px; }
@media (min-width: 1024px) { .logo img { height: 92px; } .topp.fast .logo img { height: 64px; } }
.meny { display: none; align-items: center; gap: 2rem; }
.meny a { font-weight: 600; font-size: .95rem; color: #d9d9d9; transition: color .2s; }
.meny a:hover, .meny a[aria-current="page"] { color: var(--oransje); }
.meny .knapp { padding: .7rem 1.25rem; font-size: .92rem; color: #111; }
@media (min-width: 900px) { .meny { display: flex; } .menyknapp { display: none; } }
.menyknapp { background: none; border: 0; color: var(--tekst); padding: .5rem; cursor: pointer; }
.menyknapp svg { width: 28px; height: 28px; }
.mobilmeny {
  position: fixed; inset: 0; z-index: 60; background: rgba(14, 14, 14, .98); display: flex; flex-direction: column; padding: 1.25rem;
  transform: translateX(100%); transition: transform .3s; visibility: hidden;
}
.mobilmeny.apen { transform: none; visibility: visible; }
.mobilmeny .lukk { align-self: flex-end; background: none; border: 0; color: var(--tekst); padding: .5rem; cursor: pointer; }
.mobilmeny .lukk svg { width: 30px; height: 30px; }
.mobilmeny nav { display: flex; flex-direction: column; gap: .4rem; margin-top: 2rem; }
.mobilmeny nav a { font-size: 1.75rem; font-weight: 800; padding: .6rem 0; border-bottom: 1px solid #262626; }
.mobilmeny nav a[aria-current="page"] { color: var(--oransje); }
.mobilmeny .knapp { margin-top: 2rem; }

/* Toppbilde (forsiden) */
.helt { position: relative; padding: 9rem 0 4.5rem; overflow: hidden; }
@media (min-width: 1024px) { .helt { padding: 11rem 0 6rem; min-height: 92vh; display: flex; align-items: center; } }
.helt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60rem 40rem at 85% 20%, rgba(255, 102, 0, .16), transparent 60%), radial-gradient(40rem 30rem at 0% 100%, rgba(255, 102, 0, .07), transparent 60%);
}
.helt-rutenett { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .helt-rutenett { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.helt h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
.helt h1 .linje2 { display: block; color: var(--oransje); }
.helt .ingress { font-size: 1.2rem; margin: 1.5rem 0 2.25rem; }
.vurdering {
  display: inline-flex; align-items: center; gap: .75rem; padding: .5rem 1rem .5rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid #2e2e2e; font-size: .9rem; font-weight: 600; margin-bottom: 1.75rem;
}
.vurdering b { color: var(--tekst); }
.stjerner { display: inline-flex; gap: 2px; color: var(--stjerne); }
.stjerner svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.helt-bilde { position: relative; max-width: 30rem; margin: 0 auto; width: 100%; }
.helt-bilde img { border-radius: var(--radius-stor); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; box-shadow: var(--skygge); }
.helt-bilde::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-stor); border: 2px solid var(--oransje); transform: translate(1.1rem, 1.1rem); z-index: -1; opacity: .7; }
.helt-merke {
  position: absolute; left: -1rem; bottom: 1.75rem; background: var(--kort); border: 1px solid #333; border-radius: var(--radius);
  padding: .9rem 1.1rem; display: flex; align-items: center; gap: .8rem; box-shadow: var(--skygge);
}
@media (min-width: 640px) { .helt-merke { left: -2rem; } }
.helt-merke .ikon { background: var(--oransje); color: #111; width: 2.6rem; height: 2.6rem; }
.helt-merke b { display: block; font-size: 1rem; line-height: 1.2; }
.helt-merke span { font-size: .82rem; color: var(--demp); }

/* Sidehode for undersider */
.sidehode { position: relative; padding: 10rem 0 4.5rem; overflow: hidden; border-bottom: 1px solid #222; }
@media (min-width: 1024px) { .sidehode { padding: 12rem 0 5.5rem; } }
.sidehode::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50rem 30rem at 80% 0%, rgba(255, 102, 0, .15), transparent 60%); }
.sidehode h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); max-width: 50rem; }
.sidehode .ingress { font-size: 1.2rem; }

/* Tillitsrad */
.tillit { border-top: 1px solid #242424; border-bottom: 1px solid #242424; background: var(--bunn-2); }
.tillit ul { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tillit ul { grid-template-columns: repeat(4, 1fr); } }
.tillit li { display: flex; align-items: center; gap: .85rem; padding: 1.4rem .5rem; font-weight: 700; font-size: .98rem; }
.tillit li > div > span { display: block; font-weight: 500; font-size: .85rem; color: var(--demp); }
.tillit .ikon { width: 2.5rem; height: 2.5rem; }

.ikon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: .9rem; background: var(--oransje-svak); color: var(--oransje); }
.ikon svg { width: 52%; height: 52%; }

/* To kolonner med bilde */
.delt { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .delt { grid-template-columns: 1fr 1fr; gap: 5rem; } .delt.snudd > :first-child { order: 2; } }
.bilderamme { position: relative; }
.bilderamme img { border-radius: var(--radius-stor); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--skygge); }
.bilderamme::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-stor); background: var(--oransje); opacity: .18; transform: translate(1rem, 1rem); z-index: -1; }
.punkter { display: grid; gap: .9rem; margin-top: 2rem; }
.punkter li { display: flex; gap: .8rem; align-items: flex-start; font-weight: 600; }
.punkter svg { width: 22px; height: 22px; color: var(--oransje); margin-top: .15rem; }
.tekst p + p { margin-top: 1.1rem; }
.tekst p { color: #cfcfcf; }

/* Tjenestekort */
.kortrutenett { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .kortrutenett { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kortrutenett { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.kort {
  background: var(--kort); border: 1px solid #2b2b2b; border-radius: var(--radius-stor); padding: 2rem; position: relative;
  transition: border-color .25s, transform .25s, background .25s; display: flex; flex-direction: column;
}
.kort:hover { border-color: rgba(255, 102, 0, .55); transform: translateY(-3px); background: var(--kort-2); }
.kort h3 { font-size: 1.3rem; margin: 1.4rem 0 .7rem; }
.kort p { color: var(--demp); font-size: 1rem; }
.kort .merke { position: absolute; top: 1.4rem; right: 1.4rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--oransje); color: #111; padding: .3rem .65rem; border-radius: 999px; }
.kort .lenke { margin-top: auto; padding-top: 1.4rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--oransje); font-weight: 700; font-size: .95rem; }
.kort .lenke svg { width: 18px; height: 18px; transition: transform .2s; }
.kort:hover .lenke svg { transform: translateX(3px); }
.midt-knapp { text-align: center; margin-top: 3rem; }

/* Tjenester i detalj */
.tjeneste { display: grid; gap: 1.5rem; padding: 2.5rem 0; border-top: 1px solid #262626; }
.tjeneste:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .tjeneste { grid-template-columns: 4rem 1fr 1fr; gap: 2.5rem; align-items: start; } }
.tjeneste h2 { font-size: 1.75rem; }
.tjeneste p { color: #cfcfcf; }
.tjeneste ul { display: grid; gap: .5rem; }
.tjeneste li { display: flex; gap: .6rem; color: #d9d9d9; }
.tjeneste li svg { width: 20px; height: 20px; color: var(--oransje); margin-top: .2rem; }

/* Omtaler */
.omtaler-hode { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.snitt { display: flex; align-items: center; gap: 1.25rem; background: var(--kort); border: 1px solid #2b2b2b; border-radius: var(--radius-stor); padding: 1.25rem 1.6rem; }
.snitt .tall { font-size: 3rem; font-weight: 800; line-height: 1; }
.snitt .stjerner svg { width: 22px; height: 22px; }
.snitt small { display: block; color: var(--demp); font-size: .88rem; margin-top: .3rem; }
.omtaler { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .omtaler { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.omtale {
  background: var(--kort); border: 1px solid #2b2b2b; border-left: 4px solid var(--oransje); border-radius: var(--radius-stor);
  padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; margin: 0;
}
.omtale blockquote { margin: 0; font-size: 1.12rem; line-height: 1.6; color: #ececec; }
.omtale figcaption { margin-top: auto; display: flex; align-items: center; gap: .85rem; }
.omtale .bokstav { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--oransje-svak); color: var(--oransje); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.omtale figcaption b { display: block; }
.omtale figcaption span { color: var(--demp); font-size: .9rem; }
.kilde { margin-top: 1.75rem; color: var(--demp); font-size: .9rem; text-align: center; }

/* Utleie */
.utleie {
  position: relative; overflow: hidden; border-radius: 2rem; background: linear-gradient(120deg, #1f1f1f, #191919);
  border: 1px solid #2e2e2e; display: grid; align-items: stretch;
}
@media (min-width: 900px) { .utleie { grid-template-columns: 1.15fr .85fr; } }
.utleie .innhold { padding: 2.5rem 1.75rem; }
@media (min-width: 768px) { .utleie .innhold { padding: 3.5rem; } }
.utleie h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.utleie p { color: #cfcfcf; margin-top: 1.1rem; font-size: 1.1rem; }
.utleie .knapper { margin-top: 2rem; }
.utleie .bilde { min-height: 18rem; position: relative; }
.utleie .bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.utleie .bilde::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #1d1d1d 0%, transparent 35%); }
@media (max-width: 899px) { .utleie .bilde::before { background: linear-gradient(0deg, transparent 60%, #1d1d1d 100%); } }

/* Galleri */
.galleri { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .galleri { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.galleri button { padding: 0; border: 0; background: #222; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; position: relative; aspect-ratio: 1; }
.galleri img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.galleri button:hover img { transform: scale(1.05); }
.galleri button span {
  position: absolute; inset: auto 0 0 0; padding: 2rem .9rem .8rem; font-size: .85rem; font-weight: 600; text-align: left; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8)); opacity: 0; transition: opacity .3s;
}
.galleri button:hover span, .galleri button:focus-visible span { opacity: 1; }
@media (hover: none) { .galleri button span { opacity: 1; } }
.lysboks { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.lysboks::backdrop { background: rgba(0, 0, 0, .92); }
.lysboks .flate { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem; }
.lysboks img { max-width: min(100%, 1100px); max-height: 100%; object-fit: contain; border-radius: .75rem; }
.lysboks p { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font-weight: 600; color: #ddd; }
.lysboks button { position: absolute; background: rgba(255, 255, 255, .1); border: 0; color: #fff; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lysboks button:hover { background: var(--oransje); color: #111; }
.lysboks button svg { width: 24px; height: 24px; }
.lysboks .lukk { top: 1rem; right: 1rem; }
.lysboks .forrige { left: 1rem; top: 50%; transform: translateY(-50%); }
.lysboks .neste { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Historie */
.tidslinje { position: relative; display: grid; gap: 2.5rem; margin-top: 1rem; }
.tidslinje::before { content: ""; position: absolute; left: 1.6rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(var(--oransje), #333); }
.steg { position: relative; padding-left: 5rem; }
.steg .ikon { position: absolute; left: 0; top: 0; background: var(--bunn); border: 2px solid var(--oransje); width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.seksjon.mork .steg .ikon { background: var(--bunn-2); }
.steg small { display: block; color: var(--oransje); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; margin-bottom: .35rem; }
.steg h3 { font-size: 1.4rem; margin-bottom: .55rem; }
.steg p { color: #cfcfcf; }
.sitat { margin: 0; padding: 2rem; border-radius: var(--radius-stor); background: var(--oransje); color: #111; font-size: 1.3rem; font-weight: 700; line-height: 1.45; }
.sitat cite { display: block; margin-top: 1rem; font-size: .95rem; font-style: normal; font-weight: 600; opacity: .8; }

/* Verdier */
.verdier { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .verdier { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .verdier.fire { grid-template-columns: repeat(4, 1fr); } }

/* Person */
.person { display: grid; gap: 2rem; align-items: center; background: var(--kort); border: 1px solid #2b2b2b; border-radius: 2rem; padding: 2rem; }
@media (min-width: 768px) { .person { grid-template-columns: 16rem 1fr; padding: 2.5rem; gap: 3rem; } }
.person img { border-radius: var(--radius-stor); aspect-ratio: 1; object-fit: cover; width: 100%; }
.person h3 { font-size: 1.75rem; }
.person .rolle { color: var(--oransje); font-weight: 700; margin: .35rem 0 1rem; }
.person p { color: #cfcfcf; }

/* Handling (CTA) */
.handling { border-radius: 2rem; padding: 3rem 1.75rem; text-align: center; background: linear-gradient(135deg, #ff6600, #ff8a33); color: #111; position: relative; overflow: hidden; }
@media (min-width: 768px) { .handling { padding: 4.5rem 3rem; } }
.handling h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
.handling p { margin: 1rem auto 2rem; max-width: 36rem; font-size: 1.15rem; font-weight: 500; }
.handling .knapper { justify-content: center; }
.handling .knapp-hoved { background: #111; color: #fff; }
.handling .knapp-hoved:hover { background: #000; }
.handling .knapp-kant { border-color: rgba(0, 0, 0, .35); color: #111; }
.handling .knapp-kant:hover { background: rgba(0, 0, 0, .08); border-color: #111; }

/* Kontakt og skjema */
.kontakt { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .kontakt { grid-template-columns: .85fr 1.15fr; gap: 3rem; } }
.info { display: grid; gap: 1rem; align-content: start; }
.info a, .info div.rad { display: flex; align-items: center; gap: 1rem; background: var(--kort); border: 1px solid #2b2b2b; border-radius: var(--radius); padding: 1.1rem 1.25rem; transition: border-color .2s; }
.info a:hover { border-color: rgba(255, 102, 0, .55); }
.info small { display: block; color: var(--demp); font-size: .85rem; }
.info b { font-size: 1.08rem; word-break: break-word; }
.skjema { background: var(--kort); border: 1px solid #2b2b2b; border-radius: 2rem; padding: 2rem 1.5rem; }
@media (min-width: 768px) { .skjema { padding: 2.75rem; } }
.skjema h2 { font-size: 1.9rem; margin-bottom: .5rem; }
.skjema > p { color: var(--demp); margin-bottom: 2rem; }
.felt { margin-bottom: 1.25rem; }
.felt-par { display: grid; gap: 0 1.25rem; }
@media (min-width: 640px) { .felt-par { grid-template-columns: 1fr 1fr; } }
.felt label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.felt label span { color: var(--demp); font-weight: 500; }
.felt input, .felt textarea {
  width: 100%; background: #262626; border: 1px solid #383838; border-radius: .85rem; color: var(--tekst); font: inherit; font-size: 1rem;
  padding: .9rem 1rem; transition: border-color .2s, box-shadow .2s;
}
.felt textarea { min-height: 150px; resize: vertical; }
.felt input:focus, .felt textarea:focus { outline: 0; border-color: var(--oransje); box-shadow: 0 0 0 3px rgba(255, 102, 0, .2); }
.felt .feil { color: #ff6b6b; font-size: .88rem; margin-top: .4rem; display: none; }
.felt.ugyldig input, .felt.ugyldig textarea { border-color: #ff6b6b; }
.felt.ugyldig .feil { display: block; }
.honning { position: absolute; left: -9999px; }
.skjema .knapp { width: 100%; padding: 1.1rem; font-size: 1.05rem; }
.skjema .knapp[disabled] { opacity: .6; cursor: wait; }
.melding { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: .85rem; font-weight: 600; display: none; }
.melding.ok { display: block; background: rgba(46, 204, 113, .12); border: 1px solid rgba(46, 204, 113, .4); color: #7ee2a8; }
.melding.feil { display: block; background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .4); color: #ff9b9b; }
.facebook { margin-top: 1rem; background: var(--kort); border: 1px solid #2b2b2b; border-radius: var(--radius-stor); padding: 1.5rem; }
.facebook h3 { font-size: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.facebook p { color: var(--demp); font-size: .95rem; margin: .4rem 0 1rem; }
.facebook iframe { width: 100%; max-width: 500px; height: 520px; border: 0; border-radius: .75rem; background: #fff; display: block; }

/* Bunn */
.bunn { border-top: 1px solid #262626; background: #0f0f0f; padding: 4.5rem 0 7rem; }
@media (min-width: 900px) { .bunn { padding-bottom: 2.5rem; } }
.bunn-rutenett { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .bunn-rutenett { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.bunn .navn { font-size: 1.35rem; font-weight: 800; }
.bunn p, .bunn li { color: var(--demp); font-size: .95rem; }
.bunn h4 { font-size: 1rem; margin-bottom: 1rem; }
.bunn ul { display: grid; gap: .6rem; }
.bunn a:hover { color: var(--oransje); }
.bunn .kontaktliste li { display: flex; gap: .6rem; align-items: flex-start; }
.bunn .kontaktliste svg { width: 18px; height: 18px; color: var(--oransje); margin-top: .2rem; }
.bunn .so { display: inline-flex; margin-top: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #333; align-items: center; justify-content: center; }
.bunn .so:hover { border-color: var(--oransje); }
.bunn .so svg { width: 18px; height: 18px; }
.bunnlinje { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #222; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; color: #777; font-size: .85rem; }

/* Fast knapperad på mobil */
.mobilrad { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; background: #111; border-top: 1px solid #2a2a2a; padding-bottom: env(safe-area-inset-bottom); }
.mobilrad a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.05rem; font-weight: 700; }
.mobilrad a:last-child { background: var(--oransje); color: #111; }
.mobilrad svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .mobilrad { display: none; } }

/* Inntoning */
.vis { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s 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; } }
.bunn p.navn { color: var(--tekst); }
.facebook h3 svg { width: 22px; height: 22px; color: var(--oransje); }
.facebook iframe { max-width: 100%; }
.bunnlinje .laget { color: #aaa; text-decoration: underline; text-underline-offset: 3px; }
.bunnlinje .laget:hover { color: var(--oransje); }