@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-normal-latin-ext-a9d11b3ffe.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-normal-latin-e3237528af.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-normal-latin-ext-a9d11b3ffe.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-normal-latin-e3237528af.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-300-normal-latin-ext-2d26ca746c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-300-normal-latin-b1863709d8.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-400-normal-latin-ext-2d26ca746c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-400-normal-latin-b1863709d8.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jost-500-normal-latin-ext-2d26ca746c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jost-500-normal-latin-b1863709d8.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * lookat.no: farger, skrift, knapper og felt. Fra designforslaget i oktober 2026, der Min konto deler det samme.
 *
 * Skrift:  Jost (overskrifter, som i logoene) og Inter (brødtekst), lagt på eget domene av bygget (fonts.mjs).
 * Farge:   én aksent, Lookat-blå fra logoene. Mørk profil er standard, lys kan velges i toppmenyen.
 * Form:    knapper og merkelapper er piller, flater og bilder har 20 px hjørner, felt har 12 px.
 * Lag:     1 innhold, 10 festet scene, 50 toppmeny, 60 dialog.
 */

/* ---- skrift: @font-face-reglene legges inn av build.mjs, foran denne filen ---- */

/* ---- farger: mørk profil (standard) ---- */
:root {
  color-scheme: dark;
  --bg: #060c17;
  --bg-hev: #0a1321;
  --flate: #0e1929;
  --flate-2: #142238;
  --linje: rgba(150, 180, 235, 0.16);
  --linje-sterk: rgba(150, 180, 235, 0.3);
  --tekst: #edf2fa;
  --dempet: #a6b5cb;
  --svak: #7d8da7;
  --aksent: #6aa5ff;
  --aksent-flate: #1c68f5;
  --aksent-flate-over: #3a80fb;
  --paa-aksent: #ffffff;
  --aksent-svak: rgba(70, 135, 255, 0.14);
  --ok: #5fd0a0;
  --varsel: #f2b45c;
  --skygge: 0 24px 60px rgba(1, 5, 14, 0.55);
  --lys-bak: rgba(52, 118, 255, 0.2);
  --toppmeny: rgba(6, 12, 23, 0.78);

  --display: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --brod: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --r-flate: 20px;
  --r-bilde: 24px;
  --r-felt: 12px;
  --side: clamp(20px, 5vw, 72px);
  --maks: 1320px;
  --ut: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- lys profil ---- */
:root[data-tema='lys'] {
  color-scheme: light;
  --bg: #f4f6f9;
  --bg-hev: #fbfcfd;
  --flate: #ffffff;
  --flate-2: #eaeff6;
  --linje: rgba(22, 38, 70, 0.12);
  --linje-sterk: rgba(22, 38, 70, 0.24);
  --tekst: #131b28;
  --dempet: #4a586e;
  --svak: #5f6d83;
  --aksent: #1464ef;
  --aksent-flate: #1464ef;
  --aksent-flate-over: #0b55d6;
  --aksent-svak: rgba(20, 100, 239, 0.1);
  --ok: #117a52;
  --varsel: #9a5b06;
  --skygge: 0 24px 60px rgba(28, 46, 84, 0.14);
  --lys-bak: rgba(66, 140, 255, 0.16);
  --toppmeny: rgba(244, 246, 249, 0.82);
}

/* ---- grunnlag ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 400 17px/1.6 var(--brod);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color 0.4s ease, color 0.4s ease;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, input, label, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgba(70, 135, 255, 0.18); }
table, time, .tall { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--aksent-flate); color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hopp { position: fixed; left: 16px; top: -60px; z-index: 70; padding: 10px 16px; border-radius: 999px; background: var(--aksent-flate); color: var(--paa-aksent); transition: top 0.2s; }
.hopp:focus { top: 12px; }

.ramme { width: min(100% - 2 * var(--side), var(--maks)); margin-inline: auto; }

/* ---- skrift i bruk ---- */
.display { font-family: var(--display); font-weight: 300; letter-spacing: -0.012em; line-height: 1.04; text-wrap: balance; }
.t-helt { font-size: clamp(2.9rem, 6.3vw, 5.6rem); }
.t-seksjon { font-size: clamp(2.05rem, 3.7vw, 3.35rem); line-height: 1.08; }
.t-del { font-size: clamp(1.7rem, 2.6vw, 2.45rem); line-height: 1.1; }
.t-liten { font-family: var(--display); font-weight: 400; font-size: 1.32rem; line-height: 1.25; letter-spacing: -0.005em; }
.ingress { text-wrap: pretty; color: var(--dempet); font-size: clamp(1.03rem, 1.25vw, 1.2rem); line-height: 1.6; max-width: 34em; }
.merke-tekst { font: 500 0.76rem/1 var(--brod); letter-spacing: 0.16em; text-transform: uppercase; color: var(--aksent); }
.dempet { color: var(--dempet); }
.liten { font-size: 0.9rem; }

/* ---- logoene: lys og mørk utgave ligger side om side, profilen velger ---- */
.kun-lys { display: none; }
:root[data-tema='lys'] .kun-lys { display: block; }
:root[data-tema='lys'] .kun-mork { display: none; }

.lookat { display: inline-flex; align-items: center; gap: 0.5em; min-height: 28px; font: 400 1.62rem/1 var(--display); letter-spacing: 0.13em; color: var(--tekst); }
.lookat img { width: 0.6em; height: auto; }

/* ---- knapper: piller ---- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 1.45em; border-radius: 999px; border: 1px solid transparent;
  font: 500 0.98rem/1 var(--brod); white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ut);
}
.knapp:active { transform: scale(0.98); }
.knapp--hoved { background: var(--aksent-flate); color: var(--paa-aksent); }
.knapp--hoved:hover { background: var(--aksent-flate-over); }
.knapp--rolig { border-color: var(--linje-sterk); background: transparent; color: var(--tekst); }
.knapp[aria-disabled='true'], .knapp:disabled { opacity: 0.6; pointer-events: none; }
.knapp--rolig:hover { border-color: var(--aksent); background: var(--aksent-svak); }
.knapp--liten { min-height: 40px; padding: 0 1.15em; font-size: 0.92rem; }
.pil { display: inline-block; width: 1em; height: 1em; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ut); }
a:hover > .pil, button:hover > .pil { transform: translateX(3px); }
.lenke { color: var(--aksent); font-weight: 500; display: inline-flex; align-items: center; gap: 0.45em; }
.lenke:hover { text-decoration: underline; text-underline-offset: 4px; }

.status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.8em; border-radius: 999px; border: 1px solid var(--linje-sterk); font: 500 0.74rem/1 var(--brod); letter-spacing: 0.06em; color: var(--dempet); }
.status--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.status--varsel { color: var(--varsel); border-color: color-mix(in srgb, var(--varsel) 45%, transparent); }

/* ---- skjemafelt: etiketten over feltet, feilen under ---- */
.felt { display: grid; gap: 8px; }
.felt label { font: 500 0.9rem/1.2 var(--brod); }
.felt input, .felt textarea { width: 100%; padding: 13px 14px; border-radius: var(--r-felt); border: 1px solid var(--linje-sterk); background: var(--bg); color: var(--tekst); transition: border-color 0.2s; }
.felt textarea { resize: vertical; min-height: 120px; }
.felt input:hover, .felt textarea:hover { border-color: var(--svak); }
.felt input:focus-visible, .felt textarea:focus-visible { outline: 2px solid var(--aksent); outline-offset: 1px; border-color: var(--aksent); }
.felt-feil { color: var(--varsel); font-size: 0.88rem; }
.maaler { height: 4px; margin-top: 12px; border-radius: 4px; background: var(--flate-2); overflow: hidden; }
.maaler i { display: block; height: 100%; width: calc(var(--andel) * 100%); min-width: 6px; border-radius: 4px; background: var(--aksent); }

/* ---- profilvelgeren ---- */
.tema { display: inline-flex; align-items: center; gap: 0.55em; min-height: 40px; padding: 0 0.95em; border-radius: 999px; border: 1px solid var(--linje); background: transparent; font: 500 0.86rem/1 var(--brod); color: var(--dempet); transition: border-color 0.25s, color 0.25s; }
.tema:hover { border-color: var(--linje-sterk); color: var(--tekst); }
.tema i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform 0.5s var(--ut); }
:root[data-tema='lys'] .tema i { transform: rotate(180deg); }

/* ---- det som kommer inn når det blir synlig (forside.js og konto.js setter .inn) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-vis] { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ut), transform 0.8s var(--ut); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-vis].inn { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}

/* Forsiden. Felles farger, skrift og knapper ligger i felles.css. */

/* ===================== Toppmenyen ===================== */
.topp { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.35s ease, border-color 0.35s ease; }
.topp--fast { background: var(--toppmeny); border-bottom-color: var(--linje); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.topp-inn { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topp-meny { display: flex; gap: 2px; margin-left: auto; }
.topp-meny a { padding: 10px 14px; border-radius: 999px; font: 500 0.94rem/1 var(--brod); color: var(--dempet); transition: color 0.2s, background-color 0.2s; }
.topp-meny a:hover { color: var(--tekst); background: var(--aksent-svak); }
.topp-valg { display: flex; align-items: center; gap: 10px; }
.topp-logginn { padding: 10px 12px; font: 500 0.94rem/1 var(--brod); color: var(--tekst); border-radius: 999px; }
.topp-logginn:hover { color: var(--aksent); }
/* er man logget inn i appen, står bruker-ID og tokens her (forside.js henter dem) */
.topp-konto { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linje-sterk); font: 500 0.82rem/1 var(--brod); color: var(--tekst); white-space: nowrap; transition: border-color 0.2s; }
.topp-konto[hidden] { display: none; }
.topp-konto:hover { border-color: var(--aksent); }
.topp-konto [data-konto-id] { color: var(--dempet); }
@media (max-width: 1399.98px) { .topp-konto [data-konto-id] { display: none; } }
.topp-meny-knapp { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linje); background: transparent; place-items: center; }
.topp-meny-knapp i, .topp-meny-knapp i::before { display: block; width: 16px; height: 1.5px; background: var(--tekst); border-radius: 2px; transition: transform 0.3s var(--ut); }
.topp-meny-knapp i { transform: translateY(-3px); }
.topp-meny-knapp i::before { content: ''; transform: translateY(6px); }
.topp-meny-knapp[aria-expanded='true'] i { transform: rotate(45deg); }
.topp-meny-knapp[aria-expanded='true'] i::before { transform: rotate(-90deg); }
.mobilmeny { display: grid; gap: 2px; padding: 8px var(--side) 20px; background: var(--bg-hev); border-bottom: 1px solid var(--linje); }
.mobilmeny[hidden] { display: none; }
.mobilmeny a { padding: 14px 4px; border-bottom: 1px solid var(--linje); font: 400 1.25rem/1.2 var(--display); }
.mobilmeny a:last-child { border-bottom: 0; }

.topp-registrer { color: var(--aksent); }
.topp-registrer[hidden] { display: none; }
@media (max-width: 1080px) {
  .topp-meny, .topp-logginn, .topp-konto { display: none; }
  .topp-meny-knapp { display: grid; }
}
@media (max-width: 480px) {
  .tema span { display: none; }
  .tema { padding: 0; width: 40px; justify-content: center; }
  .lookat { font-size: 1.4rem; }
}

/* ===================== 1. Toppen ===================== */
/* Stedet er tegnet som en sky av punkter (forside.js tegner dem fra bildet), uten boligen: der står bare omrisset.
 * Bildet av den ferdige boligen ligger over hele scenen, men vises bare innenfor telefonen (clip-path), som følger
 * pekeren eller fingeren. Alt i .helt-lag ligger i bildets egne mål (16:9, dekker flaten), så lagene treffer hverandre. */
.helt { position: relative; min-height: max(600px, calc(100dvh - 124px)); padding-top: 72px; display: grid; align-items: center; overflow: clip; isolation: isolate; }
.helt-inn { position: relative; z-index: 2; padding-block: clamp(20px, 3.5vh, 44px); pointer-events: none; }
.helt-tekst { display: grid; gap: clamp(20px, 2.6vh, 30px); justify-items: start; max-width: min(34rem, 43vw); pointer-events: auto; }
.helt-tekst .ingress { max-width: 27em; }
.helt-valg { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

.helt-flate { position: absolute; z-index: 1; inset: 0 0 0 30%; container-type: size; overflow: hidden; touch-action: pan-y; transform: translate3d(0, calc(var(--q, 0) * -70px), 0); --fx: 0.72; --fy: 0.5; --tone: 26cqw; --tone-topp: 7cqh; }
.helt-flate::before { content: ''; position: absolute; inset: 8% 4% 8% 24%; background: radial-gradient(closest-side, var(--lys-bak), transparent 74%); }
.helt-lag { position: absolute; --lw: max(100cqw, 100cqh * 16 / 9); --lh: max(100cqh, 100cqw * 9 / 16); --lx: calc((100cqw - var(--lw)) * var(--fx)); --ly: calc((100cqh - var(--lh)) * var(--fy)); left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); }
.helt-punkter, .helt-omriss, .helt-bilde { position: absolute; inset: 0; width: 100%; height: 100%; }
/* punktene og omrisset toner ut mot teksten til venstre, og mot toppmenyen og bunnen. Telefonen gjør det ikke */
.helt-punkter, .helt-omriss {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--lx) * -1), #000 calc(var(--lx) * -1 + var(--tone))), linear-gradient(180deg, transparent calc(var(--ly) * -1 + var(--tone-topp)), #000 calc(var(--ly) * -1 + var(--tone-topp) + 22cqh), #000 calc(var(--ly) * -1 + 84cqh), transparent calc(var(--ly) * -1 + 99cqh));
  mask-image: linear-gradient(90deg, transparent calc(var(--lx) * -1), #000 calc(var(--lx) * -1 + var(--tone))), linear-gradient(180deg, transparent calc(var(--ly) * -1 + var(--tone-topp)), #000 calc(var(--ly) * -1 + var(--tone-topp) + 22cqh), #000 calc(var(--ly) * -1 + 84cqh), transparent calc(var(--ly) * -1 + 99cqh));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* omrisset av boligen som ikke er bygget ennå */
.helt-omriss { overflow: visible; }
.omr-flate { fill: color-mix(in srgb, var(--aksent) 5%, transparent); }
.omr-kant, .omr-indre, .omr-peker { fill: none; stroke: var(--aksent); vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.omr-kant { stroke-width: 1.6; stroke-dasharray: 7 6; }
.omr-indre { stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.85; }
.omr-peker { stroke: var(--linje-sterk); stroke-width: 1; }
/* merket ligger under telefonen: gjennom den ser man boligen, ikke merket */
.helt .helt-merke { left: 50%; top: 21%; z-index: auto; transform: translateX(-50%); min-height: 28px; font-size: clamp(11px, 1.5cqw, 13px); }

/* bildet av den ferdige boligen: bare det som ligger innenfor telefonen, vises */
.helt-bilde { object-fit: cover; clip-path: inset(27% 35.5% 26% 51.5% round 26px); }
.helt-tlf { position: absolute; left: 51.5%; top: 27%; width: 13%; height: 47%; border-radius: var(--tr, 26px); overflow: hidden; pointer-events: none; box-shadow: 0 0 0 var(--tk, 7px) #05070b, 0 0 0 calc(var(--tk, 7px) + 1.5px) rgba(160, 190, 240, 0.34), 0 34px 80px rgba(0, 3, 10, 0.6); }
.helt-tlf::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(118deg, rgba(255, 255, 255, 0.13), transparent 26%); }
.helt-tlf-oy { position: absolute; left: 50%; top: 4.2%; width: 32%; height: 2.9%; min-height: 8px; transform: translateX(-50%); border-radius: 999px; background: #05070b; }
.helt-tlf-linje { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, #9ecbff 14%, #fff 50%, #9ecbff 86%, transparent); box-shadow: 0 0 22px 5px rgba(90, 160, 255, 0.55); }
.helt-tlf-status { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 9, 18, 0.62); color: #fff; font: 500 clamp(9px, calc(var(--tw, 200px) * 0.055), 11.5px)/1 var(--brod); letter-spacing: 0.02em; white-space: nowrap; }
.helt-tlf-status i { width: 6px; height: 6px; border-radius: 50%; background: #6aa5ff; }
.helt-hint, .helt-skann { display: none; }

/* med skript: telefonen står der forside.js sier (i piksler i bildets mål), og følger pekeren eller fingeren */
.helt--levende .helt-bilde { clip-path: inset(var(--it, 27%) var(--ir, 35.5%) var(--ib, 26%) var(--il, 51.5%) round var(--tr, 26px)); }
.helt--levende .helt-tlf { left: 0; top: 0; width: var(--tw, 13%); height: var(--th, 47%); transform: translate3d(var(--tx, 0), var(--ty, 0), 0); will-change: transform; }
.helt--levende .helt-bilde { will-change: clip-path; }
@media (hover: none), (pointer: coarse) {
  .helt--levende .helt-hint { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.9em; border-radius: 999px; border: 1px solid rgba(150, 180, 235, 0.3); background: rgba(6, 12, 23, 0.74); color: #fff; font: 500 12px/1 var(--brod); white-space: nowrap; pointer-events: none; transform: translate3d(calc(var(--tx, 0px) + var(--tw, 0px) / 2 - 50%), calc(var(--ty, 0px) + var(--th, 0px) + 18px), 0); transition: opacity 0.4s; }
  .helt.brukt .helt-hint { opacity: 0; }
}
/* til punktene er tegnet, står scenen tom, så den aldri begynner halvferdig */
.js .helt:not(.helt--klar) :is(.helt-punkter, .helt-omriss, .helt-merke, .helt-bilde, .helt-tlf, .helt-hint) { opacity: 0; }

@keyframes stig { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.helt-inn-1, .helt-inn-2, .helt-inn-3, .helt-inn-4 { animation: stig 0.9s var(--ut) both; }
.helt-inn-2 { animation-delay: 0.08s; }
.helt-inn-3 { animation-delay: 0.18s; }
.helt-inn-4 { animation-delay: 0.28s; }

/*
 * Slik kommer scenen (forside.js setter .helt--klar når punktene er tegnet; med redusert bevegelse står alt med en gang):
 *   0,0 s  en lysende strek går over stedet, og punktene kommer bak den, som i en skanning
 *   1,3 s  omrisset av boligen og merket «Ikke bygget ennå»
 *   1,7 s  telefonen, som viser boligen der omrisset står
 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes h-punkter { from { clip-path: inset(0 calc(100% + var(--lx)) 0 0); } to { clip-path: inset(0 calc(100% + var(--lx) - 100cqw) 0 0); } }
  @keyframes h-skann { 0% { opacity: 0; translate: 0 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; translate: 100cqw 0; } }
  @keyframes h-tone { from { opacity: 0; } }
  @keyframes h-tlf { from { opacity: 0; scale: 0.9; } }
  @keyframes h-linje { 0% { opacity: 0; translate: 0 0; } 4% { opacity: 1; } 34% { opacity: 1; } 40%, 100% { opacity: 0; translate: 0 var(--th, 400px); } }
  @keyframes h-puls { 50% { opacity: 0.35; } }
  .helt-skann { display: block; position: absolute; top: 6%; bottom: 6%; left: 0; width: 2px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--aksent) 22%, #fff 50%, var(--aksent) 78%, transparent); box-shadow: 0 0 42px 9px rgba(80, 150, 255, 0.42); }
  .helt--klar .helt-punkter { animation: h-punkter 1.7s linear both; }
  .helt--klar .helt-skann { animation: h-skann 1.7s linear both; }
  .helt--klar :is(.helt-omriss, .helt-merke) { animation: h-tone 0.9s 1.3s var(--ut) both; }
  .helt--klar .helt-bilde { animation: h-tone 0.6s 1.7s var(--ut) both; }
  .helt--klar .helt-tlf { animation: h-tlf 0.8s 1.7s var(--ut) both; }
  .helt--klar .helt-hint { animation: h-tone 0.6s 2.4s var(--ut) both; }
  .helt--klar .helt-tlf-linje { animation: h-linje 7s 3.2s linear infinite; }
  .helt--klar .helt-tlf-status i { animation: h-puls 2.2s ease-in-out infinite; }
}

/* smalt vindu: teksten først, og scenen under i full bredde */
@media (max-width: 899px) {
  .helt { min-height: 0; display: flex; flex-direction: column; }
  .helt-inn { order: 1; padding-block: 36px 18px; }
  .helt-tekst { max-width: none; }
  .helt-flate { order: 2; position: relative; inset: auto; width: 100%; aspect-ratio: 1 / 0.92; max-height: 72vh; transform: none; --fx: 0.62; --tone: 0cqw; --tone-topp: 0cqh; }
  .helt-flate::before { inset: 6% 2%; }
  .helt .helt-merke { top: 17%; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .helt-flate { aspect-ratio: 16 / 10; }
}

/* ===================== 2. De seks systemene ===================== */
.merker-rad { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; align-items: center; gap: 26px 28px; padding-block: 30px; border-block: 1px solid var(--linje); }
.merker-rad a { display: block; padding: 6px 2px; opacity: 0.86; transition: opacity 0.25s ease, transform 0.35s var(--ut); }
.merker-rad a:hover { opacity: 1; transform: translateY(-2px); }
.merker-rad a { position: relative; }
.merker-rad a::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 1.5px; background: var(--aksent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ut); }
.merker-rad img { height: calc(32px * var(--h, 1)); width: auto; }
@media (max-width: 1180px) { .merker-rad { grid-template-columns: repeat(3, auto); justify-content: space-between; } }
@media (max-width: 620px) { .merker-rad { grid-template-columns: repeat(2, auto); gap: 22px 18px; } .merker-rad img { height: calc(25px * var(--h, 1)); } }

/* ===================== 3. Produktgruppene: hvert produkt i sin ramme ===================== */
/*
 * Uten skript, i veldig små vinduer og med redusert bevegelse: rammene under hverandre med alt synlig.
 * Med .reise--levende (forside.js): rammen i midten er den man ruller eller drar i. Rullingen inne i den går gjennom
 * stegene, ett om gangen (--s0 … --s4 er 0 eller 1, og overgangene tegner resten), --vekk er veien ut, og siden står
 * stille imens. Scenene i rammene ligger i grupper.css.
 */
/* Feilsøking (lookat.no/?feilsok=1, js/feilsok.js): feltet nederst som sier hva som er logget og sendt. Feltet selv tar
 * ikke imot fingeren, bare knappene, så et sveip som begynner på teksten, går til siden som ellers. */
.feilsok { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); background: rgba(6, 12, 23, 0.86); color: #edf2fa; font: 500 12px/1.3 var(--tekstfont, system-ui), system-ui, sans-serif; pointer-events: none; }
.feilsok__tekst { flex: 1 1 150px; min-width: 0; }
.feilsok__knapp { flex: none; pointer-events: auto; min-height: 34px; padding: 0 12px; border: 1px solid rgba(150, 180, 235, 0.45); border-radius: 999px; background: #0e1929; color: #edf2fa; font: inherit; }
.feilsok__knapp[disabled] { opacity: 0.5; }
.feilsok-maal { position: fixed; left: 0; top: 0; width: 0; visibility: hidden; pointer-events: none; }

.reise { padding-top: clamp(88px, 13vh, 160px); }
.reise-intro { display: grid; gap: 22px; margin-bottom: clamp(40px, 7vh, 80px); }
.reise-hint[hidden] { display: none; }
.kun-finger { display: none; }
@media (hover: none), (pointer: coarse) { .kun-mus { display: none; } .kun-finger { display: inline; } }
.reise-grupper { display: grid; gap: clamp(28px, 5vh, 48px); }
.skinne { display: none; }
.reise-etter { margin-top: clamp(56px, 9vh, 110px); }

.gp { --pad: clamp(16px, 3.2vw, 46px); overflow: hidden; border-radius: var(--r-bilde); border: 1px solid var(--linje); background: linear-gradient(165deg, var(--flate), var(--bg-hev)); scroll-margin-top: 96px; }
.gp-rull { position: relative; }
.gp-scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; padding: var(--pad); }
.gp-lengde, .gp-snap, .gp-neste { display: none; }
.gp-tekst { display: grid; gap: 16px; justify-items: start; align-content: center; min-width: 0; }
.gp-logo { height: calc(34px * var(--h, 1)); width: auto; }
.gp-navn { height: auto; font: 300 2rem/1 var(--display); letter-spacing: 0.01em; }
.gp-navn b { font-weight: 400; color: var(--aksent); }
.gp-setninger { display: grid; gap: 12px; font-size: 1.02rem; }
.gp-setninger li { position: relative; padding-left: 28px; }
.gp-setninger li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 15px; height: 1.5px; background: var(--aksent); }
.gp-fot { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
/* ett merke per steg: det fylles mens man ruller gjennom steget */
.gp-prikker { display: none; gap: 5px; }
.gp-prikker i { position: relative; width: 22px; height: 3px; border-radius: 3px; background: var(--linje-sterk); overflow: hidden; }
.gp-prikker i.na { background: color-mix(in srgb, var(--aksent) 38%, var(--linje-sterk)); }
.gp-prikker i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--aksent); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform 0.2s linear; }
.gp-vis { display: grid; place-items: center; min-width: 0; }

/* alt synlig, bredt vindu: teksten og scenen ved siden av hverandre, på hver sin måte i hver ramme */
@media (min-width: 1100px) {
  .gp--venstre .gp-scene, .gp--kant .gp-scene, .gp--navi .gp-scene { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.5fr); gap: clamp(24px, 3.4vw, 56px); }
  .gp--hoyre .gp-scene { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.74fr); gap: clamp(24px, 3.4vw, 56px); }
  .gp--hoyre .gp-tekst { order: 2; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .gp-setninger { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}
@media (min-width: 700px) {
  .gp--topp .gp-setninger { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}

/* ---- levende: rammen i midten er den man ruller i ---- */
.reise--levende { --topp: 72px; --skjerm: 100vh; --gp-l: 200px; --gp-hold: 200px; --gp-ut: 100px;
  --gp-h: clamp(470px, min(calc(var(--skjerm) - var(--topp) - 36px), 175vw), 660px); }
@supports (height: 100svh) { .reise--levende { --skjerm: 100svh; } }
/* med fingeren går ett drag ett steg: rammen stopper på hvert steg (se .gp-snap) */
@media (pointer: coarse) { .reise--levende { --gp-l: 340px; --gp-hold: 0px; --gp-ut: 150px; } }
.reise--levende .reise-grupper { gap: max(18px, calc((var(--skjerm) - var(--topp) - var(--gp-h)) / 2 - 22px)); }
.reise--levende .gp { height: var(--gp-h); overflow: hidden; opacity: 0.42; transform: scale(0.965); transition: opacity 0.5s ease, transform 0.7s var(--ut), border-color 0.4s, box-shadow 0.4s; }
.reise--levende .gp.aktiv { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--aksent) 42%, transparent); box-shadow: var(--skygge); }
.reise--levende .gp-rull { height: 100%; overflow: hidden; scrollbar-width: none; }
.reise--levende .gp-rull::-webkit-scrollbar { display: none; }
.reise--levende .gp-rull:focus-visible { outline: 2px solid var(--aksent); outline-offset: -5px; border-radius: var(--r-bilde); }
/* bare den aktive rammen tar imot rullingen; over de andre ruller siden som vanlig */
.reise--levende .gp.aktiv .gp-rull { overflow-y: auto; overscroll-behavior: contain; }
@media (pointer: coarse) {
  .reise--levende .gp.aktiv .gp-rull { scroll-snap-type: y mandatory; }
  /* ett kast går ett steg: uten stopp her bar farten i et kast gjennom alle stegene og ut av rammen (målt på iPhone 11.10.2026) */
  .reise--levende .gp-snap { scroll-snap-align: start; scroll-snap-stop: always; }
  /* Siden selv: slipper man den mellom to rammer, legger den seg på den nærmeste med en gang, og et kast med fingeren
   * stanser på første ramme det møter (scroll-snap-stop), så ingen ramme rulles forbi. Rammen legges der forside.js
   * også legger den, midt i flaten under toppmenyen: derfor start-kanten og en marg regnet fra de samme tallene
   * (88px er scroll-padding-top på html i felles.css). forside.js setter klassen på html når rammene er levende. */
  html.rammer-snapper { scroll-snap-type: y proximity; }
  html.rammer-snapper .gp { scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: calc(var(--topp) + (var(--skjerm) - var(--topp) - var(--gp-h)) / 2 - 88px); }
  /* innledningen over rammene er også et sted siden kan hvile, så «Produktene» i menyen lander der og ikke på første ramme */
  html.rammer-snapper .reise-intro { scroll-snap-align: start; }
}
.reise--levende .gp-snap { display: block; position: absolute; left: 0; top: calc(var(--i) * var(--gp-l)); width: 1px; height: 1px; pointer-events: none; }
.reise--levende .gp-snap--slutt { top: calc((var(--antall) - 1) * var(--gp-l) + var(--gp-hold) + var(--gp-ut)); }
/* rullelengden: ett stykke per steg, et opphold på det siste, og veien ut (forside.js leser de samme tallene) */
.reise--levende .gp-lengde { display: block; height: calc((var(--antall) - 1) * var(--gp-l) + var(--gp-hold) + var(--gp-ut)); }
.reise--levende .gp-scene { position: sticky; top: 0; height: calc(var(--gp-h) - 2px); grid-template-rows: auto minmax(0, 1fr); gap: clamp(8px, 1.8vh, 18px); padding: clamp(14px, 2.6vh, 28px) var(--pad);
  transform-origin: 50% 42%; transform: scale(calc(1 - var(--vekk, 0) * 0.035)); opacity: calc(1 - var(--vekk, 0) * 0.5); transition: transform 0.4s var(--ut), opacity 0.4s; }
.reise--levende .gp-vis { container-type: size; width: 100%; height: 100%; }

/* teksten: navnet, overskriften og én setning om gangen. Ordene kommer ett etter ett */
.reise--levende .gp-tekst { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'logo fot' 'tittel tittel' 'setn setn'; gap: 6px 16px; align-content: start; align-items: center; justify-items: stretch; }
.reise--levende .gp-logo { grid-area: logo; justify-self: start; height: calc(26px * var(--h, 1)); }
.reise--levende .gp-navn { height: auto; font-size: 1.55rem; }
.reise--levende .gp-tekst h3 { grid-area: tittel; font-size: clamp(1.45rem, 2.3vw, 2.15rem); }
.reise--levende .gp-fot { grid-area: fot; margin: 0; gap: 12px; }
.reise--levende .gp-prikker { display: flex; }
.reise--levende .gp-setninger { grid-area: setn; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 4px; font: 300 clamp(1.12rem, 0.86rem + 1.1vw, 1.5rem)/1.3 var(--display); letter-spacing: -0.003em; }
.reise--levende .gp-setninger li { grid-area: 1 / 1; padding-left: 0; transition: opacity 0.2s; }
.reise--levende .gp-setninger li::before { display: none; }
.reise--levende .gp-setninger li.for { opacity: 0; }
.reise--levende .gp-setninger .o { display: inline-block; opacity: var(--s, 1); transform: translateY(calc((1 - var(--s, 1)) * 0.45em)); transition-property: opacity, transform; transition-duration: calc(0.16s + var(--s, 1) * 0.42s); transition-timing-function: var(--ut); transition-delay: calc(var(--s, 1) * (0.2s + var(--n, 0) * 26ms)); }
/* knappen som hopper til neste ramme (på telefon er det ingen plass til høyre å rulle forbi i) */
.reise--levende .gp-neste { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--linje-sterk); background: transparent; color: var(--dempet); transition: border-color 0.2s, color 0.2s; }
.reise--levende .gp-neste:hover { border-color: var(--aksent); color: var(--tekst); }
.reise--levende .gp-neste i { width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.reise--levende .gp:not(.aktiv) .gp-neste, .reise--levende .gp:not(.aktiv) .hs { pointer-events: none; }

/* skinnen til høyre: én strek per ramme, fylt etter hvor langt man er kommet */
.skinne button { width: 28px; height: 44px; padding: 0; border: 0; background: none; display: grid; justify-items: center; }
.skinne i { position: relative; display: block; width: 3px; height: 100%; border-radius: 3px; background: var(--linje-sterk); overflow: hidden; transition: width 0.2s; }
.skinne i::after { content: ''; position: absolute; inset: 0; background: var(--aksent); transform-origin: top; transform: scaleY(var(--f, 0)); transition: transform 0.3s var(--ut); }
.skinne button:hover i, .skinne button[aria-current='true'] i { width: 5px; }
@media (min-width: 700px) {
  .reise--levende .reise-flate { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: clamp(10px, 2vw, 28px); align-items: start; }
  .reise--levende .skinne { position: sticky; top: calc(var(--topp) + (var(--skjerm) - var(--topp)) / 2 - 122px); display: grid; gap: 6px; justify-items: center; }
}

/* telefon: navnet øverst, så overskriften, setningen og scenen, og stegene nederst i rammen */
@media (max-width: 699.98px) {
  .reise--levende { --gp-h: clamp(470px, min(calc(var(--skjerm) - var(--topp) - 36px), 142vw), 660px); }
  .reise--levende .gp-scene { grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: 'logo' 'tittel' 'setn' 'vis' 'fot'; gap: 6px; padding: 18px 16px 14px; }
  .reise--levende .gp-tekst { display: contents; }
  .reise--levende .gp-logo { height: calc(25px * var(--h, 1)); margin-bottom: 2px; }
  .reise--levende .gp-vis { grid-area: vis; margin-top: 6px; }
  .reise--levende .gp-fot { justify-content: space-between; }
  .reise--levende .gp-prikker { flex: 1; justify-content: center; }
}

/* bredt vindu: hver ramme har sin egen oppstilling */
@media (min-width: 1100px) {
  .reise--levende { --gp-h: clamp(500px, calc(var(--skjerm) - var(--topp) - 64px), 640px); }
  .reise--levende .gp-scene { grid-template-rows: minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); padding: clamp(18px, 3.4vh, 40px) var(--pad); }
  .reise--levende .gp-tekst { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'logo' 'tittel' 'setn' 'fot'; gap: 14px; align-content: center; }
  .reise--levende .gp-logo { height: calc(30px * var(--h, 1)); }
  .reise--levende .gp-setninger { margin-top: 2px; }
  .reise--levende .gp-fot { margin-top: 10px; justify-self: start; }
  /* Lookat PResentation: teksten i et bånd øverst, og scenen i full bredde under */
  .reise--levende .gp--topp .gp-scene { grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 2vh, 20px); }
  .reise--levende .gp--topp .gp-tekst { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: 'logo setn fot' 'tittel setn fot'; gap: 6px clamp(28px, 4vw, 64px); align-content: start; align-items: start; }
  .reise--levende .gp--topp .gp-setninger { align-self: start; max-width: 34em; margin-top: 0; }
  .reise--levende .gp--topp .gp-fot { margin: 0; align-self: start; }
  /* Lookat Studio: scenen går helt ut i hjørnet av rammen */
  .reise--levende .gp--kant .gp-vis { place-items: end; margin: 0 calc(var(--pad) * -1) calc(clamp(18px, 3.4vh, 40px) * -1) 0; width: auto; height: auto; align-self: stretch; }
}
@media (min-width: 1400px) and (min-height: 780px) {
  .reise--levende { --gp-h: clamp(620px, calc(var(--skjerm) - var(--topp) - 64px), 700px); }
}

/* Navi-punktet i hver verktøygruppe: Navi sier selv hva den bidrar med */
.gp-setninger li.fra-navi::before { display: none; }
.fra-navi-navn { display: inline-flex; align-items: center; gap: 0.45em; margin-right: 0.6em; padding: 0.15em 0.7em 0.15em 0.5em; border-radius: 999px; background: var(--aksent-svak); color: var(--aksent); font: 500 0.82rem/1.5 var(--brod); vertical-align: 0.12em; }
.gp-setninger li.fra-navi { padding-left: 0; }
.reise--levende .gp-setninger li.fra-navi { align-self: start; padding: 0.7em 0.9em; border-radius: 18px; border: 1px solid var(--linje-sterk); background: var(--flate-2); font-size: 0.86em; line-height: 1.36; opacity: var(--s, 1); transition: opacity 0.35s calc(var(--s, 1) * 0.15s); }
.reise--levende .gp-setninger li.fra-navi .fra-navi-navn { display: flex; width: max-content; margin: 0 0 0.45em; opacity: var(--s, 1); }

/* Navi snakker: setningen står i en snakkeboble som peker mot figuren */
.reise--levende .gp--navi .gp-setninger { padding: 0.75em 0.95em; border-radius: 18px; border: 1px solid var(--linje-sterk); background: var(--flate-2); font-size: clamp(1.02rem, 0.84rem + 0.8vw, 1.3rem); }
.reise--levende .gp--navi .gp-setninger::after { content: ''; position: absolute; left: 34px; bottom: -8px; width: 14px; height: 14px; border: solid var(--linje-sterk); border-width: 0 1px 1px 0; background: var(--flate-2); transform: rotate(45deg); }
.reise--levende .gp--navi .gp-setninger { position: relative; }
@media (min-width: 1100px) {
  .reise--levende .gp--navi .gp-setninger::after { left: auto; right: -8px; bottom: 26px; transform: rotate(-45deg); }
}

/* ===================== 4. Egne systemer ===================== */
.systemer { padding-top: clamp(96px, 15vh, 180px); }
.systemer h2 { margin-top: 18px; }
.systemer-rute { margin-top: clamp(36px, 6vh, 64px); display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.system { display: grid; gap: 22px; }
.system-bilde { margin: 0; height: clamp(260px, 35vw, 520px); border-radius: var(--r-bilde); overflow: hidden; }
.system-bilde img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ut); }
.system:hover .system-bilde img { transform: scale(1.035); }
.system-tekst { display: grid; gap: 10px; justify-items: start; max-width: 31em; }
.system-logo { height: 34px; width: auto; margin-bottom: 6px; }
@media (max-width: 899px) { .systemer-rute { grid-template-columns: 1fr; gap: 48px; } }

/* ===================== 5. Abonnementsgruppen ===================== */
.gruppe { padding-block: clamp(96px, 15vh, 180px); }
.gruppe-inn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.gruppe-tekst { display: grid; gap: 24px; justify-items: start; }
/* «Lag konto» med en setning under: skjules av forside.js når man alt er logget inn */
.gruppe-start { display: grid; gap: 10px; justify-items: start; margin: 0; max-width: 34em; }
.gruppe-start[hidden] { display: none; }
.gruppe-punkter { width: 100%; display: grid; border-top: 1px solid var(--linje); margin-block: 6px; }
.gruppe-punkter > div { display: grid; grid-template-columns: minmax(9em, 0.42fr) 1fr; gap: 6px 24px; padding-block: 16px; border-bottom: 1px solid var(--linje); }
.gruppe-punkter dt { font-weight: 500; }
.gruppe-punkter dd { color: var(--dempet); }
.gruppe-kort { margin: 0; display: grid; gap: 14px; position: relative; }
.gruppe-kort::before { content: ''; position: absolute; inset: -12% -10%; z-index: -1; background: radial-gradient(closest-side, var(--lys-bak), transparent 70%); }
.gkort { display: grid; gap: 22px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-flate); border: 1px solid var(--linje); background: var(--flate); box-shadow: var(--skygge); }
.gkort-topp { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.gkort-navn { font: 400 1.5rem/1.2 var(--display); }
.gkort-under { color: var(--dempet); font-size: 0.88rem; }
.gkort-produkter { display: flex; flex-wrap: wrap; gap: 8px; }
.gkort-produkter li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--linje); font: 500 0.86rem/1 var(--brod); }
.gkort-produkter img { width: 22px; height: 22px; }
.gkort-tall { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 20px; border-block: 1px solid var(--linje); }
.gkort-stort { font: 300 2.1rem/1.1 var(--display); }
.gkort-stort span { font: 400 0.88rem/1 var(--brod); color: var(--dempet); }
.gkort-ressurser { display: grid; gap: 10px; font-size: 0.93rem; }
.gkort-ressurser li { display: flex; justify-content: space-between; gap: 16px; }
.gkort-ressurser li span:last-child { color: var(--dempet); }
@media (max-width: 899px) {
  .gruppe-kort::before { inset: -8% 0; }
  .gruppe-inn { grid-template-columns: 1fr; }
  .gruppe-punkter > div { grid-template-columns: 1fr; }
}

/* ===================== 6. 3D-visualisering ===================== */
.viz { padding-bottom: clamp(96px, 15vh, 180px); }
.viz-topp { display: grid; gap: 22px; }
/* reelen: bildene ligger oppå hverandre, og det som vises, toner inn mens det trekker seg rolig ut */
.reel { margin-top: clamp(32px, 5vh, 56px); margin-bottom: 0; }
.reel-flate { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 150px); min-height: 220px; border-radius: var(--r-bilde); overflow: hidden; background: var(--flate-2); }
.reel-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 0s 1.2s; }
.reel-bilde.vises { opacity: 1; transform: none; transition: opacity 1.2s ease, transform 7s cubic-bezier(0.2, 0.6, 0.3, 1); }
.reel-styring { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); margin-top: 16px; }
html:not(.js) .reel-styring { display: none; }
.reel-valg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--linje-sterk); }
.reel-valg button { min-height: 38px; padding: 0 1.1em; border: 0; border-radius: 999px; background: transparent; color: var(--dempet); font: 500 0.92rem/1 var(--brod); transition: background-color 0.25s, color 0.25s; }
.reel-valg button:hover { color: var(--tekst); }
.reel-valg button[aria-pressed='true'] { background: var(--aksent-flate); color: var(--paa-aksent); }
.reel-merker { flex: 1; display: flex; gap: 6px; min-width: 0; }
.reel-merke { position: relative; flex: 1; max-width: 64px; height: 24px; padding: 0; border: 0; background: none; }
.reel-merke::before, .reel-merke::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--linje-sterk); }
.reel-merke::after { background: var(--aksent); transform-origin: left; transform: scaleX(0); }
.reel-merke.ferdig::after, .reel-merke.na::after { transform: scaleX(1); }
.reel.gaar .reel-merke.na::after { animation: reel-fyll var(--reel-tid, 5.2s) linear both; }
@keyframes reel-fyll { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reel-pause { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--linje-sterk); background: transparent; color: var(--tekst); display: grid; place-items: center; transition: border-color 0.2s, background-color 0.2s; }
.reel-pause:hover { border-color: var(--aksent); }
.reel-pause i { width: 10px; height: 12px; border: solid currentColor; border-width: 0 3px; }
.reel-pause[aria-pressed='true'] i { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
@media (prefers-reduced-motion: reduce) { .reel-pause { display: none; } }
.viz-under { margin-top: clamp(40px, 7vh, 72px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.viz-kontakt { display: grid; gap: 26px; justify-items: start; max-width: 30em; }
.viz-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.viz-punkter { display: grid; border-top: 1px solid var(--linje); }
.viz-punkter > div { display: grid; gap: 6px; padding-block: 18px; border-bottom: 1px solid var(--linje); }
.viz-punkter dt { font-weight: 500; }
.viz-punkter dd { color: var(--dempet); }
@media (max-width: 899px) { .viz-under { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .reel-flate { aspect-ratio: 4 / 3; }
  .reel-styring { flex-wrap: wrap; }
  .reel-merker { order: 3; flex-basis: 100%; }
  .reel-pause { margin-left: auto; }
}

/* ===================== 7. For hvem ===================== */
.hvem { padding-block: clamp(84px, 15vh, 190px); border-top: 1px solid var(--linje); }
.hvem-linjer { display: grid; font-size: clamp(2.1rem, 5.7vw, 5.1rem); line-height: 1.1; }
.hvem-linjer span { opacity: clamp(0.2, calc((var(--q, 1) - 0.1 - var(--n) * 0.2) * 5), 1); }
.hvem-under { margin-top: clamp(22px, 4vh, 40px); font: 400 1.15rem/1.4 var(--display); letter-spacing: 0.04em; }

/* ===================== 8. Kontakt ===================== */
.kontakt { padding-bottom: clamp(72px, 11vh, 130px); }
.kontakt-inn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(26px, 5vw, 76px); border-radius: var(--r-bilde); border: 1px solid var(--linje); background: var(--flate); }
.kontakt-tekst { display: grid; gap: 22px; justify-items: start; }
.kontakt-person { display: grid; gap: 4px; justify-items: start; font-style: normal; margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--linje); width: 100%; }
.kontakt-person .lenke { margin-top: 4px; }
.skjema { display: grid; gap: 18px; }
.skjema .knapp { justify-self: start; }
.skjema-svar { color: var(--ok); }
.skjema-svar.er-feil { color: var(--varsel); }
/* fellen mot roboter: et felt ingen mennesker ser eller når med tastaturet */
.felt--felle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.samtykke { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.samtykke input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--aksent); }
.samtykke label { font: 400 0.92rem/1.5 var(--brod); color: var(--dempet); }
.samtykke .felt-feil { grid-column: 2; margin: 0; }
@media (max-width: 899px) { .kontakt-inn { grid-template-columns: 1fr; } }

/* ===================== Bunnen ===================== */
.bunn { border-top: 1px solid var(--linje); padding-block: 40px calc(48px + env(safe-area-inset-bottom)); }
.bunn-inn { display: grid; grid-template-columns: 1fr auto; gap: 22px 40px; align-items: center; }
.bunn-merke { display: grid; gap: 12px; justify-items: start; }
.bunn-lenker { display: flex; flex-wrap: wrap; gap: 2px 14px; font: 500 0.94rem/1.4 var(--brod); }
.bunn-lenker a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; color: var(--dempet); }
.bunn-lenker a:hover { color: var(--tekst); }
.bunn-merknad { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--linje); }
@media (max-width: 700px) { .bunn-inn { grid-template-columns: 1fr; } }

/* ===================== Tekstsidene: personvernerklæringen og siden for adresser som ikke finnes ===================== */
.jus-topp { padding-block: 20px; border-bottom: 1px solid var(--linje); }
.jus-ark { display: grid; gap: 18px; max-width: 760px; padding-block: clamp(40px, 8vh, 96px) clamp(64px, 12vh, 140px); }
.jus-ark .ingress { margin-bottom: 14px; }
.jus-del { display: grid; gap: 10px; padding-top: 26px; border-top: 1px solid var(--linje); }
.jus-del p { max-width: 66ch; color: var(--dempet); line-height: 1.65; }
.jus-liste { max-width: 66ch; margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--dempet); line-height: 1.55; }
.jus-tilbake { padding-top: 26px; border-top: 1px solid var(--linje); }

/* Scenene i produktgruppene på forsiden. Markeringen lages av verktoy/bygg-grupper.py.
 *
 * Hver del av en scene hører til et steg: --s er 1 når steget har kommet (forside.js setter --s0 … --s4 på rammen),
 * og --d er forsinkelsen inne i steget. Uten skript er alle tallene 1, og scenen står ferdig.
 * --u er hvor mange tegneenheter en skjermpiksel er (forside.js måler), så strekene er like tykke i alle størrelser.
 */

/* ===================== Felles ===================== */
.sc { position: relative; width: 100%; max-width: 760px; margin-inline: auto; aspect-ratio: var(--sc-r, 10 / 7); container-type: inline-size; --u: 1; }
.reise--levende .sc { width: min(100cqw, calc(100cqh * var(--sc-r, 1.4286))); max-width: none; }
.sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc .l, .mini .l { fill: none; stroke: var(--aksent); stroke-width: calc(1.5 * var(--u)); stroke-linecap: round; stroke-linejoin: round; }
.sc .l2, .mini .l2 { fill: none; stroke: var(--linje-sterk); stroke-width: calc(1 * var(--u)); stroke-linecap: round; stroke-linejoin: round; }
.sc .pk, .mini .pk { fill: var(--aksent); }
/* kommer inn: toner (to), tegnes (tg), løftes på plass (lo), skrives (skriv) */
.to { opacity: var(--s, 1); transition: opacity 0.5s var(--ut) calc(var(--s, 1) * var(--d, 0s)); }
.tg { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--s, 1)); transition: stroke-dashoffset 0.8s var(--ut) calc(var(--s, 1) * var(--d, 0s)); }
.lo, .lo-svg { opacity: var(--s, 1); transform: translateY(calc((1 - var(--s, 1)) * 10px)); transition: opacity 0.5s var(--ut) calc(var(--s, 1) * var(--d, 0s)), transform 0.6s var(--ut) calc(var(--s, 1) * var(--d, 0s)); }
.skriv { display: inline-block; clip-path: inset(0 calc((1 - var(--s, 1)) * 100%) 0 0); transition: clip-path 0.8s steps(18) calc(var(--s, 1) * var(--d, 0s)); }

/* merker i scenene. De man kan holde over eller trykke på (hs), har et pluss */
.merke, .hs { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.5em; min-height: 30px; padding: 0 0.85em; border-radius: 999px; border: 1px solid var(--linje-sterk); background: color-mix(in srgb, var(--bg-hev) 88%, transparent); color: var(--tekst); font: 500 clamp(11px, 1.9cqw, 13.5px)/1.15 var(--brod); white-space: nowrap; }
.merke .ik, .hs .ik { flex: none; width: 1.4em; height: 1.4em; color: var(--aksent); }
.hs { padding-right: 0.45em; cursor: pointer; transition: opacity 0.5s var(--ut) calc(var(--s, 1) * var(--d, 0s)), transform 0.6s var(--ut) calc(var(--s, 1) * var(--d, 0s)), border-color 0.2s, background-color 0.2s; }
.hs:hover, .hs.apen { border-color: var(--aksent); background: var(--flate-2); }
.hs-pluss { position: relative; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--aksent-svak); transition: transform 0.3s var(--ut), background-color 0.2s; }
.hs-pluss::before, .hs-pluss::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.62em; height: 1.5px; margin: -0.75px 0 0 -0.31em; border-radius: 2px; background: var(--aksent); }
.hs-pluss::after { transform: rotate(90deg); }
.hs.apen .hs-pluss { transform: rotate(45deg); }
@media (pointer: coarse) { .hs { min-height: 36px; } }

/* det Navi sier i en scene, når gruppens Navi-punkt kommer */
.navi-mini { flex: none; width: auto; height: 1.5em; }
.navi-sier { min-height: 34px; padding: 0 1em 0 0.7em; gap: 0.6em; border-color: color-mix(in srgb, var(--aksent) 55%, transparent); background: var(--flate-2); font-size: clamp(11.5px, 2cqw, 14.5px); }
.navi-sier--design { left: 2%; top: 14.5%; }
.navi-sier--ar { left: 40.5%; top: 84%; }
.navi-sier--pres { left: 2%; top: 17.5%; }
.navi-sier--studio { left: var(--navi-x); top: var(--navi-y); }

/* forklaringen som åpnes fra et merke: en liten animasjon og to linjer tekst */
.lupe { position: absolute; z-index: 6; width: min(47%, 300px); min-width: 232px; padding: 10px; border-radius: 16px; border: 1px solid var(--linje-sterk); background: var(--flate); box-shadow: var(--skygge); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transform-origin: 50% 100%; transition: opacity 0.22s, transform 0.3s var(--ut), visibility 0s 0.3s; pointer-events: none; --u: 1; }
.lupe.apen { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lupe-mini { border-radius: 10px; overflow: hidden; background: var(--bg-hev); }
.mini { display: block; width: 100%; height: auto; }
.lupe p { margin: 10px 4px 4px; font: 400 0.84rem/1.45 var(--brod); color: var(--dempet); white-space: normal; }
.lupe b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--tekst); }
.sc--design .lupe { left: 2%; top: 3%; }
.sc--design .lupe--plan, .sc--design .lupe--bilde { left: auto; right: 2%; } /* ikke oppå merket man holder over */
.sc--ar .lupe { right: 3%; bottom: 4%; }
.sc--pres .lupe { left: 2%; bottom: 3%; }
.sc--studio .lupe { left: 38%; top: 12%; }
@container (max-width: 420px) {
  .hs { gap: 0.35em; padding: 0 0.4em 0 0.6em; }
  .hs > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .navi-sier { display: none; }
}
@container (max-width: 520px) {
  .lupe, .sc--design .lupe, .sc--ar .lupe, .sc--pres .lupe, .sc--studio .lupe { left: 0; right: 0; top: auto; bottom: 0; width: auto; min-width: 0; display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 4px; }
  .lupe p { margin: 2px 4px 2px 8px; font-size: 0.8rem; }
}

/* en telefon (Lookat AR og Lookat Studio) */
.tlf { position: absolute; padding: max(2px, 0.6cqw); border-radius: 3.6cqw; border: max(1.5px, 0.4cqw) solid color-mix(in srgb, var(--tekst) 30%, var(--bg)); background: var(--bg); box-shadow: 0 2cqw 5cqw rgba(1, 5, 14, 0.35); }
.tlf-skjerm { position: relative; width: 100%; height: 100%; border-radius: 2.7cqw; overflow: hidden; background: var(--bg-hev); }

/* ===================== Lookat DEsign: fra ark til modell ===================== */
.d-rute { opacity: 0.55; }
.d-ark { fill: color-mix(in srgb, var(--aksent) 5%, var(--flate-2)); stroke: var(--linje-sterk); stroke-width: calc(1 * var(--u)); }
.d-foto { fill: color-mix(in srgb, var(--aksent) 26%, var(--flate-2)); }
.sc .d-tynn { stroke-width: calc(1 * var(--u)); opacity: 0.8; }
.d-tynn.tg { opacity: 0.8; }
.d-tomt { stroke-dasharray: calc(5 * var(--u)) calc(7 * var(--u)); }
.d-tomt.to { opacity: calc(var(--s, 1) * 0.6); }
.d-plate { fill: color-mix(in srgb, var(--aksent) 9%, transparent); opacity: var(--s, 1); transform: translateY(calc(var(--s, 1) * var(--loft))); transition: transform 0.9s var(--ut) calc(var(--s, 1) * var(--d, 0s)), opacity 0.25s linear calc(var(--s, 1) * var(--d, 0s)); }
.d-flate--x { fill: color-mix(in srgb, var(--aksent) 32%, var(--flate)); }
.d-flate--y { fill: color-mix(in srgb, var(--aksent) 18%, var(--flate)); }
.d-flate--tak { fill: color-mix(in srgb, var(--aksent) 9%, var(--flate-2)); }
.d-flate.to { opacity: calc(var(--s, 1) * 0.94); }
.sc .d-vindu { stroke: color-mix(in srgb, var(--tekst) 62%, transparent); stroke-width: calc(1 * var(--u)); opacity: 0.55; }
.hs--plan { left: 1%; top: 49%; }
.hs--bilde { left: 3%; top: 79%; }
.hs--tekst { right: 2%; top: 79%; }
.hs--sted { right: 1%; top: 36%; }
.d-beskjed { position: absolute; left: 2%; top: 4%; z-index: 2; display: inline-flex; align-items: center; gap: 0.6em; min-height: 34px; padding: 0 1.1em 0 0.85em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--aksent) 55%, transparent); background: var(--flate-2); font: 500 clamp(11.5px, 2cqw, 14.5px)/1 var(--brod); white-space: nowrap; }
.d-beskjed .ik { width: 1.3em; height: 1.3em; color: var(--aksent); }
.d-resultat { position: absolute; right: 2%; top: 3%; z-index: 2; width: 27%; margin: 0; }
.d-resultat img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--linje-sterk); }
.d-resultat figcaption { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 7px; font: 500 clamp(10px, 1.7cqw, 12.5px)/1 var(--brod); color: var(--dempet); }
.d-resultat figcaption span { display: inline-flex; align-items: center; gap: 0.3em; }
.d-resultat .ik { width: 1.3em; height: 1.3em; color: var(--aksent); }
@container (max-width: 520px) {
  .d-resultat { width: 37%; }
  .hs--plan { top: 46%; }
  .hs--sted { top: 48%; }
}

/* ===================== Lookat AR: telefonen og stedet sett ovenfra ===================== */
.ar-panel { fill: var(--bg-hev); stroke: var(--linje); stroke-width: calc(1 * var(--u)); }
.ar-kart { transform-origin: 408px 366px; transform: scale(calc(1 - var(--s2, 1) * 0.3)); transition: transform 1s var(--ut) calc(var(--s2, 1) * 0.55s); }
.ar-rute { opacity: 0.45; }
.ar-ukjent { stroke-dasharray: calc(3 * var(--u)) calc(6 * var(--u)); }
.sc .ar-mobel { stroke-width: calc(1 * var(--u)); opacity: 0.75; }
.ar-person { offset-rotate: auto; offset-distance: 100%; opacity: var(--s1, 1); transition: opacity 0.4s; }
.ar-kropp { fill: var(--aksent); stroke: var(--bg-hev); stroke-width: calc(2 * var(--u)); }
.ar-mobil { fill: #fff; }
.ar-pakke { offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
.ar-sky { fill: color-mix(in srgb, var(--aksent) 12%, var(--bg-hev)); }
.ar-tlf { left: 4%; top: 15%; width: 26.5%; height: 80%; }
.tlf-adr { position: absolute; left: 8%; right: 8%; top: 3.2%; height: 8%; display: grid; place-items: center; border-radius: 999px; background: var(--flate-2); font: 500 clamp(8px, 1.75cqw, 12px)/1 var(--brod); color: var(--dempet); }
.ar-kamera { position: absolute; left: 0; top: 14%; width: 100%; height: 72%; --u: 0.42; }
.ar-sikte { opacity: var(--s1, 1); transition: opacity 0.4s; }
.ar-knapp { position: absolute; left: 11%; right: 11%; top: 44%; height: 11.5%; display: grid; place-items: center; border-radius: 999px; background: var(--aksent-flate); color: #fff; font: 500 clamp(8.5px, 1.85cqw, 12.5px)/1 var(--brod); opacity: calc(1 - var(--s1, 1)); transform: scale(calc(1 - var(--s1, 1) * 0.08)); transition: opacity 0.3s, transform 0.3s; }
.ar-melding { position: absolute; left: 0; right: 0; bottom: 4.4%; text-align: center; font: 500 clamp(8.5px, 1.85cqw, 12.5px)/1 var(--brod); transition: opacity 0.35s; }
.ar-melding--skanner { opacity: calc(var(--s1, 1) * (1 - var(--s2, 1))); color: var(--dempet); }
.ar-melding--lagret { opacity: var(--s2, 1); color: var(--aksent); transition-delay: calc(var(--s2, 1) * 1.4s); }
.hs--app { left: 4%; top: 3.5%; }
.ar-lagret { left: 70.5%; top: 29.5%; min-height: 24px; padding: 0 0.7em; border-color: color-mix(in srgb, var(--aksent) 50%, transparent); color: var(--aksent); }
.ar-produkt { position: absolute; top: 21.9%; z-index: 2; display: grid; justify-items: center; gap: 0.35em; font: 500 clamp(9.5px, 1.6cqw, 12px)/1 var(--brod); color: var(--tekst); transform: translate(-50%, calc(-50% + (1 - var(--s, 1)) * 10px)); }
.ar-produkt .ik { width: clamp(22px, 5.4cqw, 38px); height: clamp(22px, 5.4cqw, 38px); }
.ar-produkt--design { left: 50%; }
.ar-produkt--pres { left: 86%; }

/* ===================== Lookat PResentation: på stedet, på bordet, og delt ===================== */
/* på telefon fyller scenen bredden, og figuren kuttes i kanten av den (ellers går den ned til kanten av rammen) */
@container (max-width: 520px) {
  .sc--pres .sc-svg { overflow: hidden; }
  .sc--pres .p-fra { top: calc(3% + 42px); } /* under valget mellom stedet og bordet */
}
.p-alt { transform: translateX(calc(var(--s3, 1) * -62px)); transition: transform 0.9s var(--ut); }
.p-sted { transform-origin: 300px 250px; transform: translateY(calc(var(--s2, 1) * -4px)) scale(calc(1 - var(--s2, 1) * 0.68)); transition: transform 1.1s var(--ut); }
.p-modell { transform: translateY(calc((1 - var(--s1, 1)) * -30px)); transition: transform 0.9s var(--ut); }
.p-skygge { fill: var(--aksent); opacity: calc(0.05 + (1 - var(--s1, 1)) * 0.07); transition: opacity 0.9s; }
.p-liten { fill: var(--tekst); }
.sc .p-litenkropp { stroke: var(--tekst); stroke-width: calc(2 * var(--u)); }
.p-sikte { opacity: calc(var(--s1, 1) * (1 - var(--s2, 1))); transition: opacity 0.4s calc(var(--s1, 1) * (1 - var(--s2, 1)) * 0.6s); }
.sc .p-maal { stroke-width: calc(1 * var(--u)); }
.p-bord { opacity: var(--s2, 1); transform: translateY(calc((1 - var(--s2, 1)) * 24px)); transition: opacity 0.5s var(--ut) calc(var(--s2, 1) * 0.35s), transform 0.8s var(--ut) calc(var(--s2, 1) * 0.35s); }
.p-bordplate { fill: color-mix(in srgb, var(--aksent) 8%, var(--flate-2)); stroke: var(--aksent); stroke-width: calc(1.5 * var(--u)); stroke-linejoin: round; }
.p-bordkant { fill: color-mix(in srgb, var(--aksent) 24%, var(--flate)); stroke: var(--aksent); stroke-width: calc(1.5 * var(--u)); stroke-linejoin: round; }
.p-bane { stroke-dasharray: calc(3 * var(--u)) calc(7 * var(--u)); opacity: calc(var(--s2, 1) * 0.85); transition: opacity 0.5s calc(var(--s2, 1) * 0.9s); }
.p-runde { offset-rotate: 0deg; offset-distance: 12%; opacity: var(--s2, 1); transition: opacity 0.5s calc(var(--s2, 1) * 0.9s); }
.p-person { opacity: var(--s2, 1); transform: translateX(calc((1 - var(--s2, 1)) * -40px)); transition: opacity 0.5s var(--ut) calc(var(--s2, 1) * 0.55s), transform 0.8s var(--ut) calc(var(--s2, 1) * 0.55s); }
.p-hode, .p-kropp { fill: color-mix(in srgb, var(--aksent) 12%, var(--flate)); stroke: var(--aksent); stroke-width: calc(1.5 * var(--u)); }
.p-mobil { fill: var(--flate-2); stroke: var(--aksent); stroke-width: calc(1.5 * var(--u)); }
.p-blikk { stroke-dasharray: calc(2 * var(--u)) calc(5 * var(--u)); }
.p-qrflate { fill: #fff; }
.sc .p-qr .pk { fill: #0b1830; }
.p-valg { display: none; }
.reise--levende .p-valg { position: absolute; left: 2%; top: 3%; z-index: 2; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--linje-sterk); background: color-mix(in srgb, var(--bg-hev) 88%, transparent); }
.p-valg button { min-height: 28px; padding: 0 0.95em; border: 0; border-radius: 999px; font: 500 clamp(10.5px, 1.8cqw, 13px)/1 var(--brod); transition: background-color 0.35s, color 0.35s; }
.p-valg-sted { --pa: calc(var(--s1, 1) * (1 - var(--s2, 1)) * 100%); }
.p-valg-bord { --pa: calc(var(--s2, 1) * 100%); }
.p-valg button { background: color-mix(in srgb, var(--aksent-flate) var(--pa), transparent); color: color-mix(in srgb, var(--paa-aksent) var(--pa), var(--dempet)); }
.p-fra { left: 50%; top: 5%; transform: translateX(-50%); opacity: calc(var(--s0, 1) * (1 - var(--s1, 1))); transition: opacity 0.4s calc(var(--s0, 1) * (1 - var(--s1, 1)) * 0.3s); }
.p-skala { min-height: 24px; padding: 0 0.7em; border-color: color-mix(in srgb, var(--aksent) 50%, transparent); color: var(--aksent); transition: opacity 0.4s, transform 0.9s var(--ut); }
.p-skala--sted { left: 70%; top: 46%; opacity: calc(var(--s1, 1) * (1 - var(--s2, 1))); transition-delay: calc(var(--s1, 1) * (1 - var(--s2, 1)) * 0.8s); }
.p-skala--bord { left: 56%; top: 38%; opacity: var(--s2, 1); transform: translateX(calc(var(--s3, 1) * -10.33cqw)); transition-delay: calc(var(--s2, 1) * 1s), 0s; }
.hs--qr { right: 2.5%; top: 52%; }

/* ===================== Lookat Studio: nettsiden setter seg sammen ===================== */
/* Scenen er høyere enn de andre, så telefonen får en størrelse det går an å rulle i. Radene på nettsiden har hver sin
 * plass (--r) og høyde (--h), og --st-k er hvor mye siden trekker seg sammen når telefonen kommer. Nettsiden klippes
 * (st-klipp) til høyre og nederst, der den går ut av scenen. Telefonen ligger utenfor klippet, så skyggen dens er hel. */
.sc--studio { --sc-r: 1.18; --st-k: 0.84; --tlf-h: 73cqw; --r1: 11.5cqw; --h1: 27cqw; --r2: 41.5cqw; --h2: 24cqw; --r3: 68.5cqw; --h3: 11cqw; --ark-y: 58cqw; --navi-x: 41.2cqw; --navi-y: 72cqw; }
@media (max-width: 699.98px) {
  .sc--studio { --sc-r: 1; --st-k: 0.78; --tlf-h: 84cqw; --h1: 32cqw; --r2: 46.5cqw; --h2: 28cqw; --r3: 77.5cqw; --h3: 13cqw; --ark-y: 66cqw; --navi-x: 45.4cqw; --navi-y: 78cqw; }
}
.st-klipp { position: absolute; inset: -8cqw 0 0 -8cqw; overflow: hidden; }
.st-side { position: absolute; inset: 8cqw 0 0 8cqw; transform-origin: 100% 7cqw; transform: scale(calc(1 - var(--s3, 1) * (1 - var(--st-k)))); transition: transform 1s var(--ut) calc(var(--s3, 1) * 0.1s); }
.st-vindu { position: absolute; left: 27cqw; top: 3cqw; width: 75cqw; height: 130cqw; border-radius: 2.4cqw 0 0 0; border: solid var(--linje-sterk); border-width: 1px 0 0 1px; background: var(--bg-hev); }
.st-linje { display: flex; align-items: center; gap: 2cqw; height: 6.4cqw; min-height: 26px; padding: 0 4.6cqw 0 2.4cqw; border-bottom: 1px solid var(--linje); }
.st-adr { flex: 0 1 36cqw; display: flex; align-items: center; height: 3.9cqw; min-height: 18px; padding: 0 1.6cqw; border-radius: 999px; background: var(--flate-2); font: 500 clamp(10px, 1.9cqw, 13.5px)/1 var(--brod); color: var(--tekst); }
.st-publisert { margin-left: auto; display: inline-flex; align-items: center; min-height: 18px; height: 3.9cqw; padding: 0 1.5cqw; border-radius: 999px; background: var(--aksent-flate); color: #fff; font: 500 clamp(9.5px, 1.75cqw, 13px)/1 var(--brod); }
.st-felt { position: absolute; border-radius: 1.4cqw; border: 1px dashed var(--linje-sterk); }
.st-felt--topp, .st-bilde--topp { left: 30cqw; top: var(--r1); width: 39cqw; height: var(--h1); }
.st-felt--b1, .st-bilde--b1 { left: 30cqw; top: var(--r2); width: 18.5cqw; height: var(--h2); }
.st-felt--b2, .st-bilde--b2 { left: 50.5cqw; top: var(--r2); width: 18.5cqw; height: var(--h2); }
.st-felt--ar, .st-ar { left: 71cqw; top: var(--r1); width: 26.5cqw; height: var(--h1); }
/* bildene ligger på plass på siden, og er skjøvet ut til venstre (løse på bordet) før siden settes sammen */
.st-bilde { position: absolute; object-fit: cover; border-radius: 1.4cqw; transform-origin: 0 0; transform: translate(calc((1 - var(--s, 1)) * var(--dx)), calc((1 - var(--s, 1)) * var(--dy))) rotate(calc((1 - var(--s, 1)) * var(--rot))) scale(calc(1 - (1 - var(--s, 1)) * var(--k))); transition: transform 1.1s var(--ut) var(--vent, 0s); }
.st-bilde--topp { --dx: -27cqw; --dy: -6.5cqw; --rot: -5deg; --k: 0.5; }
.st-bilde--b1 { --dx: -17.5cqw; --dy: -18cqw; --rot: 6deg; --k: 0.38; --vent: 0.12s; }
.st-bilde--b2 { --dx: -48.5cqw; --dy: -4cqw; --rot: -4deg; --k: 0.38; --vent: 0.24s; }
.st-ark { position: absolute; left: 10cqw; top: var(--ark-y); width: 9.5cqw; height: 12cqw; padding: 1.4cqw 1.2cqw; display: grid; align-content: start; gap: 1cqw; border-radius: 1cqw; border: 1px solid var(--linje-sterk); background: var(--flate-2); opacity: calc(1 - var(--s1, 1)); transform: rotate(4deg) translateX(calc(var(--s1, 1) * 14cqw)); transition: opacity 0.45s, transform 0.9s var(--ut); }
.st-ark i { height: max(1.5px, 0.5cqw); border-radius: 2px; background: var(--linje-sterk); }
.st-ark i:first-child { width: 60%; background: var(--aksent); }
.st-ark i:last-child { width: 70%; }
.st-tekst { position: absolute; left: 71cqw; top: calc(var(--r2) + 1cqw); width: 26.5cqw; display: grid; gap: 1.5cqw; }
.st-tekst b { margin-bottom: 0.4cqw; font: 300 clamp(12px, 2.9cqw, 21px)/1.1 var(--display); opacity: var(--s1, 1); transition: opacity 0.5s var(--ut) calc(var(--s1, 1) * 0.5s); }
.st-tekst i { height: max(1.5px, 0.7cqw); border-radius: 3px; background: var(--linje-sterk); transform-origin: 0 50%; transform: scaleX(var(--s1, 1)); transition: transform 0.7s var(--ut) calc(var(--s1, 1) * (0.6s + var(--n, 0) * 0.08s)); }
.st-tekst i:nth-of-type(2) { width: 92%; --n: 1; }
.st-tekst i:nth-of-type(3) { width: 58%; --n: 2; }
/* nøkkeltallene fra salgsoppgaven, i en rad nederst på siden */
.st-tall { position: absolute; left: 30cqw; top: var(--r3); width: 67.5cqw; height: var(--h3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.st-tall span { display: grid; align-content: center; gap: 0.7cqw; padding: 0 1.8cqw; border-radius: 1.4cqw; border: 1px solid var(--linje); background: color-mix(in srgb, var(--flate-2) 60%, transparent); }
.st-tall b { font: 300 clamp(11px, 2.9cqw, 21px)/1 var(--display); color: var(--tekst); white-space: nowrap; }
.st-tall i { font: 400 clamp(8px, 1.6cqw, 12px)/1.1 var(--brod); font-style: normal; color: var(--dempet); white-space: nowrap; }
.hs--pdf { left: 2.5cqw; bottom: 1.4cqw; }
.st-ar { position: absolute; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 0.6cqw; padding: 1.4cqw 1.4cqw 1.8cqw; border-radius: 1.4cqw; border: 1px solid color-mix(in srgb, var(--aksent) 45%, transparent); background: color-mix(in srgb, var(--aksent) 8%, var(--flate)); }
.st-modell { width: 86%; height: 100%; --u: 0.5; }
.st-ar-knapp { display: inline-flex; align-items: center; min-height: 18px; height: 4.4cqw; padding: 0 2cqw; border-radius: 999px; background: var(--aksent-flate); color: #fff; font: 500 clamp(9.5px, 1.9cqw, 13.5px)/1 var(--brod); }
/* telefonen man kan rulle i: et opptak av en side laget i Lookat Studio. Bildet følger hvor langt man har rullet inni.
 * Den er så høy som scenen gir plass til over merket «Salgsoppgave», og bredden følger av formen på skjermen. */
.st-tlf { left: 1.5cqw; top: 3cqw; height: min(var(--tlf-h), calc(100cqw / var(--sc-r) - 5.5cqw - 40px)); aspect-ratio: 34 / 71.25; pointer-events: none; opacity: var(--s3, 1); transform: translateY(calc((1 - var(--s3, 1)) * 10cqw)); transition: opacity 0.5s var(--ut) calc(var(--s3, 1) * 0.35s), transform 1s var(--ut) calc(var(--s3, 1) * 0.3s); }
.gp:not([data-steg]) .st-tlf, .gp[data-steg='3'] .st-tlf, .gp[data-steg='4'] .st-tlf { pointer-events: auto; }
.vindu-rull { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.vindu-rull::-webkit-scrollbar { display: none; }
.vindu-rull:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.vindu-skjerm { position: sticky; top: 0; width: 100%; height: 100%; }
.vindu-plakat, .vindu-lerret { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vindu-lerret { opacity: 0; }
.har-bilder .vindu-lerret { opacity: 1; }
/* rullelengden inni telefonen er sidens egen: like mange skjermhøyder som den ekte siden er lang */
.vindu-lengde { height: calc((var(--vindu-sider, 6) - 1) * 100%); }
.vindu-hint { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 22px; height: 4.2cqw; padding: 0 1.8cqw; border-radius: 999px; background: rgba(6, 12, 23, 0.72); color: #fff; font: 500 clamp(9.5px, 1.75cqw, 13px)/1 var(--brod); white-space: nowrap; pointer-events: none; transition: opacity 0.4s; }
.st-tlf.brukt .vindu-hint { opacity: 0; }

/* ===================== Lookat Navi: figuren og kortene den viser deg ===================== */
.navi-plass { position: absolute; left: 1cqw; bottom: 1cqw; width: 34cqw; }
.navi-figur { display: block; width: 100%; height: auto; overflow: visible; }
.navi-figur [data-navi-kropp] { transform-origin: 300px 460px; }
.navi-figur [data-navi-perle] { transform-origin: 300px 386px; }
.navi-figur [data-navi-skygge] { transform-origin: 300px 491px; }
.navi-varsel { position: absolute; left: 73%; top: 11%; width: 4.6cqw; height: 4.6cqw; min-width: 20px; min-height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--aksent-flate); color: #fff; font: 500 clamp(11px, 2.4cqw, 16px)/1 var(--brod); font-style: normal; opacity: calc(var(--s3, 0) * (1 - var(--s4, 0))); transform: scale(calc(0.5 + var(--s3, 0) * (1 - var(--s4, 0)) * 0.5)); transition: opacity 0.3s calc(var(--s3, 0) * (1 - var(--s4, 0)) * 0.5s), transform 0.5s var(--ut) calc(var(--s3, 0) * (1 - var(--s4, 0)) * 0.5s); }
.nk-bunke { position: absolute; left: 39cqw; top: 9cqw; width: 58cqw; height: 43cqw; }
.nk { position: absolute; inset: 0; display: grid; align-content: start; gap: 1.5cqw; padding: 3cqw 3.2cqw 3.2cqw; border-radius: clamp(12px, 2.6cqw, 20px); border: 1px solid var(--linje-sterk); background: var(--flate-2); box-shadow: 0 2cqw 5cqw rgba(1, 5, 14, 0.22); transform-origin: 50% 0;
  opacity: calc(var(--s, 1) * clamp(0, 1 - var(--dyp, 0) * 0.42, 1)); transform: translateY(calc((1 - var(--s, 1)) * 7cqw - var(--dyp, 0) * 2.7cqw)) scale(calc(1 - var(--dyp, 0) * 0.055)); transition: opacity 0.5s var(--ut), transform 0.7s var(--ut); }
.nk h4 { display: flex; align-items: center; gap: 0.5em; margin: 0; font: 500 clamp(10.5px, 1.9cqw, 13.5px)/1 var(--brod); letter-spacing: 0.02em; color: var(--dempet); }
.nk h4 .ik { width: 1.5em; height: 1.5em; color: var(--aksent); }
.nk p { margin: 0; font: 400 clamp(11.5px, 2.15cqw, 15.5px)/1.42 var(--brod); }
.nk .nk-liten { font-size: clamp(10.5px, 1.8cqw, 13px); color: var(--dempet); }
.nk .nk-stor { font: 300 clamp(20px, 5.4cqw, 38px)/1 var(--display); font-variant-numeric: tabular-nums; }
.nk .nk-stor span { font: 400 clamp(10.5px, 1.9cqw, 13.5px)/1 var(--brod); color: var(--dempet); }
.nk .nk-sitat { padding: 1.4cqw 1.8cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw 0.3cqw; background: var(--bg-hev); }
.nk-vei { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; margin: 0.4cqw 0; padding: 0; list-style: none; }
.nk-vei li { display: grid; justify-items: center; gap: 0.6cqw; padding: 1.4cqw 0.4cqw; border-radius: 1.4cqw; border: 1px solid transparent; font: 500 clamp(8.5px, 1.5cqw, 11.5px)/1 var(--brod); color: var(--dempet); opacity: 0.55; }
.nk-vei li.valgt { border-color: color-mix(in srgb, var(--aksent) 55%, transparent); background: var(--aksent-svak); color: var(--tekst); opacity: 1; }
.nk-vei .ik { width: clamp(18px, 4.6cqw, 32px); height: clamp(18px, 4.6cqw, 32px); }
.nk-studio { display: grid; place-items: center; height: clamp(18px, 4.6cqw, 32px); font: 400 clamp(10px, 2.1cqw, 15px)/1 var(--display); color: var(--aksent); }
.nk-rad { display: flex; justify-content: space-between; gap: 1em; padding-top: 1.3cqw; border-top: 1px solid var(--linje); color: var(--dempet); }
.nk p.nk-rad { font-size: clamp(10.5px, 1.9cqw, 13.5px); }
.nk-rad b { font-weight: 500; color: var(--tekst); white-space: nowrap; }
.nk-valg { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.nk p.nk-valg { font-size: clamp(10px, 1.75cqw, 12.5px); font-weight: 500; }
.nk-valg span { display: inline-flex; align-items: center; min-height: 22px; height: 4.6cqw; padding: 0 1.8cqw; border-radius: 999px; border: 1px solid var(--linje-sterk); color: var(--dempet); }
.nk-valg .nk-ja { border-color: transparent; background: var(--aksent-flate); color: #fff; }
.nk-dager { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqw; }
.nk-dager i { height: 1.1cqw; min-height: 3px; border-radius: 3px; background: var(--linje-sterk); }
.nk-dager i.na { background: var(--aksent); }
.nk-kurve { display: block; width: 100%; height: 9cqw; overflow: visible; --u: 1.2; }
.nk-kurve-flate { fill: var(--aksent-svak); }
.nk .maaler { margin-top: -0.4cqw; }
@container (max-width: 520px) {
  .navi-plass { left: -1cqw; width: 30cqw; }
  .nk-bunke { left: 31cqw; top: 5cqw; width: 67cqw; height: 60cqw; }
  .nk { gap: 2cqw; padding: 3.4cqw 3.6cqw; }
}

/* ===================== Bevegelser som går av seg selv (ikke med redusert bevegelse) ===================== */
@media (prefers-reduced-motion: no-preference) {
  /* Lookat AR: personen går gjennom rommet mens det skannes, og kartet sendes opp når det lagres */
  .gp[data-steg='1'] .ar-person { animation: ar-gaa 3.6s linear both; }
  .gp[data-steg='2'] .ar-pakke { animation: sc-pakke 1s 1.15s var(--ut) both; }
  /* Lookat PResentation: en prikk går rundt bordet, slik du kan gå rundt modellen */
  .gp.aktiv[data-steg='2'] .p-runde, .gp.aktiv[data-steg='3'] .p-runde { animation: sc-rundt 10s linear infinite; }
}
@keyframes ar-gaa { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes sc-pakke { 0% { offset-distance: 0%; opacity: 0; } 15%, 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sc-rundt { from { offset-distance: 12%; } to { offset-distance: 112%; } }

/* ===================== De små animasjonene i forklaringene ===================== */
.mini .m-ark { fill: var(--flate-2); stroke: var(--linje-sterk); stroke-width: 1; }
.mini .m-flate { fill: color-mix(in srgb, var(--aksent) 5%, transparent); stroke: var(--linje); stroke-width: 1; }
.mini .m-felt { fill: var(--flate-2); stroke: var(--linje-sterk); stroke-width: 1; }
.mini .m-dekk { fill: var(--flate-2); }
.mini .m-bilde { fill: color-mix(in srgb, var(--aksent) 26%, var(--flate-2)); }
.mini .m-tynn { stroke-width: 1; opacity: 0.85; }
.mini .m-tekst { font: 500 10.5px var(--brod); fill: var(--dempet); }
.mini .m-tekst--stor { font-size: 13px; fill: var(--tekst); }
.mini .m-kropp { fill: var(--aksent); stroke: var(--bg-hev); stroke-width: 2; }
.mini .m-tlf { fill: #fff; }
.mt-flate--x, .mb-flate--x { fill: color-mix(in srgb, var(--aksent) 32%, var(--flate)); }
.mt-flate--y, .mb-flate { fill: color-mix(in srgb, var(--aksent) 18%, var(--flate)); }
.mt-flate--tak, .mb-flate--tak { fill: color-mix(in srgb, var(--aksent) 9%, var(--flate-2)); }
/* plantegninger: slik de står når animasjonen er ferdig (og med redusert bevegelse) */
.mp-ark--1 { transform: translateY(-22.5px); }
.mp-ark--2 { transform: translateY(-45px); }
.mp-vegg, .ms-vei, .ms-hake, .ma-stråle, .mb-kant { stroke-dasharray: 1; }
/* skannet sted */
.ms-sted { transform-origin: 0 0; transform: translate(14px, 70px) scale(0.42); }
.ms-spor { fill: none; stroke: #fff; stroke-width: 78; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ms-person { offset-rotate: auto; offset-distance: 100%; opacity: 0; }
.ms-pakke { offset-rotate: 0deg; opacity: 0; }
.ms-sky { fill: color-mix(in srgb, var(--aksent) 12%, var(--bg-hev)); }
.mini .ms-navn { fill: var(--aksent); }
.mb-farge, .mb-strek, .mt-merke, .mq-skygge { opacity: 1; }
.mb-strek { opacity: 0; }
.mini .mb-grå { stroke: var(--linje-sterk); opacity: 1; }
.mt-merke { opacity: 0; }
.mt-dekk { transform-origin: 210px 24px; transform: scaleX(0); }
.ma-dekk { transform-origin: 203px 30px; transform: scaleX(0); }
.mq-skygge { fill: var(--aksent); opacity: 0.12; }
.md-strek { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .lupe.apen .mp-ark--1 { animation: mp-1 6.4s var(--ut) infinite; }
  .lupe.apen .mp-ark--2 { animation: mp-2 6.4s var(--ut) infinite; }
  .lupe.apen .mp-vegg { animation: mp-vegg 6.4s var(--ut) infinite; }
  .lupe.apen .mp-navn--1 { animation: mp-navn-1 6.4s linear infinite; }
  .lupe.apen .mp-navn--2 { animation: mp-navn-2 6.4s linear infinite; }

  .lupe.apen .ms-sted { animation: ms-sted 7.4s var(--ut) infinite; }
  .lupe.apen .ms-spor { animation: ms-spor 7.4s linear infinite; }
  .lupe.apen .ms-person { animation: ms-person 7.4s linear infinite; }
  .lupe.apen .ms-sky, .lupe.apen .ms-navn { animation: ms-sky 7.4s var(--ut) infinite; }
  .lupe.apen .ms-vei { animation: ms-vei 7.4s var(--ut) infinite; }
  .lupe.apen .ms-pakke { animation: ms-pakke 7.4s var(--ut) infinite; }
  .lupe.apen .ms-hake { animation: ms-hake 7.4s var(--ut) infinite; }

  .lupe.apen .mb-strek { animation: mb-strek 6s ease-in-out infinite; }
  .lupe.apen .mb-farge { animation: mb-farge 6s linear infinite; }
  .lupe.apen .mb-kant { animation: mb-kant 6s var(--ut) infinite; animation-delay: calc(var(--n) * 0.09s); }
  .lupe.apen .mb-flate { animation: mb-flate 6s linear infinite; }

  .lupe.apen .mt-dekk { animation: mt-dekk 6s steps(18) infinite; }
  .lupe.apen .mt-merke { animation: mt-merke 6s steps(18) infinite; }
  .lupe.apen .mt-ny { animation: mt-ny 6s var(--ut) infinite; }

  .lupe.apen .ma-stråle { animation: ma-straale 6s var(--ut) infinite; }
  .lupe.apen .ma-dekk { animation: ma-dekk 6s steps(12) infinite; }
  .lupe.apen .ma-kamera { animation: ma-kamera 6s var(--ut) infinite; }

  .lupe.apen .mq-ramme { animation: mq-ramme 6s var(--ut) infinite; transform-origin: 64px 76px; }
  .lupe.apen .mq-tlf { animation: mq-tlf 6s var(--ut) infinite; }
  .lupe.apen .mq-modell { animation: mq-modell 6s var(--ut) infinite; }

  .lupe.apen .md-strek { animation: md-strek 6.4s ease-in-out infinite; }
  .lupe.apen .md-ut--0 { animation: md-ut-0 6.4s var(--ut) infinite; }
  .lupe.apen .md-ut--1 { animation: md-ut-1 6.4s var(--ut) infinite; }
  .lupe.apen .md-ut--2 { animation: md-ut-2 6.4s var(--ut) infinite; }
}
@keyframes mp-1 { 0%, 12% { transform: translate(50px, 12px); } 32%, 92% { transform: translateY(-22.5px); } 100% { transform: translate(50px, 12px); } }
@keyframes mp-2 { 0%, 28% { transform: translate(-50px, 14px); } 48%, 92% { transform: translateY(-45px); } 100% { transform: translate(-50px, 14px); } }
@keyframes mp-vegg { 0%, 48% { stroke-dashoffset: 1; } 66%, 90% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
@keyframes mp-navn-1 { 0%, 26% { opacity: 0; } 34%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mp-navn-2 { 0%, 42% { opacity: 0; } 50%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes ms-sted { 0%, 44% { transform: none; } 60%, 93% { transform: translate(14px, 70px) scale(0.42); } 100% { transform: none; } }
@keyframes ms-spor { 0%, 4% { stroke-dashoffset: 1; } 40%, 96% { stroke-dashoffset: 0; } 96.1%, 100% { stroke-dashoffset: 1; } }
@keyframes ms-person { 0%, 3% { offset-distance: 0%; opacity: 0; } 7% { opacity: 1; } 40% { offset-distance: 100%; opacity: 1; } 46%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ms-sky { 0%, 56% { opacity: 0; } 66%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ms-vei { 0%, 62% { stroke-dashoffset: 1; opacity: 1; } 74%, 92% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ms-pakke { 0%, 63% { offset-distance: 0%; opacity: 0; } 66% { opacity: 1; } 77% { offset-distance: 100%; opacity: 1; } 80%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ms-hake { 0%, 78% { stroke-dashoffset: 1; } 86%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 1; } }

@keyframes mb-strek { 0%, 4% { transform: none; opacity: 0; } 8% { opacity: 1; } 34% { transform: translateX(80px); opacity: 1; } 38%, 100% { transform: translateX(80px); opacity: 0; } }
@keyframes mb-farge { 0%, 30% { opacity: 0; } 38%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes mb-kant { 0%, 36% { stroke-dashoffset: 1; } 56%, 90% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
@keyframes mb-flate { 0%, 60% { opacity: 0; } 70%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }

@keyframes mt-dekk { 0%, 6% { transform: scaleX(1); } 34%, 94% { transform: scaleX(0); } 94.1%, 100% { transform: scaleX(1); } }
@keyframes mt-merke { 0%, 6% { transform: none; opacity: 1; } 34% { transform: translateX(110px); opacity: 1; } 40%, 100% { transform: translateX(110px); opacity: 0; } }
@keyframes mt-ny { 0%, 42% { opacity: 0; transform: translateY(-16px); } 58%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

@keyframes ma-straale { 0%, 6% { stroke-dashoffset: 1; } 18%, 92% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes ma-dekk { 0%, 18% { transform: scaleX(1); } 36%, 94% { transform: scaleX(0); } 94.1%, 100% { transform: scaleX(1); } }
@keyframes ma-kamera { 0%, 40% { opacity: 0; } 54%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

@keyframes mq-ramme { 0%, 14% { opacity: 0; transform: scale(1.28); } 26%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes mq-tlf { 0% { transform: translateX(22px); } 14%, 92% { transform: none; } 100% { transform: translateX(22px); } }
@keyframes mq-modell { 0%, 32% { opacity: 0; transform: translateY(10px); } 48%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

@keyframes md-strek { 0%, 3% { transform: none; opacity: 0; } 7% { opacity: 1; } 30% { transform: translateY(118px); opacity: 1; } 34%, 100% { transform: translateY(118px); opacity: 0; } }
@keyframes md-ut-0 { 0%, 30% { opacity: 0; transform: translate(-112px, 18px); } 34% { opacity: 1; transform: translate(-112px, 18px); } 48%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes md-ut-1 { 0%, 42% { opacity: 0; transform: translate(-112px, 18px); } 46% { opacity: 1; transform: translate(-112px, 18px); } 60%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes md-ut-2 { 0%, 54% { opacity: 0; transform: translate(-112px, 4px); } 58% { opacity: 1; transform: translate(-112px, 4px); } 72%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* fra style-attributtene i HTML-en */
.stil-0.stil-0.stil-0{--i:0}
.stil-1.stil-1.stil-1{--h:1.23}
.stil-2.stil-2.stil-2{--i:1}
.stil-3.stil-3.stil-3{--i:2}
.stil-4.stil-4.stil-4{--i:3}
.stil-5.stil-5.stil-5{--h:0.62}
.stil-6.stil-6.stil-6{--i:4}
.stil-7.stil-7.stil-7{--i:5}
.stil-8.stil-8.stil-8{--antall:5}
.stil-9.stil-9.stil-9{--s:var(--s0,1)}
.stil-a.stil-a.stil-a{--n:0}
.stil-b.stil-b.stil-b{--n:1}
.stil-c.stil-c.stil-c{--n:2}
.stil-d.stil-d.stil-d{--n:3}
.stil-e.stil-e.stil-e{--n:4}
.stil-f.stil-f.stil-f{--n:5}
.stil-g.stil-g.stil-g{--n:6}
.stil-h.stil-h.stil-h{--n:7}
.stil-i.stil-i.stil-i{--n:8}
.stil-j.stil-j.stil-j{--n:9}
.stil-k.stil-k.stil-k{--n:10}
.stil-l.stil-l.stil-l{--n:11}
.stil-m.stil-m.stil-m{--n:12}
.stil-n.stil-n.stil-n{--s:var(--s1,1)}
.stil-o.stil-o.stil-o{--n:13}
.stil-p.stil-p.stil-p{--n:14}
.stil-q.stil-q.stil-q{--n:15}
.stil-r.stil-r.stil-r{--s:var(--s2,1)}
.stil-s.stil-s.stil-s{--s:var(--s3,1)}
.stil-t.stil-t.stil-t{--s:var(--s4,1)}
.stil-u.stil-u.stil-u{--n:16}
.stil-v.stil-v.stil-v{--s:var(--s1,1);--d:0.05s}
.stil-w.stil-w.stil-w{--s:var(--s1,1);--d:0.12s}
.stil-x.stil-x.stil-x{--s:var(--s1,1);--d:0.19s}
.stil-y.stil-y.stil-y{--s:var(--s1,1);--d:0.26s}
.stil-z.stil-z.stil-z{--s:var(--s1,1);--d:0.33s}
.stil-10.stil-10.stil-10{--s:var(--s1,1);--d:0.4s}
.stil-11.stil-11.stil-11{--s:var(--s1,1);--d:0.47s}
.stil-12.stil-12.stil-12{--s:var(--s1,1);--d:0.54s}
.stil-13.stil-13.stil-13{--s:var(--s1,1);--d:0.61s}
.stil-14.stil-14.stil-14{--s:var(--s1,1);--d:0.5s}
.stil-15.stil-15.stil-15{--s:var(--s0,1);--d:0.2s}
.stil-16.stil-16.stil-16{--s:var(--s0,1);--d:0.45s}
.stil-17.stil-17.stil-17{--s:var(--s0,1);--d:0.15s}
.stil-18.stil-18.stil-18{--s:var(--s0,1);--d:0.3s}
.stil-19.stil-19.stil-19{--s:var(--s2,1);--loft:-29.4px}
.stil-1a.stil-1a.stil-1a{--s:var(--s2,1);--d:0.14s;--loft:-58.8px}
.stil-1b.stil-1b.stil-1b{--s:var(--s2,1);--d:0.28s;--loft:-88.2px}
.stil-1c.stil-1c.stil-1c{--s:var(--s2,1);--d:2.0s;--loft:-117.6px}
.stil-1d.stil-1d.stil-1d{--s:var(--s2,1);--d:0.6s}
.stil-1e.stil-1e.stil-1e{--s:var(--s3,1);--d:0.08s}
.stil-1f.stil-1f.stil-1f{--s:var(--s3,1);--d:0.16s}
.stil-1g.stil-1g.stil-1g{--s:var(--s3,1);--d:0.24s}
.stil-1h.stil-1h.stil-1h{--s:var(--s3,1);--d:0.32s}
.stil-1i.stil-1i.stil-1i{--s:var(--s2,1);--d:0.55s}
.stil-1j.stil-1j.stil-1j{--s:var(--s2,1);--d:2.3s}
.stil-1k.stil-1k.stil-1k{--s:var(--s3,1);--d:0.45s}
.stil-1l.stil-1l.stil-1l{--s:var(--s0,1);--d:0.25s}
.stil-1m.stil-1m.stil-1m{--s:var(--s0,1);--d:0.4s}
.stil-1n.stil-1n.stil-1n{--s:var(--s0,1);--d:0.55s}
.stil-1o.stil-1o.stil-1o{--s:var(--s2,1);--d:1.1s}
.stil-1p.stil-1p.stil-1p{--s:var(--s2,1);--d:1.3s}
.stil-1q.stil-1q.stil-1q{--s:var(--s3,1);--d:0.5s}
.stil-1r.stil-1r.stil-1r{--s:var(--s4,1);--d:0.35s}
.stil-1s.stil-1s.stil-1s{stop-color:var(--aksent);stop-opacity:.5}
.stil-1t.stil-1t.stil-1t{stop-color:var(--aksent);stop-opacity:0}
.stil-1u.stil-1u.stil-1u{offset-path:path('M46 112C86 112 98 62 138 60C178 58 196 88 214 52')}
.stil-1v.stil-1v.stil-1v{offset-path:path('M118 92C150 92 168 80 184 58')}
.stil-1w.stil-1w.stil-1w{--h:1}
.stil-1x.stil-1x.stil-1x{stop-color:var(--aksent);stop-opacity:.42}
.stil-1y.stil-1y.stil-1y{--s:var(--s1,1);--d:0.0s}
.stil-1z.stil-1z.stil-1z{--s:var(--s1,1);--d:0.24s}
.stil-20.stil-20.stil-20{--s:var(--s1,1);--d:0.71s}
.stil-21.stil-21.stil-21{--s:var(--s1,1);--d:0.94s}
.stil-22.stil-22.stil-22{--s:var(--s1,1);--d:1.18s}
.stil-23.stil-23.stil-23{--s:var(--s1,1);--d:1.41s}
.stil-24.stil-24.stil-24{--s:var(--s1,1);--d:1.65s}
.stil-25.stil-25.stil-25{--s:var(--s1,1);--d:1.89s}
.stil-26.stil-26.stil-26{--s:var(--s1,1);--d:2.12s}
.stil-27.stil-27.stil-27{--s:var(--s1,1);--d:2.36s}
.stil-28.stil-28.stil-28{--s:var(--s1,1);--d:2.59s}
.stil-29.stil-29.stil-29{--s:var(--s1,1);--d:2.83s}
.stil-2a.stil-2a.stil-2a{--s:var(--s1,1);--d:3.06s}
.stil-2b.stil-2b.stil-2b{--s:var(--s2,1);--d:0.1s}
.stil-2c.stil-2c.stil-2c{--s:var(--s2,1);--d:0.35s}
.stil-2d.stil-2d.stil-2d{offset-path:path('M323 380L323 320C323 277 363 262 398 267C443 274 490 252 494 212C498 167 463 134 423 140C398 144 384 158 378 176')}
.stil-2e.stil-2e.stil-2e{--s:var(--s2,1);--d:1.0s}
.stil-2f.stil-2f.stil-2f{offset-path:path('M408 153V118')}
.stil-2g.stil-2g.stil-2g{--s:var(--s2,1);--d:0.8s}
.stil-2h.stil-2h.stil-2h{--s:var(--s2,1);--d:1.5s}
.stil-2i.stil-2i.stil-2i{--s:var(--s3,1);--d:0.1s}
.stil-2j.stil-2j.stil-2j{--s:var(--s3,1);--d:0.25s}
.stil-2k.stil-2k.stil-2k{--s:var(--s1,1);--d:0.3s}
.stil-2l.stil-2l.stil-2l{--s:var(--s1,1);--d:1.0s}
.stil-2m.stil-2m.stil-2m{--s:var(--s1,1);--d:1.7s}
.stil-2n.stil-2n.stil-2n{--s:var(--s1,1);--d:2.3999999999999995s}
.stil-2o.stil-2o.stil-2o{--s:var(--s2,1);--d:1.6s}
.stil-2p.stil-2p.stil-2p{--s:var(--s3,1);--d:0.2s}
.stil-2q.stil-2q.stil-2q{--s:var(--s3,1);--d:0.35s}
.stil-2r.stil-2r.stil-2r{offset-path:path('M132 264a168 97 0 1 0 336 0a168 97 0 1 0 -336 0')}
.stil-2s.stil-2s.stil-2s{--s:var(--s1,1);--d:0.8s}
.stil-2t.stil-2t.stil-2t{--s:var(--s3,1);--d:0.44s}
.stil-2u.stil-2u.stil-2u{--s:var(--s3,1);--d:0.53s}
.stil-2v.stil-2v.stil-2v{--s:var(--s3,1);--d:0.62s}
.stil-2w.stil-2w.stil-2w{--s:var(--s3,1);--d:0.71s}
.stil-2x.stil-2x.stil-2x{--s:var(--s3,1);--d:0.8s}
.stil-2y.stil-2y.stil-2y{--s:var(--s3,1);--d:0.89s}
.stil-2z.stil-2z.stil-2z{--s:var(--s3,1);--d:0.9s}
.stil-30.stil-30.stil-30{--s:var(--s3,1);--d:.15s}
.stil-31.stil-31.stil-31{--s:var(--s1,1);--d:0.9s}
.stil-32.stil-32.stil-32{--s:var(--s1,1);--d:1.1s}
.stil-33.stil-33.stil-33{--vindu-sider:19.801}
.stil-34.stil-34.stil-34{--n:17}
.stil-35.stil-35.stil-35{--n:18}
.stil-36.stil-36.stil-36{--s:var(--s0,1);--dyp:calc(var(--s1,1) + var(--s2,1) + var(--s3,1) + var(--s4,1))}
.stil-37.stil-37.stil-37{--s:var(--s1,1);--dyp:calc(var(--s2,1) + var(--s3,1) + var(--s4,1))}
.stil-38.stil-38.stil-38{--andel:0.64}
.stil-39.stil-39.stil-39{--s:var(--s2,1);--dyp:calc(var(--s3,1) + var(--s4,1))}
.stil-3a.stil-3a.stil-3a{--s:var(--s3,1);--dyp:calc(var(--s4,1))}
.stil-3b.stil-3b.stil-3b{--s:var(--s4,1);--dyp:0}
.stil-3c.stil-3c.stil-3c{--i:6}
.stil-3d.stil-3d.stil-3d{--andel:0.126}