/* Pienaro Eiendom: the sections under the hero (04.11.2026, reworked 06.11.2026 evening). The grounds change from section to section: kalk (services), oak (the walk into
   the kitchen), walnut (more we do), deep navy (projects), oak (the band), walnut (how we work), kalk (about), film (the window), deep navy (contact), ink (footer).
   The motion is driven by the scroll (js/seksjoner.js); without JavaScript or with reduced motion everything stands finished. Each section moves in its own way: the
   service words rise out of the film's top edge and drift, the scroll film walks up to the kitchen, the wall of films slides against itself, the projects are a flight
   forward through Pietro's jobs, the band's words and pictures slide opposite ways, the steps open one at a time, and the page lifts off a film standing still behind it.
   .film: a poster (img) with a muted loop that fades in over it once it plays; js/seksjoner.js loads and plays only what can be seen. */

:root { --kant: max(var(--marg), calc((100vw - var(--maks)) / 2 + var(--marg))); }   /* the page's margin: how far a picture bleeds to reach the screen's edge */
.film { position: absolute; inset: 0; display: block; }
.film img, .film picture { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0.45s var(--mykt); }
.film.spiller .film-video { opacity: 1; }
.film-pause {
  position: fixed; z-index: 80; right: var(--marg); bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--film-knapp-tett); color: var(--tekst-lys); border: 1px solid var(--film-kant); --fokus: var(--marine);
  transition: background 0.25s var(--mykt), color 0.25s var(--mykt);
}
.film-pause:hover { background: var(--kalk); color: var(--marine); }
.film-pause svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.film-pause .spill { display: none; }
.film-pause[aria-pressed="true"] .spill { display: block; }
.film-pause[aria-pressed="true"] .pause { display: none; }
.film-pause[hidden] { display: none; }

.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; }
}

/* ---------- services (T4): each row has its name as one big word that rises out of the top edge of the film and drifts sideways with the scroll; the film runs out to the edge
   of the screen and opens its own way. The button picks the job on the form's first card (data-gjelder, js/kortstokk.js) ---------- */
.tjenester { background: var(--kalk); padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; overflow-x: clip; }
.tj-rader { display: grid; gap: clamp(3rem, 7vw, 6.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.tj { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: center; --tj-drift: 7vw; }
.tj-navn { font-size: clamp(2.75rem, 0.6rem + 8.4vw, 8rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1.14; overflow: visible clip; }
.tj-navn a { text-decoration: none; color: inherit; }
.tj-navn a:hover { color: var(--marine); }
.tj-navn-ord { display: inline-block; }
html.js-anim .tj-navn-ord { transform: translate3d(calc((0.5 - var(--rp, 0.5)) * var(--tj-drift)), calc(max(0, 1 - var(--inn, 1) * 1.7) * 108%), 0); will-change: transform; }
.tj-bilde { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--marg)); background: var(--eik); }
.tj-tekst { display: grid; align-content: start; justify-items: start; gap: 0.75rem; }
@media (min-width: 900px) {
  .tj { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); grid-template-areas: "navn navn" "film tekst"; column-gap: clamp(2rem, 4.5vw, 4.5rem); row-gap: 0.35rem; }
  .tj:nth-child(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr); grid-template-areas: "navn navn" "tekst film"; --tj-drift: -7vw; }
  .tj-navn { grid-area: navn; }
  .tj:nth-child(even) .tj-navn { text-align: right; }
  .tj-bilde { grid-area: film; aspect-ratio: auto; height: min(66svh, 640px); margin: 0 0 0 calc(-1 * var(--kant)); }
  .tj:nth-child(even) .tj-bilde { margin: 0 calc(-1 * var(--kant)) 0 0; }
  .tj-tekst { grid-area: tekst; }
}
html.js-anim .tj-bilde .film { transform: scale(calc(1.1 - 0.1 * var(--rp, 1))); }
/* each film opens its own way: up from the floor, in from the edge of the screen, or out from the middle */
html.js-anim .tj-bilde { clip-path: inset(calc((1 - var(--inn, 1)) * 100%) 0 0 0); }
html.js-anim .tj:nth-child(2) .tj-bilde { clip-path: inset(0 0 0 calc((1 - var(--inn, 1)) * 100%)); }
html.js-anim .tj:nth-child(3) .tj-bilde { clip-path: inset(0 calc((1 - var(--inn, 1)) * 100%) 0 0); }
html.js-anim .tj:nth-child(4) .tj-bilde { clip-path: inset(calc((1 - var(--inn, 1)) * 50%)); }
html.js-anim .tj-tekst { opacity: calc(var(--inn, 1) * 1.6 - 0.6); transform: translate3d(0, calc((1 - var(--inn, 1)) * 44px), 0); }
.tj-nr { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); color: var(--marine); }
.tj-ingress { color: var(--tekst-dempet); font-size: var(--str-ingress); line-height: 1.5; max-width: 40ch; }
.tj-punkter { display: grid; gap: 0.35rem; margin-top: 0.15rem; }
.tj-punkter li { display: flex; align-items: baseline; gap: 0.7rem; }
.tj-punkter li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--marine); transform: translateY(-0.3em); }
.tj-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.6rem; }
.tj-mer { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 560; text-decoration: none; color: var(--marine); }
.tj-mer svg { width: 16px; height: 16px; transition: transform 0.3s var(--mykt); }
.tj-mer:hover svg { transform: translateX(4px); }

/* ---------- the walk into the kitchen: a scroll film on a canvas (js/seksjoner.js, .styrt). The words light up one at a time as you walk in. Without it the poster and all the words stand still ---------- */
.inn { background: var(--eik); margin-top: clamp(3rem, 7vw, 6.5rem); }
.inn-scene { display: grid; }
.inn-film { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--eik-2); }
.inn-plakat { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.inn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.inn-tekst { display: grid; align-content: center; justify-items: start; gap: clamp(0.9rem, 2.4svh, 1.5rem); padding: clamp(2rem, 5vw, 4rem) var(--marg); }
.inn .merke { color: var(--marine); }
.inn .merke::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.inn-tittel { font-size: clamp(2.75rem, 1rem + 5.6vw, 6.6rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1.03; }
.inn-ord { display: block; }
html.js-anim .inn-ord { color: color-mix(in srgb, var(--tekst) calc(var(--lys, 1) * 100%), var(--ord-av)); transform: translate3d(calc((1 - var(--lys, 1)) * 2.4rem), 0, 0); }
.inn-slutt { display: grid; justify-items: start; gap: 1rem; }
.inn-ingress { font-size: var(--str-ingress); line-height: 1.45; max-width: 36ch; color: var(--tekst-dempet); }
html.js-anim .inn-slutt { opacity: var(--slutt, 1); transform: translate3d(0, calc((1 - var(--slutt, 1)) * 18px), 0); }
@media (min-width: 900px) {
  .inn-scene { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
  .inn-film { order: 2; aspect-ratio: auto; min-height: 100svh; }
  .inn-tekst { padding: calc(var(--meny-h) + 1rem) clamp(2rem, 4vw, 4rem) 2rem var(--kant); }
}
html.js-anim .inn.styrt { height: calc(100lvh + 190svh); }
html.js-anim .inn.styrt .inn-scene { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
html.js-anim .inn.klar .inn-plakat { visibility: hidden; }
@media (max-width: 899px) {
  /* a phone: the film over the top two thirds of the screen, the words under it on the oak */
  html.js-anim .inn.styrt .inn-scene { grid-template-rows: 58svh minmax(0, 1fr); align-content: start; }
  html.js-anim .inn.styrt .inn-film { aspect-ratio: auto; height: 58svh; }
  html.js-anim .inn.styrt .inn-tekst { align-content: start; padding-block: 1rem 0; gap: 0.5rem; }
  html.js-anim .inn.styrt .inn-tittel { font-size: clamp(2.1rem, 9.6vw, 2.9rem); }
  html.js-anim .inn.styrt .inn-ingress { font-size: 1.0625rem; }
  html.js-anim .inn.styrt .inn .merke, html.js-anim .inn.styrt .merke { display: none; }
}

/* ---------- more we do: a wall of films that slide against each other with the scroll (data-par) and open as they come up; nothing locks ---------- */
.tj-mer-band { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--valnott); color: var(--valnott-tekst-dempet); --fokus: var(--valnott-tekst); overflow-x: clip; }
.tj-mer-tittel { font-size: clamp(3.2rem, 1rem + 8.6vw, 9.5rem); font-weight: 200; letter-spacing: -0.05em; line-height: 1.08; color: var(--valnott-tekst); margin-bottom: clamp(1.25rem, 3vw, 2.75rem); overflow: visible clip; }
.tj-mer-ord { display: inline-block; }
.tj-mer-hode { display: grid; gap: 0.5rem 3rem; align-items: end; margin-bottom: clamp(1.25rem, 3vw, 2.75rem); }
.tj-mer-hode .tj-mer-tittel { margin-bottom: 0; }
.tj-mer-ingress { color: var(--valnott-tekst); font-size: var(--str-ingress); font-weight: 300; line-height: 1.4; max-width: 26ch; padding-bottom: 0.9rem; }
@media (min-width: 900px) { .tj-mer-hode { grid-template-columns: 1fr auto; } }
html.js-anim .tj-mer-ord { transform: translate3d(0, calc(max(0, 1 - var(--inn, 1) * 1.7) * 108%), 0); }
.mos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.85rem; align-items: start; }
.mos li { display: grid; align-content: start; gap: 0.3rem; will-change: transform; }
.mos-kjokken, .mos-bad { grid-column: 1 / -1; }
.mos-vindu { grid-column: 1 / -1; }
.mos-film { position: relative; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 0.55rem; background: var(--valnott-kort); }
.mos-kjokken .mos-film, .mos-snekker .mos-film { aspect-ratio: 4 / 5; }
.mos-bad .mos-film { aspect-ratio: 16 / 10; }
.mos-vindu .mos-film { aspect-ratio: 4 / 3; }
/* a film is a little dim until the mouse is over it, and it opens from its own middle as it comes up */
.mos-film::after { content: ""; position: absolute; inset: 0; background: var(--blekk); opacity: 0.12; transition: opacity 0.3s var(--mykt); pointer-events: none; }
.mos li:hover .mos-film::after { opacity: 0; }
html.js-anim .mos-film { clip-path: inset(calc((1 - var(--inn, 1)) * 26%)); }
html.js-anim .mos-film .film { transform: scale(calc(1.16 - 0.16 * var(--inn, 1))); }
.mos-navn { color: var(--valnott-tekst); font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.12; }
.mos-tekst { max-width: 36ch; }
@media (min-width: 900px) {
  /* the small ones tuck in under the wide film, so no tile leaves a hole */
  .mos { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(0.85rem, 1.6vw, 1.5rem); row-gap: clamp(3.5rem, 7vw, 7rem); }
  .mos-kjokken { grid-column: 1 / span 5; }
  .mos-bad { grid-column: 6 / span 7; }
  .mos-snekker { grid-column: 2 / span 3; }
  .mos-tv { grid-column: 6 / span 3; margin-top: clamp(-15rem, -13vw, -5rem); }
  .mos-vindu { grid-column: 10 / span 3; margin-top: clamp(-10rem, -8.5vw, -3rem); }
  .mos-vindu .mos-film { aspect-ratio: 3 / 4; }
}
/* the rest of what Pienaro's Mittanbud profile lists, in four short groups */
.tj-alt { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.1rem; border-top: 1px solid var(--valnott-linje); }
.tj-alt-tittel { color: var(--valnott-tekst); font-size: var(--str-h3); font-weight: 400; letter-spacing: -0.015em; margin-bottom: 0.85rem; }
.tj-alt-lister { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.85rem; margin: 0; }
@media (min-width: 900px) { .tj-alt-lister { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.5rem); } }
.tj-alt-lister dt { color: var(--valnott-tekst); font-weight: 560; margin-bottom: 0.2rem; }
.tj-alt-lister dd { margin: 0; }

/* ---------- the band: the trades in large words one way, pictures the other, both moved by the scroll; nothing locks ---------- */
.band { position: relative; overflow-x: clip; background: var(--eik); padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(2.25rem, 4.5vw, 3.5rem); }
html:not(.js-anim) .band { overflow-x: auto; }
.band-ord {
  width: max-content; padding-inline: var(--marg); white-space: nowrap; color: var(--marine);
  font-size: clamp(3rem, 1.6rem + 7.5vw, 9rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1.02;
}
.band-bilder { display: flex; gap: clamp(0.65rem, 1.2vw, 1.1rem); width: max-content; padding-inline: var(--marg); margin-top: clamp(1rem, 2.2vw, 1.75rem); }
.band-bilder li { position: relative; flex: none; overflow: hidden; height: clamp(230px, 46svh, 480px); aspect-ratio: 3 / 4; background: var(--eik-2); }
.band-bilder li.band-kvadrat { aspect-ratio: 1 / 1; }
.band-bilder > li > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- projects: a flight forward through Pietro's jobs (js/seksjoner.js, .styrt). Each photo comes up out of the distance, stops softly beside its words and goes past the
   camera; a detail from the same room flies by in between. Transform and opacity only. Without it (no JS, reduced motion) a plain list ---------- */
.prosjekter { background: var(--marine-dyp); color: var(--tekst-lys); scroll-margin-top: 0; }
.prosjekter .merke { color: var(--tekst-lys-dempet); }
.prosjekter .sek-ingress { color: var(--tekst-lys-dempet); }
.fl-scene { padding-inline: var(--kant); }
.fl-start { display: grid; gap: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.fl-liste { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 700px) { .fl-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl { display: grid; gap: 1rem; align-content: start; }
.fl-bilde { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--marine-natt); }
.fl-bilde img, .fl-detalj img { width: 100%; height: 100%; object-fit: cover; }
.fl-nr { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); color: var(--tekst-lys-dempet); }
.fl-navn { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); font-weight: 200; letter-spacing: -0.035em; line-height: 1.06; margin-top: 0.4rem; text-wrap: balance; }
.fl-ingress { color: var(--tekst-lys-dempet); font-size: var(--str-ingress); line-height: 1.45; max-width: 34ch; margin-top: 0.75rem; }
.fl-detalj, .fl-ord { display: none; }
.fl-slutt { display: grid; justify-items: center; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.fl-slutt-tittel { font-size: var(--str-h2); font-weight: 200; letter-spacing: var(--sporing-tittel); line-height: 1.06; text-wrap: balance; max-width: 18ch; }
.prosjekter .knapp { --fokus: var(--tekst-lys); background: var(--kalk); color: var(--marine); border-color: var(--kalk); }
.prosjekter .knapp:hover { background: var(--hvit); border-color: var(--hvit); color: var(--marine); }

html.js-anim .prosjekter.styrt { height: calc(100lvh + 466svh); padding: 0; }   /* 466 is the sum of FL_STOPP and FL_VEI in seksjoner.js */
html.js-anim .styrt .fl-scene {
  position: sticky; top: 0; height: 100lvh; overflow: hidden; padding: 0; background: var(--marine-dyp);
}
html.js-anim .styrt .fl-liste, html.js-anim .styrt .fl { display: contents; }
html.js-anim .styrt .fl-start, html.js-anim .styrt .fl-bilde, html.js-anim .styrt .fl-tekst, html.js-anim .styrt .fl-detalj, html.js-anim .styrt .fl-slutt {
  display: block; position: absolute; left: 50%; top: 50%; margin: 0; aspect-ratio: auto; visibility: hidden; will-change: transform, opacity;
}
html.js-anim .styrt .fl-start { display: grid; justify-items: center; text-align: center; width: min(92vw, 62rem); }
html.js-anim .styrt .fl-start .sek-tittel { max-width: none; font-size: clamp(2.6rem, 1rem + 5.4vw, 6.4rem); font-weight: 200; letter-spacing: -0.045em; }
html.js-anim .styrt .fl-slutt { display: grid; width: min(92vw, 46rem); visibility: visible; opacity: 0; pointer-events: none; }   /* its button can always take the keyboard's focus */
html.js-anim .styrt .fl-slutt-tittel { font-size: clamp(2.4rem, 1rem + 4.2vw, 5.2rem); max-width: none; }
html.js-anim .styrt .fl-bilde { width: var(--fl-w, 40vw); height: var(--fl-h, 60vh); box-shadow: 0 30px 80px var(--skygge-dyp); }
html.js-anim .styrt .fl-detalj { width: var(--fl-dw, 24vw); height: calc(var(--fl-dw, 24vw) * 0.8); overflow: hidden; background: var(--marine-natt); box-shadow: 0 18px 50px var(--skygge-dyp); }
html.js-anim .styrt .fl-tekst { width: var(--fl-tw, 34vw); }
html.js-anim .styrt .fl-navn { font-size: clamp(2.2rem, 1rem + 3.9vw, 5.2rem); letter-spacing: -0.045em; }
/* the room's name, as wide as the screen and barely lighter than the ground: it lies a little deeper than the photo, so the two slide against each other */
html.js-anim .styrt .fl-ord { display: block; position: absolute; left: 50%; top: 50%; margin: 0; visibility: hidden; will-change: transform, opacity; white-space: nowrap; font-size: 25vw; font-weight: 200; letter-spacing: -0.06em; line-height: 1; color: var(--fl-ord-farge); }
html.js-anim .fl-opp .fl-ord { font-size: 32vw; }

/* ---------- about: kalk ground, Pietro at work beside the words ---------- */
.om { background: var(--kalk); overflow-x: clip; padding-top: 0; }
.om-ramme { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) { .om-ramme { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; } }
/* Pietro out to the edge of the screen, the camera pulling back from the name on his vest as the section comes up */
.om-bilde { position: relative; overflow: hidden; aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--marg)); background: var(--eik); }
@media (min-width: 900px) { .om-bilde { aspect-ratio: auto; height: min(92svh, 860px); margin: 0 0 0 calc(-1 * var(--kant)); } }
.om-bilde img { width: 100%; height: 100%; object-fit: cover; }
html.js-anim .om-bilde img { transform: scale(calc(1.7 - 0.7 * var(--kam, 1))); transform-origin: 43% 33%; }
.om-bilde figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 0.9rem; color: var(--tekst-lys); font-size: 0.92rem;
  background: linear-gradient(to top, var(--bilde-slor), transparent);
}
.om-tekst { display: grid; gap: 1.1rem; }
.om-tekst > p:not(.merke) { max-width: 46ch; }
.om-sitat { margin: 0.8rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--marine); }
.om-sitat p { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.3; max-width: 26ch; }
html.js-anim .om-sitat .ord { color: color-mix(in srgb, var(--tekst) calc(var(--lys, 1) * 100%), var(--ord-av)); transition: color 0.2s linear; }
.om-fakta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0.8rem 0 0; background: var(--linje); border: 1px solid var(--linje); }
.om-fakta div { padding: 0.9rem 1rem; background: var(--kalk); }
.om-fakta dt { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--tekst-dempet); }
.om-fakta dd { margin: 0.25rem 0 0; font-weight: 500; }
/* how we work, only what matters most: one calm line under the photo and the words; the three come up one after the other with the scroll */
.om-steg { display: grid; gap: 1.25rem; padding-top: clamp(1.25rem, 2.4vw, 2rem); border-top: 1px solid var(--linje-sterk); }
.om-steg-tittel { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.5rem); font-weight: var(--vekt-tittel); letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.om-steg-liste { display: grid; gap: 1.25rem; }
.om-steg-navn { font-size: var(--str-tekst); font-weight: var(--vekt-sterk); line-height: 1.3; }
.om-steg-liste p { margin-top: 0.3rem; color: var(--tekst-dempet); max-width: 36ch; }
.om-steg-liste a { color: var(--tekst); white-space: nowrap; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
@media (min-width: 900px) {
  .om-steg { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(1.5rem, 3vw, 3rem); }
  .om-steg-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.5rem); }
}
html.js-anim .om-steg-liste li { --n: 0; --vis: clamp(0, (var(--inn, 1) - 0.1 - var(--n) * 0.1) * 6.67, 1); opacity: var(--vis); transform: translate3d(0, calc((1 - var(--vis)) * 1.25rem), 0); }
html.js-anim .om-steg-liste li:nth-child(2) { --n: 1; }
html.js-anim .om-steg-liste li:nth-child(3) { --n: 2; }

/* ---------- the window: the page lifts and the film stands still behind it (position: fixed inside clip-path). The film only plays and paints while the window can be seen (.paa) ---------- */
.gardin { position: relative; height: 100svh; clip-path: inset(0); background: var(--marine-natt); color: var(--tekst-lys); display: grid; align-items: end; --fokus: var(--tekst-lys); }
.gardin-film { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; }
html.js-anim .gardin:not(.paa) .gardin-film { visibility: hidden; }
.gardin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--film-slor) 0%, var(--film-slor-2) 34%, transparent 62%); pointer-events: none; }
.gardin-tekst { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.25rem; padding-block: 0 clamp(2rem, 7svh, 4rem); }
.gardin-tittel { font-size: clamp(2.75rem, 1rem + 6vw, 7.2rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1.04; max-width: 14ch; text-wrap: balance; }
.gardin .knapp { background: var(--kalk); color: var(--marine); border-color: var(--kalk); }
.gardin .knapp:hover { background: var(--hvit); border-color: var(--hvit); color: var(--marine); }

/* 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; }