/* Pienaro Eiendom: every page under the front page (tjenester/*.html, tjenester/, prosjekter.html, om-oss.html, personvern.html,
   404.html), written by production/kilde/undersider/lag.py. Same type, colours, menu, form and footer as the front page, no scroll
   animation (Sverre 18.10.2026: «du trenger ikke ha animasjoner etc på disse sidene, men bare bedre design, mer oversiktlig og
   navigasjonsvennlig»). This file is the only stylesheet besides tokens.css and main.css that holds up the first paint; the form's
   own (kortstokk.css) loads at the contact section. The block at the end is copied from seksjoner.css by lag.py: edit it there.
   Grounds down a service page: kalk, white, light brown (a review), kalk, white (photos), oak, white, kalk, deep navy, ink. */

/* the bar always has its ground here: there is no hero photo under it */
.underside .meny { background: var(--meny-matt); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--linje); }
.underside .sek { padding: clamp(3.25rem, 6.5vw, 5.5rem) 0; }
.us-h2 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.08; max-width: 20ch; text-wrap: balance; }
.us-h2 + p, .us-hode p { margin-top: 1rem; color: var(--tekst-dempet); max-width: 44ch; }
.us-hode { display: grid; align-content: start; gap: 0.9rem; }
.us-delt { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 900px) { .us-delt { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); } }
.us-lenke { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.us-lenke svg { width: 16px; height: 16px; }

/* ---------- the top: breadcrumbs, the job and the place in the title, both buttons, and the photo where there is one */
.us-topp { background: var(--kalk); padding: calc(var(--meny-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(2.75rem, 5.5vw, 4.5rem); }
.us-topp-ramme { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .us-topp-ramme { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.sti { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.95rem; color: var(--tekst-dempet); margin-bottom: 1.25rem; }
.sti a { text-decoration: none; border-bottom: 1px solid var(--linje-sterk); }
.sti a:hover { color: var(--tekst); }
.sti [aria-current] { color: var(--tekst); }
.us-tittel { font-size: var(--str-hero); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.02; max-width: 14ch; text-wrap: balance; }
.us-ingress { margin-top: 1.25rem; font-size: var(--str-ingress); line-height: 1.5; color: var(--tekst-dempet); max-width: 40ch; }
.us-topp .hero-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.us-topp-bilde { overflow: hidden; aspect-ratio: 4 / 5; max-height: 72svh; background: var(--eik); }
.us-topp-bilde img { width: 100%; height: 100%; object-fit: cover; }
/* a job without a photo of its own: the words take the whole width, and the jobs that belong with it stand beside them */
.us-topp.uten-bilde .us-tittel { max-width: 16ch; }
.us-topp.uten-bilde .us-ingress { max-width: 46ch; }
.us-topp-side { display: grid; gap: 0.2rem; align-self: end; padding: 1.25rem 1.4rem 1.4rem; background: var(--hvit); box-shadow: 0 0 0 1px var(--linje); }
.us-topp-side .merke { margin-bottom: 0.4rem; color: var(--marine); }
.us-topp-side a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--linje); text-decoration: none; font-weight: 500; }
.us-topp-side a:hover { color: var(--marine); }
.us-topp-side svg { width: 16px; height: 16px; color: var(--marine); flex: none; }

/* ---------- what we do: four short cards beside the heading */
.us-hva { background: var(--hvit); }
.us-kort { display: grid; gap: 1px; background: var(--linje); border: 1px solid var(--linje); }
@media (min-width: 600px) { .us-kort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.us-kort li { display: grid; align-content: start; gap: 0.55rem; padding: 1.4rem 1.35rem 1.55rem; background: var(--hvit); }
.us-kort h3, .us-vite h3 { font-size: var(--str-h3); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.us-kort p { color: var(--tekst-dempet); }

/* ---------- one customer's words about this kind of job, word for word from Mittanbud */
.us-sitat { background: var(--valnott); color: var(--tekst); }
.underside .us-sitat .merke, .underside .us-flere .merke { color: var(--tekst); }   /* navy on the light brown is under 4.5:1 */
.us-sitat-ramme { display: grid; gap: 1.4rem; max-width: 62rem; }
.us-sitat blockquote { margin: 0; }
.us-sitat blockquote p { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); font-weight: 300; line-height: 1.38; letter-spacing: -0.012em; }
.us-sitat-linje { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; max-width: 30ch; }
.us-sitat-hvem { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; font-size: 0.98rem; }
.us-sitat-hvem .ko-stjerner { color: var(--marine); }

/* ---------- good to know: what is generally true about the job */
.us-vite { background: var(--kalk); }
.us-vite-liste { display: grid; gap: 1.6rem; }
.us-vite-liste article { display: grid; gap: 0.55rem; padding-top: 1.3rem; border-top: 1px solid var(--linje-sterk); }
.us-vite-liste p { color: var(--tekst-dempet); max-width: 62ch; }

/* ---------- Pietro's own photos of floors he has laid */
.us-bilder { background: var(--hvit); }
.us-bilder-hode { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.us-galleri { display: grid; gap: clamp(0.75rem, 1.4vw, 1.25rem); margin-top: 2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .us-galleri-3 { grid-template-columns: repeat(3, 1fr); }
  .us-galleri-4 { grid-template-columns: repeat(4, 1fr); }
}
.us-galleri-1 { grid-template-columns: minmax(0, 32rem); }
.us-galleri-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.us-jobbkort { margin-top: 2rem; }
@media (min-width: 1100px) { .us-jobbkort { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.us-g { overflow: hidden; aspect-ratio: 3 / 4; background: var(--eik); }
.us-g img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the steps, and the places we take jobs */
.us-steg { background: var(--eik); }
.us-steg-liste { display: grid; gap: 1px; margin-top: 2rem; background: var(--linje-sterk); border: 1px solid var(--linje-sterk); }
@media (min-width: 768px) { .us-steg-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .us-steg-liste { grid-template-columns: repeat(4, 1fr); } }
.us-steg-liste li { display: grid; align-content: start; gap: 0.5rem; padding: 1.4rem 1.3rem 1.6rem; background: var(--eik); }
.us-steg-liste .sl-nr { display: block; font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); color: var(--marine); }
.us-steg-navn { font-size: var(--str-h3); font-weight: 400; letter-spacing: -0.015em; }
.us-steg-tekst { color: var(--tekst-dempet); }
.us-omrader { display: grid; gap: 0.6rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 900px) { .us-omrader { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: baseline; } }
.us-omrader h2 { font-size: var(--str-h3); font-weight: 400; letter-spacing: -0.015em; }
.us-omrader p { font-size: var(--str-ingress); line-height: 1.5; }

/* ---------- questions: plain details, the answer under the question */
.us-spm { background: var(--hvit); }
.us-spm-liste { border-top: 1px solid var(--linje-sterk); }
.us-spm-liste details { border-bottom: 1px solid var(--linje-sterk); }
.us-spm-liste summary { position: relative; display: block; padding: 1.15rem 2.75rem 1.15rem 0; cursor: pointer; list-style: none; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); font-weight: 500; line-height: 1.35; }
.us-spm-liste summary::-webkit-details-marker { display: none; }
.us-spm-liste summary::before, .us-spm-liste summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 16px; height: 1.5px; background: var(--marine); transition: transform 0.25s var(--mykt); }
.us-spm-liste summary::after { transform: rotate(90deg); }
.us-spm-liste details[open] summary::after { transform: rotate(0deg); }
.us-spm-liste summary:hover { color: var(--marine); }
.us-spm-liste details p { padding: 0 2.75rem 1.35rem 0; color: var(--tekst-dempet); max-width: 64ch; }

/* ---------- what belongs with it: other services, with a photo where the page has one */
.us-relatert { background: var(--kalk); }
.us-tjliste { display: grid; gap: clamp(0.75rem, 1.4vw, 1.1rem); margin-top: 2rem; }
@media (min-width: 600px) { .us-tjliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .us-tjliste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.us-tj { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--hvit); box-shadow: 0 0 0 1px var(--linje); text-decoration: none; transition: box-shadow 0.3s var(--mykt); }
.us-tj:hover { box-shadow: 0 0 0 1px var(--linje-sterk), 0 14px 30px var(--skygge); }
.us-tj-bilde { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--eik); }
.us-tj-bilde img { width: 100%; height: 100%; object-fit: cover; }
.us-tj-tekst { display: grid; align-content: start; gap: 0.4rem; padding: 1.1rem 1.15rem 1.25rem; }
.us-tj-navn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 1.15rem; font-weight: 500; }
.us-tj-navn svg { width: 17px; height: 17px; color: var(--marine); flex: none; }
.us-tj-kort { color: var(--tekst-dempet); line-height: 1.45; }
.us-relatert-fot { margin-top: 1.75rem; }
/* on a phone each service is a row: a small square photo beside the words, so four of them fit on one screen */
@media (max-width: 599px) {
  .us-tj:has(.us-tj-bilde) { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto; }
  .us-tj:has(.us-tj-bilde) .us-tj-bilde { aspect-ratio: auto; height: 100%; min-height: 6.5rem; }
  .us-sitat-hvem > [aria-hidden="true"] { display: none; }
  .us-sitat-hvem > span:last-child { flex-basis: 100%; }
}

/* ---------- the overview: every service in its group */
.us-gruppe + .us-gruppe { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.us-gruppe-tittel { display: flex; align-items: baseline; gap: 0.9rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); }
.us-gruppe-tittel span { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); color: var(--marine); }
.us-oversikt { background: var(--hvit); }

/* ---------- projects page: each job as a photo and the words beside it */
.us-jobber { background: var(--hvit); }
.us-jobb-liste { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.us-jobb { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 900px) {
  .us-jobb { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .us-jobb:nth-child(even) .us-jobb-bilder { order: 2; }
}
.us-jobb-bilder { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.us-jobb-bilder.to { grid-template-columns: 1.25fr 1fr; }
.us-jobb-bilder figure { overflow: hidden; aspect-ratio: 4 / 5; background: var(--eik); }
.us-jobb-bilder img { width: 100%; height: 100%; object-fit: cover; }
.us-jobb-tekst { display: grid; gap: 0.8rem; align-content: center; }
.us-jobb-nr { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); color: var(--marine); }
.us-jobb-tekst h2 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.1; }
.us-jobb-tekst p { color: var(--tekst-dempet); max-width: 46ch; }
.us-jobb-tekst .us-lenke { justify-self: start; margin-top: 0.4rem; }
.us-flere { background: var(--valnott); }
.us-flere-liste { display: grid; gap: 1px; background: var(--linje-sterk); border: 1px solid var(--linje-sterk); }
@media (min-width: 900px) { .us-flere-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.us-flere-liste li { display: grid; align-content: start; gap: 0.8rem; padding: 1.5rem 1.4rem 1.6rem; background: var(--valnott); }
.us-flere-liste h3 { font-size: var(--str-h3); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.us-flere-liste blockquote { margin: 0; }
.us-flere-liste blockquote p { line-height: 1.5; }
.us-flere-hvem { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; font-size: 0.95rem; }
.us-flere-hvem .ko-stjerner { color: var(--marine); }

/* ---------- about page: the facts as a plain list */
.us-fakta { display: grid; gap: 0; border-top: 1px solid var(--linje-sterk); }
.us-fakta div { display: grid; gap: 0.25rem 2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--linje-sterk); }
@media (min-width: 600px) { .us-fakta div { grid-template-columns: minmax(9rem, 0.4fr) 1fr; } }
.us-fakta dt { color: var(--tekst-dempet); }
.us-fakta dd { margin: 0; font-weight: 500; }

/* ---------- privacy and the page that is not found: plain reading */
.us-les { background: var(--hvit); }
.us-les-ramme { max-width: 46rem; }
.us-les h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 400; letter-spacing: -0.015em; margin-top: 2.25rem; }
.us-les h2:first-child { margin-top: 0; }
.us-les p, .us-les li { color: var(--tekst-dempet); max-width: 64ch; }
.us-les p { margin-top: 0.8rem; }
.us-les ul { margin: 0.8rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* COPIED FROM seksjoner.css by production/kilde/undersider/lag.py: frame, section, heading, contact, form, footer. Do not edit here. */
.ramme { width: 100%; max-width: var(--maks); margin: 0 auto; padding: 0 var(--marg); }
.sek { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0; scroll-margin-top: calc(var(--meny-h) - 1px); }
.sek-hode { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sek-hode .merke, .sek .merke { color: var(--marine); }
.sek-hode .merke::before, .sek .merke::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.sek-tittel {
  font-size: var(--str-h2); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.04;
  text-wrap: balance; max-width: 18ch; margin-top: 0.9rem;
}
.sek-ingress { font-size: var(--str-ingress); line-height: 1.5; color: var(--tekst-dempet); max-width: 40ch; }
@media (min-width: 900px) {
  .sek-hode-delt { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 3rem; }
}

/* the focus ring is light on the dark grounds (navy on navy cannot be seen), and navy again on the kalk form card */
.prosjekter, .kontakt, .bunn { --fokus: var(--tekst-lys); }
.skjema { --fokus: var(--marine); }

/* ---------- contact: deep navy; the details and the reviews to the left, Kortstokken to the right (css/kortstokk.css). On a phone the form comes right after the details and the reviews under it ---------- */
.kontakt { background: var(--marine-dyp); color: var(--tekst-lys); --fokus: var(--tekst-lys); }
.kontakt .merke { color: var(--tekst-lys-dempet); }
.kontakt .sek-ingress { color: var(--tekst-lys-dempet); }
.ko-ramme { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 1024px) {
  .ko-ramme { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; align-items: start; }
  .ko-skjema { grid-column: 2; grid-row: 1 / span 2; }
  .ko-vurderinger { grid-column: 1; grid-row: 2; }
}
.ko-venstre { display: grid; gap: 1rem; align-content: start; }
.ko-tlf { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 300; letter-spacing: -0.02em; text-decoration: none; }
.ko-tlf svg { width: 28px; height: 28px; }
.ko-epost { font-size: 1.1rem; text-decoration: none; border-bottom: 1px solid var(--linje-lys); justify-self: start; }
.ko-epost:hover, .ko-tlf:hover { color: var(--hvit); }
.ko-tid { color: var(--tekst-lys-dempet); }
/* who answers: his name, until Pietro sends a portrait to stand beside it */
.ko-hvem { margin-top: 0.35rem; line-height: 1.35; }
.ko-hvem-navn { display: block; color: var(--tekst-lys); font-weight: 500; }
.ko-hvem-rolle { display: block; color: var(--tekst-lys-dempet); font-size: 0.95rem; }
.ko-skjema { min-width: 0; --fokus: var(--marine); }
/* the words above the stack stand on the navy, the cards are white */
.kontakt .hs-topp { --hs-demp: var(--tekst-lys-dempet); --hs-tekst: var(--tekst-lys); --hs-spor: var(--linje-lys); --hs-fyll: var(--eik); }
/* the reviews: still, with their words and names, in the page's own colours */
.ko-vurderinger ul { display: grid; gap: 1.5rem; }
.ko-vurdering { padding-top: 1.25rem; border-top: 1px solid var(--linje-lys); }
.ko-vurdering blockquote { margin: 0; }
.ko-vurdering blockquote p { font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.25rem); line-height: 1.45; color: var(--tekst-lys); }
.ko-vurdering-hvem { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; margin-top: 0.7rem; font-size: 0.95rem; color: var(--tekst-lys-dempet); }
.ko-stjerner { display: inline-flex; gap: 1px; color: var(--eik); }

/* the form's own fields inside «Fortell mer» (from the Bygglund site) */
.felt { display: grid; gap: 0.45rem; min-width: 0; }
.felt label { font-size: 0.98rem; font-weight: 500; }
.felt input, .felt textarea, .felt select {
  width: 100%; min-height: 52px; padding: 0.8rem 0.95rem; font: inherit; font-size: 1.0625rem; color: var(--tekst);
  background: var(--hvit); border: 1px solid var(--linje-sterk); border-radius: var(--radius); transition: border-color 0.2s var(--mykt);
}
.felt textarea { min-height: 8rem; resize: vertical; }
.felt input:hover, .felt textarea:hover, .felt select:hover { border-color: var(--marine); }
.felt input:focus-visible, .felt textarea:focus-visible, .felt select:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
.felt [aria-invalid="true"] { border-color: var(--feil); }
.kontroll-felt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.felt-navn { font-size: 0.98rem; font-weight: 500; }
.bilder-rad { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.felt .bilder-inndata { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.felt .bilder-knapp { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 1px solid var(--linje-sterk); border-radius: var(--radius); background: var(--hvit); color: var(--tekst); font-size: 1.0625rem; font-weight: 400; cursor: pointer; transition: border-color 0.2s var(--mykt); }
.felt .bilder-knapp:hover { border-color: var(--marine); }
.bilder-knapp svg { flex: none; width: 20px; height: 20px; }
.bilder-inndata:focus-visible + .bilder-knapp { border-color: var(--fokus); outline: 2px solid var(--fokus); outline-offset: 1px; }
.bilder-liste { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 8px 8px 0 0; }
.bilder-liste li { position: relative; width: 56px; height: 56px; }
.bilder-liste img, .bilde-tom { display: block; width: 100%; height: 100%; border: 1px solid var(--linje-sterk); border-radius: var(--radius); object-fit: cover; }
.bilde-tom { background: var(--kalk); }
.bilde-fjern { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid var(--hvit); border-radius: 50%; background: var(--marine); color: var(--tekst-lys); cursor: pointer; }
.bilde-fjern svg { width: 14px; height: 14px; }
.bilde-fjern:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.bilder-hint { font-size: 0.9rem; line-height: 1.4; color: var(--tekst-dempet); }
.skjema-status { min-height: 1.5em; font-size: 1rem; color: var(--tekst); }
.skjema-status.feil { color: var(--feil); }
.kontakt noscript .skjema-status { color: var(--tekst-lys); }

/* ---------- footer: ink ---------- */
.bunn { background: var(--bunn); color: var(--tekst-lys-dempet); padding: clamp(3.5rem, 7vw, 5rem) 0 1.5rem; }
.bunn a { text-decoration: none; }
.bunn a:hover { color: var(--tekst-lys); }
.bunn-ramme { display: grid; gap: 2.25rem; }
@media (min-width: 768px) { .bunn-ramme { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.bunn-merke { display: grid; gap: 1rem; align-content: start; }
.bunn-logo { color: var(--tekst-lys); }
.bunn-merke p { max-width: 30ch; }
.bunn-kol { display: grid; gap: 0.5rem; align-content: start; }
.bunn-tittel { color: var(--tekst-lys); font-weight: 560; margin-bottom: 0.3rem; }
/* the name as big as the screen: it rises out of the line under it as the page ends */
.bunn-navn { overflow: clip; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-inline: var(--kant); font-size: clamp(2.6rem, 13vw, 13rem); font-weight: 200; letter-spacing: -0.055em; line-height: 1.1; white-space: nowrap; color: var(--tekst-lys); }
.bunn-navn-ord { display: inline-block; }
html.js-anim .bunn-navn-ord { transform: translate3d(0, calc(max(0, 1 - var(--inn, 1) * 4) * 100%), 0); }
.bunn-fot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 0; padding-top: 1.25rem; border-top: 1px solid var(--linje-lys); font-size: 0.92rem; }
.bunn-fot a { border-bottom: 1px solid var(--linje-lys); }

/* the jobs in «Mer vi gjør» and «Dette tar vi også» are links to their own pages (production/kilde/undersider/lag.py, 07.11.2026) */
a.mos-navn { text-decoration: none; }
a.mos-navn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.tj-alt-lister dd a { text-decoration: underline; text-decoration-color: var(--linje-sterk); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tj-alt-lister dd a:hover { text-decoration-color: currentColor; }