/* Everything under the hero, on every page: the menu's dropdown and phone panel, the section system, the front page's sections
   and the footer. The reset, the menu bar and the buttons live in hero.css, which every page loads first.
   Motion: js/main.js writes one number, --p (0 to 1), on each [data-rull] element as it scrolls up the screen, and the rules here
   turn it into transform and opacity. All hidden start positions sit behind html.rull-klar, a class main.js sets itself when its
   scroll engine has started (and only when html has js-anim: JavaScript on, no reduced motion). So the page is whole without
   JavaScript, with reduced motion, and also if main.js should fail to load. */

section[id], div[id] { scroll-margin-top: var(--meny-h); }
/* The focus ring is pale timber on the dark grounds (hero.css). On the light grounds that is 1.6:1, so there it is deep petrol;
   the service cards are photographs with a dark veil and keep the pale ring. */
.tjenester :focus-visible, .prosjekter :focus-visible, .om :focus-visible, .kontakt :focus-visible, .side-innhold :focus-visible, .undermeny :focus-visible { outline-color: var(--petrol-dyp); }
.fagkort-ramme :focus-visible { outline-color: var(--eik); }
img { max-width: 100%; }
p { margin: 0; }
h2, h3, h4 { margin: 0; font-weight: 500; }
ol { margin: 0; padding: 0; list-style: none; }

.seksjon { position: relative; z-index: 1; padding: var(--rom) var(--kant); }
.inn { max-width: var(--bredde); margin: 0 auto; }
.pa-mork { color: var(--tekst-lys); }

/* ---- section head: label, title, and the lead beside it ---- */
.merke { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.merke::before { content: ""; width: 1.75rem; height: 2px; background: var(--eik); }
.tittel-2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.028em; font-weight: 500; text-wrap: balance; }
.ingress { margin: 1.1rem 0 0; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.5; max-width: 38rem; }
.hode { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 5rem); align-items: end; margin-bottom: clamp(1.75rem, 3.4vw, 3rem); }
.hode .ingress { margin-top: 0; }
.hode-side { display: grid; gap: 1rem; justify-items: start; }

.lenke { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; padding-bottom: 0.2rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.lenke svg, .pil { width: 1.05rem; height: 1.05rem; flex: none; transition: transform 0.25s ease; }
.lenke:hover svg, .lenke:focus-visible svg { transform: translateX(4px); }
.knapp-mork { background: var(--petrol-dyp); color: var(--tekst-lys); }
.knapp-mork:hover, .knapp-mork:focus-visible { background: var(--petrol); }
.knapp-kant-mork { border: 1px solid var(--linje-sterk); color: var(--tekst); font-variant-numeric: tabular-nums; }
.knapp-kant-mork:hover, .knapp-kant-mork:focus-visible { border-color: var(--tekst); }

/* ---- menu: the arrow by «Tjenester» opens every service; on phones a button opens the whole menu ---- */
.meny-punkter { align-items: center; }
.meny-punkter a, .meny-ring, .meny-logo span { white-space: nowrap; }
.har-under { display: flex; align-items: center; gap: 0.1rem; }
.meny-pil { display: grid; place-items: center; width: 1.75rem; height: 2.25rem; margin-right: -0.5rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.meny-pil svg { width: 0.8rem; height: 0.8rem; transition: transform 0.2s ease; }
.har-under.apen-under .meny-pil svg { transform: rotate(180deg); }
.undermeny { position: fixed; z-index: 29; top: calc(var(--meny-h) - 0.5rem); left: 50%; width: min(64rem, calc(100vw - 2 * var(--kant))); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem; padding: 1.75rem 2rem 1.9rem; background: var(--kalk); color: var(--tekst); border-radius: var(--radius); box-shadow: var(--skygge); opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
.har-under.apen-under .undermeny { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.undermeny-tittel { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--tekst-dempet); margin: 0 0 0.5rem; }
.undermeny ul + .undermeny-tittel { margin-top: 1.25rem; }
.undermeny li a { display: block; padding: 0.28rem 0; font-size: 1.0625rem; text-decoration: none; background: none; }
.undermeny li a:hover, .undermeny li a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.undermeny .lenke { margin-top: 1.25rem; font-size: 1.0625rem; }

.meny-knapp { display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.meny-knapp span { position: absolute; left: 0.6rem; right: 0.6rem; height: 2px; background: currentColor; transition: transform 0.25s ease; }
.meny-knapp span:first-child { top: 1.05rem; }
.meny-knapp span:last-child { top: 1.6rem; }
.meny.apen .meny-knapp span:first-child { transform: translateY(0.275rem) rotate(45deg); }
.meny.apen .meny-knapp span:last-child { transform: translateY(-0.275rem) rotate(-45deg); }
.meny.apen { background: var(--petrol-dyp); }
.mobilmeny { position: fixed; z-index: 28; inset: var(--meny-h) 0 0 0; display: flex; flex-direction: column; gap: 1.5rem; padding: 1rem var(--kant) calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--petrol-dyp); color: var(--tekst-lys); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.mobilmeny[hidden] { display: none; }                      /* closed: out of the page altogether (js/main.js takes hidden off before it opens) */
.meny.apen + .mobilmeny { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobilmeny > nav > ul > li { border-bottom: 1px solid var(--linje-lys); }
.mobilmeny > nav > ul > li > a, .mobilmeny summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; font-size: 1.375rem; letter-spacing: -0.015em; text-decoration: none; cursor: pointer; list-style: none; }
.mobilmeny summary::-webkit-details-marker { display: none; }
.mobilmeny summary svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.mobilmeny details[open] summary svg { transform: rotate(180deg); }
.mobilmeny details ul { padding: 0 0 1rem; columns: 2; column-gap: 1.25rem; }
.mobilmeny details li a { display: block; padding: 0.55rem 0; font-size: 1.0625rem; line-height: 1.3; text-decoration: none; color: var(--tekst-lys-dempet); break-inside: avoid; }
.mobilmeny-knapper { display: grid; gap: 0.75rem; margin-top: auto; }
.mobilmeny .sprak { display: block; align-self: flex-start; font-size: 1.0625rem; min-height: 2.75rem; }
html.meny-last { overflow: hidden; }

/* ---- services: four large cards, then the band with the rest ---- */
.tjenester { background: var(--kalk); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.fag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1.15rem); }
.fagkort { position: relative; }
/* No aspect-ratio here: together with a min-height it forces a WIDTH (19rem x 16 / 9 = 540 px) and pushed the page wider than a
   tablet's screen (QA 10.11.2026). The height follows the window's width instead, and the text can always make the card taller. */
.fagkort-ramme { position: relative; display: flex; align-items: flex-end; min-height: clamp(19rem, 25.5vw, 31rem); overflow: hidden; border-radius: var(--radius); background: var(--petrol-dyp); color: var(--tekst-lys); isolation: isolate; }
.fagkort-bilde { position: absolute; inset: 0; z-index: -1; }
.fagkort-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fagkort-bilde::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--slor-3) 0%, var(--slor-2) 34%, var(--slor-1) 62%, var(--slor-0) 100%); }
.fagkort-tekst { width: 100%; padding: clamp(1.1rem, 2vw, 1.9rem); }
.fagkort h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.08; letter-spacing: -0.022em; }
.fagkort h3 a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.fagkort h3 a::after { content: ""; position: absolute; inset: 0; }                 /* the whole card is the link */
.fagkort h3 svg { width: 1.3rem; height: 1.3rem; transition: transform 0.3s ease; }
.fagkort p { margin-top: 0.5rem; max-width: 33rem; line-height: 1.5; color: var(--tekst-lys-sterk); }
.fagkort-under { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.fagkort-under a { display: inline-flex; align-items: center; min-height: 2.125rem; padding: 0 0.8rem; border: 1px solid var(--linje-lys-sterk); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fagkort-under a:hover, .fagkort-under a:focus-visible { background: var(--kalk); border-color: var(--kalk); color: var(--petrol-dyp); }
@media (pointer: coarse) {
  .fagkort-under a { min-height: 2.75rem; padding: 0 1rem; }
  .meny-pil { width: 2.75rem; height: 2.75rem; }
}
.hs-uten-js { margin-top: 1rem; font-weight: 600; }
@media (hover: hover) {
  .fagkort:hover .fagkort-bilde img { transform: scale(1.045); }
  .fagkort:hover h3 svg { transform: translateX(5px); }
}
/* the card is uncovered board by board, like the cladding of the house in the hero */
.lekt { display: none; }
/* the boards lie outside the card's rounded frame, one pixel wider all round, so no dark corner shows through while the card is covered */
html.rull-klar .lekt { display: block; position: absolute; z-index: 3; top: -1px; bottom: -1px; left: calc(var(--i) * 12.5% - 1px); width: calc(12.5% + 2px); background: var(--kalk); transform-origin: 50% 0; pointer-events: none; transform: scaleY(calc(1 - clamp(0, (var(--p, 0) - var(--forsink, 0) - var(--i) * 0.045) / 0.5, 1))); transition: transform 0.2s ease-out; }

.mer { position: relative; z-index: 1; background: var(--petrol-dyp); color: var(--tekst-lys); padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--kant) clamp(2.5rem, 5vw, 4.25rem); }
.mer-hode { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mer-tittel { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; }
.mer-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2.5rem); }
.mer-liste li { position: relative; }
.mer-liste li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linje-lys); transform-origin: 0 50%; }
html.rull-klar .mer-liste[data-rull] li::before { transform: scaleX(clamp(0, (var(--p, 0) - var(--rad, 0) * 0.14) / 0.5, 1)); transition: transform 0.2s ease-out; }
.mer-liste a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.75rem; padding: 0.6rem 0; font-size: 1.125rem; line-height: 1.25; text-decoration: none; transition: color 0.2s ease; }
.mer-liste a svg { width: 1rem; height: 1rem; flex: none; opacity: 0.55; transition: transform 0.25s ease, opacity 0.2s ease; }
.mer-liste a:hover, .mer-liste a:focus-visible { color: var(--eik); }
.mer-liste a:hover svg, .mer-liste a:focus-visible svg { transform: translateX(4px); opacity: 1; }

/* ---- projects: a wall of the customer's own job photos; the columns drift at different speeds ---- */
.prosjekter { background: var(--kalk-2); overflow: hidden; }
.vegg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.8vw, 1.75rem); align-items: start; }
.vegg-kol { display: grid; gap: clamp(1.25rem, 2.2vw, 2.25rem); will-change: transform; }
.vegg-kol:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
html.rull-klar .vegg-kol { transform: translate3d(0, calc(var(--s, 0) * var(--fart, 0) * 1px), 0); }
.jobb { position: relative; margin: 0; }
/* the caption is the link to the service the photo shows; ::after stretches it over the whole tile */
.jobb-lenke { color: inherit; text-decoration: none; }
.jobb-lenke::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.jobb-lenke:hover, .jobb-lenke:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
.jobb-bilde { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--kalk); aspect-ratio: 3 / 2; }
.jobb-bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jobb figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; font-size: 1.0625rem; line-height: 1.3; }
.jobb figcaption b { font-weight: 600; }
.jobb figcaption span { color: var(--tekst-dempet); white-space: nowrap; }

/* ---- how we work: the pinned scene has its own sheet, css/slik.css (front page only) ---- */

/* ---- about ---- */
.om { background: var(--kalk); }
.om-rutenett { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
.om-tekst p:not(.merke) { margin-top: 1.1rem; max-width: 36rem; }
.om-tekst .tittel-2 { margin-bottom: 0.4rem; }
.motto { margin: 0; }
.motto p { font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.75rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 500; color: var(--petrol-dyp); text-wrap: balance; }
.motto p span { display: inline-block; }
/* the words come one by one, from nothing: a word that stood faint before its turn would be unreadable text (contrast) */
html.rull-klar .motto p span { opacity: clamp(0, (var(--p, 0) * var(--n) - var(--i)) / 1.4, 1); transition: opacity 0.25s ease-out; }
.motto footer { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--tekst-dempet); }
.motto footer::before { content: ""; width: 1.75rem; height: 2px; background: var(--eik); }
.om-rad2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2.25rem); align-items: stretch; margin-top: clamp(2rem, 4vw, 3.5rem); }
.om-bilde { margin: 0; min-height: 15rem; border-radius: var(--radius); overflow: hidden; background: var(--kalk-2); }
.om-bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
.om-bilde figcaption { margin-top: 0.6rem; font-size: 1rem; color: var(--tekst-dempet); }
.fakta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2rem, 3.6vw, 3.25rem); border-top: 1px solid var(--linje); }
.fakta li { display: grid; align-content: start; gap: 0.4rem; padding: 1.1rem 1.25rem 1.2rem 0; border-bottom: 1px solid var(--linje); font-size: 1.0625rem; line-height: 1.35; color: var(--tekst-dempet); }
.fakta li + li { padding-left: 1.25rem; border-left: 1px solid var(--linje); }
.fakta b { display: block; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--petrol-dyp); }
.partnere { display: grid; align-content: center; gap: 1.25rem; padding: clamp(1.25rem, 2.2vw, 1.9rem) clamp(1.25rem, 2.4vw, 2.25rem); background: var(--kalk-2); border-radius: var(--radius); }
.partnere h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; }
.partnere p { margin-top: 0.35rem; color: var(--tekst-dempet); }
.partnere ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem clamp(1rem, 2.5vw, 2.5rem); }
.partnere li { display: grid; gap: 0.2rem; font-size: 1rem; color: var(--tekst-dempet); }
.partnere li b { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.012em; color: var(--tekst); }

/* ---- contact ---- */
/* The form is tall. A link to #kontakt puts the top of the form, not the top of the section's air, right under the menu, so a whole card
   with its buttons fits in a low window (1210 x 654). */
.kontakt { background: var(--kalk-2); }
section.kontakt { scroll-margin-top: calc(var(--meny-h) - var(--rom) + 0.25rem); }   /* section.kontakt: must beat section[id] above */
.kontakt-rutenett { display: grid; grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.kontakt-tekst { position: sticky; top: calc(var(--meny-h) + 1.5rem); }
.kontakt-ring { display: inline-grid; gap: 0.15rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); text-decoration: none; }
.kontakt-ring span { font-size: 1.0625rem; color: var(--tekst-dempet); }
.kontakt-ring b { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1; letter-spacing: -0.035em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--petrol-dyp); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s ease; padding-bottom: 0.2rem; }
.kontakt-ring:hover b, .kontakt-ring:focus-visible b { background-size: 100% 2px; }
.kontakt-punkter { display: grid; gap: 0.5rem; margin-top: clamp(1.25rem, 2.4vw, 1.9rem); color: var(--tekst-dempet); }
.kontakt-punkter li { display: flex; gap: 0.6rem; align-items: baseline; }
.kontakt-personvern { margin-top: 1.25rem; font-size: 1rem; color: var(--tekst-dempet); }
.kontakt-personvern a { color: var(--tekst); text-underline-offset: 0.2em; }
.kontakt-punkter li::before { content: ""; flex: none; width: 0.9rem; height: 2px; background: var(--eik-dyp); transform: translateY(-0.3em); }

/* ---- footer ---- */
.bunn { position: relative; z-index: 1; background: var(--petrol-dyp); color: var(--tekst-lys); padding: clamp(2.75rem, 5vw, 4.5rem) var(--kant) 1.75rem; font-size: 1.0625rem; }
.bunn-rutenett { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 2fr); gap: 2rem clamp(1.5rem, 4vw, 4.5rem); }
.bunn-logo { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; font-size: 1.1875rem; line-height: 1.12; letter-spacing: -0.01em; text-decoration: none; }
.bunn-logo svg { width: 2.5rem; height: 2.5rem; flex: none; }
.bunn-firma p { margin-top: 1rem; color: var(--tekst-lys-dempet); line-height: 1.55; }
.bunn-firma a { text-decoration: none; }
.bunn-firma .bunn-tlf { display: inline-block; margin-top: 0.9rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; color: var(--tekst-lys); font-variant-numeric: tabular-nums; }
.bunn h2 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--tekst-lys-dempet); margin-bottom: 0.7rem; }
.bunn nav a { display: block; padding: 0.3rem 0; text-decoration: none; }
.bunn nav a:hover, .bunn nav a:focus-visible, .bunn-linje a:hover, .bunn-linje a:focus-visible { color: var(--eik); }
.bunn-tjenester ul { columns: 3; column-gap: clamp(1rem, 2.5vw, 2.5rem); }
.bunn-tjenester li { break-inside: avoid; }
.bunn-linje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: clamp(2rem, 4vw, 3.25rem); padding-top: 1.25rem; border-top: 1px solid var(--linje-lys); font-size: 1rem; color: var(--tekst-lys-dempet); }
.bunn-linje a { color: var(--tekst-lys); text-underline-offset: 0.2em; }

/* generic reveal for a block: rises a little and fades in */
html.rull-klar [data-rull="opp"] { opacity: clamp(0, var(--p, 0) / 0.6, 1); transform: translateY(calc((1 - clamp(0, var(--p, 0) / 0.6, 1)) * 1.75rem)); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }

/* ---- narrower screens ---- */
@media (max-width: 1099px) {
  .mer-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bunn-rutenett { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bunn-tjenester { grid-column: 1 / -1; }
}
@media (max-width: 899px), (max-aspect-ratio: 13/10) {
  .meny-knapp { display: block; }
  .meny { gap: 0.75rem; }
  .meny-hoyre { gap: 0.6rem; }
  .hode { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }
  .om-rutenett, .kontakt-rutenett, .om-rad2 { grid-template-columns: minmax(0, 1fr); }
  .kontakt-tekst { position: static; }
}
/* The full menu needs about 1170 px on one line; under that the button takes over (the hero has its own, lower breakpoint). */
@media (max-width: 1179px) {
  .meny-punkter { display: none; }
  .meny-knapp { display: block; }
  .meny { gap: 0.75rem; }
  .meny-hoyre { gap: 0.6rem; }
}
@media (min-width: 1180px) and (min-aspect-ratio: 13/10) {
  .mobilmeny { display: none; }
}
@media (max-width: 899px) {
  .fag { grid-template-columns: minmax(0, 1fr); }
}
/* a lying tablet (1024 x 768): the hero's text column is narrow, so the proof line is set a little smaller */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero-bevis { font-size: 0.875rem; gap: 0.75rem; }
}
@media (max-width: 767px) {
  body { font-size: 1.0625rem; }
  .fag { grid-template-columns: minmax(0, 1fr); }
  .fagkort-ramme { min-height: 21rem; }
  html.rull-klar .lekt { left: calc(var(--i) * 25% - 1px); width: calc(25% + 2px); }
  html.rull-klar .lekt:nth-child(n + 6) { display: none; }
  .mer-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mer-liste a { font-size: 1.0625rem; min-height: 3.5rem; }
  /* the wall becomes one row you swipe sideways */
  .vegg { display: flex; gap: 0.9rem; margin: 0 calc(-1 * var(--kant)); padding: 0 var(--kant) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .vegg::-webkit-scrollbar { display: none; }
  .vegg-kol { display: contents; }
  html.rull-klar .vegg-kol { transform: none; }
  .jobb { flex: 0 0 82%; scroll-snap-align: center; }
  .jobb figcaption { display: grid; gap: 0.1rem; }
  .fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakta li:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .partnere ul { grid-template-columns: minmax(0, 1fr); }
  .bunn-rutenett { grid-template-columns: minmax(0, 1fr); }
  .bunn-tjenester ul { columns: 2; }
}