/* Frekvens Digital: the sections under the hero.
   Every moving part reads --p (0 to 1) from js/sider.js: the element's own progress through the window. Without
   JavaScript, or with reduced motion, --p stays 1 and every section stands finished. Only transform and opacity
   move (the year's signal is revealed with a clip). */

[data-rull] { --p: 1; }
.skjult { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- shared ---------- */
.seksjon { position: relative; padding: var(--luft) var(--marg); }
.indre { max-width: var(--maks); margin: 0 auto; }
.merke {
  display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: 1rem;
  font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke);
  text-transform: uppercase; color: var(--signal-tekst); line-height: 1.3;
}
.merke::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.seksjon h2 {
  font-size: var(--str-h2); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel);
  line-height: 1.04; text-wrap: balance;
}
.ingress { font-size: var(--str-ingress); line-height: 1.5; color: var(--tekst-dempet); max-width: 34rem; }
.ingress a { color: inherit; }
.hode { margin-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.75rem); }
.hode-rad { display: grid; gap: 1.25rem 3rem; align-items: end; }
@media (min-width: 900px) {
  .hode-rad { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hode-rad .ingress { justify-self: end; }
}
.knapp-lys { background: var(--kalk); color: var(--tekst); border-color: var(--kalk); }
.knapp-lys:hover { background: var(--hvit); border-color: var(--hvit); color: var(--tekst); }
.lenke-pil { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; }
.stjerner { display: inline-flex; gap: 2px; }
.stjerner svg { width: 13px; height: 13px; color: var(--stjerne); }

/* a placeholder that must be filled before launch: loud on purpose */
.spor-sverre {
  display: inline-block; padding: 0.3rem 0.55rem; border-radius: 4px; background: #ffe14d; color: #111;
  font: 600 0.78rem/1.3 var(--mono); letter-spacing: 0.02em;
}

/* ---------- proof under the hero ---------- */
.bevis { background: var(--papir); border-bottom: 1px solid var(--linje); padding: 1.35rem var(--marg); }
.bevis-indre { max-width: var(--maks); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2.25rem; }
.bevis-tittel { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--tekst-dempet); }
.bevis-navn { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; }
.bevis-navn a { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.015em; text-decoration: none; color: var(--tekst); opacity: 0.78; transition: opacity 0.2s; }
.bevis-navn a:hover { opacity: 1; }

/* ---------- how it works (dark room) ---------- */
.slik { background: var(--natt); color: var(--tekst-lys); }
.slik .merke { color: var(--signal-lys); }
.slik .ingress { color: var(--tekst-lys-dempet); }

/* a year with a usual agency, and a year with us */
.aar {
  margin: 0 0 clamp(3rem, 2rem + 3vw, 5rem); padding: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  border: 1px solid var(--natt-linje); border-radius: 18px; background: rgba(255, 255, 255, 0.025);
}
.aar-rutenett {
  --navn-b: 9.5rem; --sum-b: 14rem; --gap: 1.5rem;
  position: relative; display: grid; grid-template-columns: var(--navn-b) minmax(0, 1fr) var(--sum-b);
  column-gap: var(--gap); row-gap: 1rem; align-items: center;
}
.aar-mnd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); text-align: center; }
.aar-mnd li {
  font: 500 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-lys);
  --v: clamp(0, calc((var(--p) * 12 - var(--i)) * 2), 1);
  opacity: calc(0.35 + 0.65 * var(--v));
}
.aar-navn { font-size: 1.05rem; font-weight: 500; color: var(--tekst-lys-dempet); }
.aar-navn-oss { display: flex; align-items: center; gap: 0.55rem; color: var(--tekst-lys); }
.aar-navn-oss .ordmerke-boelge { font-size: 0.95rem; }
.aar-sum { font-size: 0.98rem; line-height: 1.35; color: var(--natt-svak); opacity: clamp(0, calc((var(--p) - 0.8) / 0.15), 1); }
.aar-sum-oss { color: var(--tekst-lys); }

.aar-spor { position: relative; height: 64px; }
.aar-fast::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--natt-linje); }
.aar-fast i {
  position: absolute; top: 50%; left: calc((var(--i) + 0.5) / 12 * 100%);
  width: 5.6%; height: 26px; margin: -13px 0 0 -2.8%; border-radius: 6px;
  background: rgba(244, 242, 238, 0.16); border: 1px solid rgba(244, 242, 238, 0.3);
  --v: clamp(0, calc((var(--p) * 12 - var(--i) - 0.15) * 3), 1);
  opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 10px)) scale(calc(0.85 + 0.15 * var(--v)));
}
.aar-oss { height: 84px; }
.aar-signal {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  clip-path: inset(-20% calc((1 - var(--p)) * 100%) -20% 0);
}
.aar-linje { fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.aar-oss i {
  position: absolute; top: 76%; left: calc((var(--i) + 0.5) / 12 * 100%);
  width: 3.4%; height: 9px; margin-left: -1.7%; border-radius: 3px; background: var(--signal);
  box-shadow: 0 0 14px var(--signal-glod);
  --v: clamp(0, calc((var(--p) * 12 - var(--i) - 0.5) * 3), 1);
  opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 8px));
}
.aar-hode {
  position: absolute; top: -0.5rem; bottom: -0.5rem; left: calc(var(--navn-b) + var(--gap)); right: calc(var(--sum-b) + var(--gap));
  overflow: hidden; pointer-events: none; opacity: calc(1 - clamp(0, calc((var(--p) - 0.95) / 0.05), 1));
}
.aar-hode span { position: absolute; inset: 0; transform: translateX(calc(var(--p) * 100%)); }
.aar-hode span::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(transparent, var(--signal) 15%, var(--signal) 85%, transparent);
}

/* the four steps, with a line that fills before you pass them */
.steg { position: relative; display: grid; gap: 2.25rem 1.75rem; padding-top: 2.5rem; }
.steg::before, .steg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--natt-linje); }
.steg::after { background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p)); box-shadow: 0 0 10px var(--signal-glod); }
.steg li {
  --q: clamp(0, calc((var(--p) - var(--i) * 0.2) / 0.35), 1);
  opacity: calc(0.28 + 0.72 * var(--q)); transform: translateY(calc((1 - var(--q)) * 18px));
}
.steg-ikon { width: 56px; height: 56px; margin-bottom: 1.25rem; overflow: visible; }
.steg-ikon path {
  fill: none; stroke: var(--tekst-lys); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--q));
}
.steg-ikon .steg-mal { stroke: var(--signal); stroke-width: 2.2; }
.steg-nr { display: block; margin-bottom: 0.6rem; font: 500 0.8rem/1 var(--mono); letter-spacing: 0.08em; color: var(--signal-lys); }
.steg h3 { margin-bottom: 0.6rem; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.steg p { color: var(--tekst-lys-dempet); }
@media (min-width: 900px) {
  .steg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .steg { padding: 0 0 0 1.75rem; }
  .steg::before, .steg::after { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steg::after { transform-origin: 50% 0; transform: scaleY(var(--p)); }
}
.slik-bunn { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.slik-bunn .lenke-pil { color: var(--tekst-lys); }

@media (max-width: 899px) {
  .aar-rutenett { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .aar-rutenett > span:not(.aar-hode) { display: none; }
  .aar-mnd li { font-size: 0.6rem; letter-spacing: 0; }
  .aar-navn { margin-top: 0.8rem; }
  .aar-hode { left: 0; right: 0; }
}

/* ---------- what we do: four small working scenes in one frame ---------- */
.hva { background: var(--kalk); }
.tjenester { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tjenester { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tjenester { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tj { --q: clamp(0, calc((var(--p) - var(--i) * 0.1) / 0.55), 1); }
.tj-scene {
  position: relative; aspect-ratio: 4 / 3.3; margin-bottom: 1.25rem; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--linje); background: linear-gradient(180deg, var(--papir), var(--sand));
}
.tj h3 { margin-bottom: 0.5rem; font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.tj > p { color: var(--tekst-dempet); }

/* the website: a phone with a site we made, rising and scrolling */
.mini-tlf {
  position: absolute; left: 50%; top: 10%; width: 44%; aspect-ratio: 390 / 844; margin-left: -22%;
  padding: 2.6%; border-radius: 18% / 8.5%; background: var(--tlf-kropp);
  box-shadow: inset 0 0 0 1px var(--tlf-kant), 0 24px 40px -18px var(--skygge-tlf);
  transform: translateY(calc((1 - var(--q)) * 22%));
}
.mini-skjerm { height: 100%; overflow: hidden; border-radius: 15% / 7%; background: #fff; }
.mini-skjerm img { width: 100%; height: auto; transform: translateY(calc(var(--q) * -14%)); }
.tj-merknad {
  position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 99px;
  background: rgba(251, 250, 248, 0.92); color: var(--tekst-dempet); font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.02em;
}

/* the Google profile: a card, and what we fill it with */
.g-kort {
  position: absolute; left: 9%; right: 9%; top: 7%; bottom: -6%; overflow: hidden;
  border-radius: 14px; background: var(--hvit); box-shadow: 0 16px 34px -16px rgba(16, 21, 29, 0.3);
  transform: translateY(calc((1 - var(--q)) * 14%));
}
.g-kort img { width: 100%; height: 27%; object-fit: cover; }
.g-navn { margin: 0.55rem 0.8rem 0.1rem; font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em; }
.g-info { display: flex; align-items: center; gap: 0.45rem; margin: 0 0.8rem 0.5rem; font-size: 0.74rem; color: var(--tekst-dempet); }
.g-liste li {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.8rem; border-top: 1px solid var(--linje);
  font-size: 0.8rem; line-height: 1.25;
  --v: clamp(0, calc((var(--q) - 0.3 - var(--j) * 0.14) / 0.14), 1);
  opacity: var(--v); transform: translateX(calc((1 - var(--v)) * -10px));
}
.g-liste svg { width: 14px; height: 14px; flex: none; color: var(--signal-tekst); }

/* reviews: the request goes out, a review comes in */
.boble {
  max-width: 84%; padding: 0.6rem 0.85rem; border-radius: 16px; font-size: 0.84rem; line-height: 1.35;
  --v: clamp(0, calc((var(--q) - 0.2 - var(--j) * 0.22) / 0.16), 1);
  opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 10px)) scale(calc(0.96 + 0.04 * var(--v)));
}
.tj-anmeld .boble-inn {
  position: absolute; left: 8%; top: 11%; transform-origin: 0 100%;
  background: var(--hvit); border-bottom-left-radius: 4px; box-shadow: 0 10px 24px -14px rgba(16, 21, 29, 0.3);
}
.boble-lenke {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 10px;
  background: var(--kalk); font-size: 0.78rem; font-weight: 500;
}
.boble-lenke svg { width: 14px; height: 14px; }
.ny-anm {
  position: absolute; right: 8%; bottom: 11%; padding: 0.75rem 0.9rem; border-radius: 14px;
  background: var(--natt); color: var(--tekst-lys); box-shadow: 0 16px 30px -16px rgba(16, 21, 29, 0.55);
  --v: clamp(0, calc((var(--q) - 0.2 - var(--j) * 0.22) / 0.16), 1);
  opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 12px)) scale(calc(0.94 + 0.06 * var(--v))); transform-origin: 100% 100%;
}
.ny-anm p { margin-top: 0.35rem; font-size: 0.8rem; }
.stjerner.stor svg { width: 17px; height: 17px; }

/* answers and follow-up: the receptionist takes the call */
.tj-svar { display: flex; flex-direction: column; gap: 0.5rem; padding: 8% 7%; background: var(--natt); border-color: var(--natt); }
.samtale {
  align-self: center; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem;
  padding: 0.35rem 0.7rem; border: 1px solid rgba(255, 138, 92, 0.45); border-radius: 99px;
  font: 500 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-lys);
  --v: clamp(0, calc((var(--q) - 0.15) / 0.15), 1); opacity: var(--v);
}
.samtale svg { width: 13px; height: 13px; }
.tj-svar .boble { max-width: 88%; }
.boble-ki { align-self: flex-start; background: rgba(244, 242, 238, 0.1); color: var(--tekst-lys); border-bottom-left-radius: 4px; transform-origin: 0 100%; }
.boble-kunde { align-self: flex-end; background: var(--kalk); color: var(--tekst); border-bottom-right-radius: 4px; transform-origin: 100% 100%; }

/* ---------- who we suit: the house in section (Sverre 02.11, «Huset i snitt») on a dark stage ----------
   The track (.hus) carries --p. With motion it is tall, and the stage stands still under the menu for about one
   screen while the house draws itself (the structure 0 to 0.2) and each trade lights in orange where it belongs
   (bygg 0.22, rør 0.40, el 0.58, mal 0.76, each 0.18 long); the list follows, and the trade's request comes in.
   Every path has pathLength 1 and its own --pa/--pb (production/hus.py writes the svg). Without JavaScript --p
   stays 1: the house stands finished with every trade in light lines and the windows lit. */
.hvem { overflow-x: clip; background: var(--natt); color: var(--tekst-lys); }
.hvem .merke { color: var(--signal-lys); }
.hvem .ingress { color: var(--tekst-lys-dempet); }
.hvem .hode { margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem); }

.hus { --slutt: clamp(0, calc((var(--p) - 0.93) / 0.05), 1); position: relative; }
.hus-indre { display: grid; gap: 1.5rem; }
.js-anim .hus { height: calc(190svh - var(--meny-h)); }
.js-anim .hus-scene { position: sticky; top: var(--meny-h); height: calc(100svh - var(--meny-h)); display: grid; align-content: center; }
@media (min-width: 900px) {
  .hus-indre { grid-template-columns: minmax(17rem, 0.95fr) minmax(0, 2.2fr); align-items: center; gap: clamp(2rem, 3.5vw, 4rem); }
}

/* the trades: the one being drawn is lit and gets the orange rail; at the end all four stand lit */
.hus-lead { margin-bottom: 0.5rem; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--natt-svak); }
.hus-fag li {
  --inn: clamp(0, calc((var(--p) - var(--a)) / 0.03), 1);
  --ut: clamp(0, calc((var(--p) - var(--b)) / 0.04), 1);
  --on: calc(var(--inn) - var(--ut));
  position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: baseline;
  padding: 0.7rem 0 0.75rem 1rem;
  opacity: calc(0.36 + 0.64 * var(--inn) - 0.28 * var(--ut) + 0.28 * var(--slutt));
}
.hus-fag li::before, .hus-fag li::after { content: ""; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 2px; border-radius: 2px; }
.hus-fag li::before { background: var(--natt-flate-sterk); }
.hus-fag li::after { background: var(--signal); transform: scaleY(var(--on)); transform-origin: 50% 0; }
.hf-nr { font: 500 0.75rem/1 var(--mono); color: color-mix(in srgb, var(--signal-lys) calc(var(--on) * 100%), var(--natt-svak)); }
.hus-fag h3 { font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.hus-fag p { grid-column: 2; margin-top: 0.25rem; font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-lys-dempet); }

/* the drawing: the structure in faint lines, the trades in orange while they are lit and in light lines after */
.hus-tegning { --sw: 1; position: relative; margin: 0; }
.hd { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hd path {
  stroke-width: calc(var(--sw) * 1.2);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - var(--pa)) / (var(--pb) - var(--pa))), 1));
}
.hd-grunn path { stroke: var(--natt-svak); }
.hd-maal path { stroke: var(--natt-svak); stroke-width: calc(var(--sw) * 0.7); opacity: 0.7; }
.hd .tynn { stroke-width: calc(var(--sw) * 0.75); opacity: 0.75; }
.hd-tall { font: 500 11px var(--mono); letter-spacing: 0.04em; fill: var(--natt-svak); text-anchor: middle; opacity: clamp(0, calc((var(--p) - var(--pa)) / 0.02), 1); }
.hd-fag {
  --inn: clamp(0, calc((var(--p) - var(--a)) / 0.02), 1);
  --ut: clamp(0, calc((var(--p) - var(--b)) / 0.04), 1);
  --on: calc(var(--inn) - var(--ut));
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--signal) calc(var(--on) * 60%), transparent));
}
.hd-fag path { stroke: color-mix(in srgb, var(--signal) calc(var(--on) * 100%), var(--tekst-lys-dempet)); stroke-width: calc(var(--sw) * 1.35); }
.hd-fag .tykk { stroke-width: calc(var(--sw) * 2.4); }
.hd-fag .hd-leder { stroke: color-mix(in srgb, var(--signal-lys) calc(var(--on) * 100%), var(--natt-svak)); stroke-width: calc(var(--sw) * 0.8); }
/* water and current: short pulses run along the pipes and the wires while the trade is lit */
.hd .hd-flyt {
  --ft: clamp(0, calc((var(--p) - var(--pa)) / (var(--pb) - var(--pa))), 1);
  stroke: var(--signal-lys); stroke-width: calc(var(--sw) * 2.2);
  stroke-dasharray: 0.035 0.215; stroke-dashoffset: calc(var(--ft) * -1);
  opacity: calc(var(--on) * clamp(0, calc((var(--p) - var(--pa)) / 0.015), 1));
}
/* the windows light up once the house is done */
.hd-lys { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--stjerne) 55%, transparent)); }
.hd-lys rect { fill: var(--stjerne); opacity: calc(var(--slutt) * 0.5); }

/* the request for each trade comes in next to the job, and stays */
.hd-lapper { position: absolute; inset: 0; pointer-events: none; }
.hd-lapp {
  --inn: clamp(0, calc((var(--p) - var(--c)) / 0.025), 1);
  --ut: clamp(0, calc((var(--p) - var(--b)) / 0.04), 1);
  --on: calc(var(--inn) - var(--ut));
  position: absolute; left: calc(var(--x) / 8 * 1%); top: calc((var(--y) - 40) / 4.4 * 1%);
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem; border-radius: 0.8rem; background: var(--varsel-flate); color: var(--tekst-lys);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) calc(var(--on) * 100%), var(--natt-linje)), 0 16px 30px -16px rgba(0, 0, 0, 0.8);
  font-size: 0.86rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
  opacity: var(--inn);
  transform: translate(var(--ax, 0%), calc(-100% + (1 - var(--inn)) * 0.5rem));
}
.hd-lapp-ikon { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 0.55rem; background: var(--signal); }
.hd-lapp-ikon svg { width: 1.1rem; height: 0.76rem; overflow: visible; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hd-lapp-merke { display: block; font: 500 0.6rem/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-lys); }

/* the phone: the drawing on top with the request under it, and one trade at a time under that */
@media (max-width: 899px) {
  .hus-tegning { --sw: 1.6; order: -1; }
  .hd { width: 117%; margin-left: -8.5%; }            /* the dimension lines may run off the edge, the house may not */
  .hd-lapper { position: relative; inset: auto; display: grid; justify-items: start; margin-top: 0.85rem; }
  .hd-lapp { position: relative; left: auto; top: auto; grid-area: 1 / 1; opacity: var(--on); transform: translateY(calc((1 - var(--inn)) * 0.4rem)); }
  .hd-leder { display: none; }
  html:not(.js-anim) .hd-lapper { display: none; }
  .js-anim .hus-fag { display: grid; }
  .js-anim .hus-fag li {
    --vidre: clamp(0, calc((var(--p) - var(--n)) / 0.03), 1);
    grid-area: 1 / 1; opacity: calc(max(var(--inn), 0.45 * var(--forst, 0)) - var(--vidre));
  }
  .js-anim .hus-fag li:first-child { --forst: 1; }
}
@media (max-width: 599px) { .hd-tall { display: none; } }

.hvem-bunn { display: grid; gap: 1.25rem 2.5rem; align-items: start; margin-top: clamp(2.75rem, 2rem + 2vw, 4rem); }
.hvem-lead { padding-top: 0.95rem; font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--signal-lys); }
.kriterier { display: grid; gap: 0 2rem; }
.kriterier li {
  position: relative; display: flex; gap: 0.7rem; padding: 0.85rem 0; line-height: 1.5;
  --k: clamp(0, calc((var(--p) - var(--i) * 0.15) / 0.42), 1);
  opacity: calc(0.35 + 0.65 * var(--k));
}
.kriterier li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--natt-flate-sterk);
  transform: scaleX(var(--k)); transform-origin: 0 50%;
}
.kriterier svg {
  flex: none; width: 20px; height: 20px; margin-top: 0.2em; color: var(--signal-lys);
  stroke-dasharray: 20; stroke-dashoffset: calc((1 - var(--k)) * 20);
}
.hvem-bunn .knapp { justify-self: start; }
@media (min-width: 1100px) {
  .hvem-bunn { grid-template-columns: 10rem minmax(0, 1fr) auto; }
  .kriterier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hvem-bunn .knapp { margin-top: 0.4rem; }
}

/* ---------- our work ---------- */
.arbeid { background: var(--papir); }
.ref-rutenett { display: grid; gap: 2.25rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ref-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* two big (Janis Martins Bygg, Tid Bolig), then four in a row */
@media (min-width: 1100px) {
  .ref-rutenett { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ref { grid-column: span 3; }
  .ref-stor { grid-column: span 6; }
}
.ref {
  display: block; color: inherit; text-decoration: none;
  --q: clamp(0, calc((var(--p) - var(--i) * 0.09) / 0.5), 1);
  opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 30px));
}
.ref-skjerm {
  display: block; position: relative; overflow: hidden; border-radius: 12px; background: var(--hvit);
  border: 1px solid var(--linje); box-shadow: 0 22px 44px -28px rgba(16, 21, 29, 0.4);
}
.ref-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; background: #efeeeb; border-bottom: 1px solid var(--linje); }
.ref-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(16, 21, 29, 0.17); }
.ref-skjerm img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ref-tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; padding: 1rem 0.15rem 0; }
.ref-type { width: 100%; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-dempet); }
.ref-navn { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); font-weight: 400; letter-spacing: -0.02em; }
.ref-lenke { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 500; }
.ref-lenke svg { width: 16px; height: 16px; transition: transform 0.25s var(--mykt); }
.ref:hover .ref-lenke svg, .ref:focus-visible .ref-lenke svg { transform: translateX(3px); }

/* ---------- about us (dark room): what we have learned, what we do, and the dots that become Frekvens ----------
   The statement lights word by word (js/sider.js wraps the words; without it the text simply stands). Beside it, the
   dots gather out of noise into the Frekvens wave. The three small scenes of what we see among craftsmen stand in
   their own light section, #ser (below). */
.om { overflow: hidden; background: var(--natt); color: var(--tekst-lys); }
.om .merke { color: var(--signal-lys); }
.om .ingress { color: var(--tekst-lys-dempet); }
.om-topp { display: grid; gap: 3rem 4.5rem; align-items: center; }
@media (min-width: 1000px) { .om-topp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.om-utsagn {
  margin-top: 1.5rem; max-width: 37rem;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem); font-weight: 300; line-height: 1.38; letter-spacing: -0.015em;
}
.om-utsagn .ord { opacity: calc(0.22 + 0.78 * clamp(0, calc((var(--p) * (var(--ant) + 6) - var(--i)) / 6), 1)); }
.om-kan { display: grid; gap: 1.5rem 2.25rem; margin-top: 2.5rem; }
@media (min-width: 600px) { .om-kan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-kan > div {
  position: relative; padding-top: 1rem;
  --v: clamp(0, calc(var(--p) * 5.4 - 0.7 - var(--i)), 1);
}
.om-kan > div::before, .om-kan > div::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--natt-linje); }
.om-kan > div::after { background: var(--signal); transform: scaleX(var(--v)); transform-origin: 0 50%; }
.om-kan dt { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.om-kan dd { margin: 0.35rem 0 0; font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-lys-dempet); }

/* noise becomes Frekvens (Sverre 02.11): dots on a canvas, drawn by js/sider.js from the figure's --p. The svg under it is
   the end state for no JavaScript and reduced motion; .lever hides it once the dots are ready. */
.xf { position: relative; margin: 0; aspect-ratio: 100 / 82; }
.xf-statisk, .xf-lerret { position: absolute; inset: 0; width: 100%; height: 100%; }
.xf-lerret { display: none; }
.xf.lever .xf-lerret { display: block; }
.xf.lever .xf-statisk { visibility: hidden; }
.xf-statisk { overflow: visible; }
.xf-statisk path { fill: none; stroke: var(--signal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.xf-s-navn { font-family: var(--font); font-size: 9.2px; font-weight: 500; letter-spacing: -0.02em; text-anchor: middle; fill: var(--tekst-lys); }
.xf-s-navn tspan + tspan { font-weight: 400; fill: var(--tekst-lys-dempet); }

.om-ser { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.om-ser-hode { margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.om-ser h3 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.om-funn { display: grid; gap: 2.75rem 1.5rem; }
@media (min-width: 900px) { .om-funn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.om-funn > li > h3 { margin-top: 1.25rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.015em; }
.om-funn > li > p { margin-top: 0.4rem; max-width: 26rem; font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-lys-dempet); }

.funn-scene {
  position: relative; overflow: hidden; height: 16rem; padding: 1.1rem;
  border-radius: 18px; background: var(--natt-2); border: 1px solid var(--natt-linje);
  font-size: 0.9rem; line-height: 1.3;
}

/* competitors push your business down: each one that appears takes a row above it */
.sok-felt {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.9rem; border-radius: 99px;
  background: var(--natt-flate); color: var(--tekst-lys); font-size: 0.92rem;
}
.sok-felt svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--natt-svak); stroke-width: 2; stroke-linecap: round; }
.sok-liste {
  position: relative; height: 10.6rem; margin-top: 0.75rem;
  --n: calc(var(--p) * 4.4 - 0.2);
  -webkit-mask-image: linear-gradient(#000 50%, transparent 100%); mask-image: linear-gradient(#000 50%, transparent 100%);
}
.sok-liste li {
  position: absolute; left: 0; right: 0; top: 0; height: 1.95rem;
  display: flex; align-items: center; gap: 0.6rem; padding: 0 0.75rem; border-radius: 10px; background: var(--natt-flate);
}
.sok-liste li:not(.sok-du) {
  --v: clamp(0, calc((var(--n) - var(--i) - 0.72) * 3.6), 1);
  opacity: var(--v); transform: translateY(calc(var(--i) * 2.25rem - (1 - var(--v)) * 0.5rem));
}
.sok-liste i { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--natt-svak); }
.sok-liste b { height: 0.45rem; width: var(--b); border-radius: 99px; background: var(--natt-flate-sterk); }
.sok-stj {
  flex: none; margin-left: auto; width: 3.3rem; height: 0.6rem; opacity: 0.85;
  background: radial-gradient(circle at center, var(--stjerne) 42%, transparent 48%) 0 50% / 0.66rem 0.6rem repeat-x;
}
.sok-liste .sok-du {
  background: transparent; color: var(--signal-lys); font-weight: 500; box-shadow: inset 0 0 0 1px var(--signal-glod);
  transform: translateY(calc(clamp(0, var(--n), 4) * 2.25rem));
}
.sok-du i { background: var(--signal); }

/* the week: the free slots light up one after another */
.uke-hode, .uke-ruter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.uke-hode { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--natt-svak); text-align: center; }
.uke-ruter { grid-auto-rows: 2.75rem; margin-top: 0.6rem; --n: calc(var(--p) * 10.6 - 0.3); }
.uke-ruter i { position: relative; border-radius: 8px; border: 1px dashed var(--natt-linje); --v: clamp(0, calc(var(--n) - var(--j)), 1); }
.uke-ruter i:not(.opptatt)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1.5px solid var(--signal); background: var(--signal-flate); opacity: var(--v);
}
.uke-ruter .opptatt { border: 0; background: var(--natt-flate-sterk); }
.uke-ruter .opptatt::before { content: ""; position: absolute; left: 0.5rem; right: 35%; top: 0.6rem; height: 0.35rem; border-radius: 99px; background: var(--natt-linje); }
.uke-fot { display: flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--natt-svak); }
.uke-merke { width: 0.8rem; height: 0.8rem; margin-left: 0.6rem; border-radius: 3px; border: 1.5px solid var(--signal); background: var(--signal-flate); }
.uke-merke-opptatt { margin-left: 0; border: 0; background: var(--natt-flate-sterk); }

/* the portal: offers pile up, the customer never answers, and the hours count */
.scene-portal { --n: calc(var(--p) * 7.2 - 0.6); }
.portal-kort { padding: 0.9rem 1rem; border-radius: 12px; background: var(--natt-flate); border: 1px solid var(--natt-linje); }
.portal-topp { display: flex; justify-content: space-between; font: 500 0.66rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--natt-svak); }
.portal-jobb { margin-top: 0.45rem; font-size: 1.05rem; font-weight: 500; color: var(--tekst-lys); }
.portal-folk { display: flex; align-items: center; min-height: 1.7rem; margin-top: 0.65rem; }
.portal-folk i {
  flex: none; width: 1.6rem; height: 1.6rem; margin-right: -0.45rem; border-radius: 50%;
  background: var(--natt-flate-sterk); border: 2px solid var(--natt-2);
  --v: clamp(0, calc(var(--n) - var(--i)), 1);
  opacity: var(--v); transform: scale(calc(0.4 + 0.6 * var(--v)));
}
.portal-folk i:nth-child(2n) { background: var(--natt-linje); }
.portal-folk span { margin-left: 1.05rem; font-size: 0.82rem; color: var(--tekst-lys-dempet); opacity: clamp(0, calc(var(--n) - 1), 1); }
.portal-status {
  display: inline-flex; margin-top: 0.7rem; padding: 0.3rem 0.65rem; border-radius: 99px;
  background: var(--natt-flate-sterk); font-size: 0.8rem; color: var(--tekst-lys-dempet);
  opacity: clamp(0, calc(var(--n) - 5.6), 1);
}
.portal-tid {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem;
  display: flex; align-items: center; gap: 0.55rem; padding-top: 0.8rem; border-top: 1px solid var(--natt-linje);
  font-size: 0.85rem; color: var(--tekst-lys-dempet);
}
.portal-tid svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--signal-lys); stroke-width: 1.8; stroke-linecap: round; }
.portal-tid b { margin-left: auto; font: 600 1.05rem/1 var(--mono); color: var(--signal-lys); font-variant-numeric: tabular-nums; }

.om-slutt {
  display: grid; gap: 1.75rem 4rem; align-items: end;
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-top: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); border-top: 1px solid var(--natt-linje);
}
@media (min-width: 1000px) { .om-slutt { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.om-derfor { max-width: 40rem; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.05rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; color: var(--tekst-lys); }
.om-signatur-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.om-signatur { display: flex; align-items: center; gap: 0.85rem; font-size: 0.95rem; color: var(--natt-svak); }
.om-signatur .ordmerke-boelge { font-size: 1.3rem; }
.om-signatur > span { display: grid; gap: 0.1rem; }
.om-navn { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; color: var(--tekst-lys); }

/* ---------- questions ---------- */
.sporsmal { background: var(--sand); }
.sp-rutenett { display: grid; gap: 2rem 4rem; }
@media (min-width: 900px) {
  .sp-rutenett { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .sp-hode { position: sticky; top: calc(var(--meny-h) + 2rem); }
}
.sp-hode .ingress { margin-top: 1.25rem; }
.sp-liste details {
  border-top: 1px solid var(--linje-sterk);
  --q: clamp(0, calc((var(--p) - var(--i) * 0.06) / 0.45), 1);
  opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 16px));
}
.sp-liste details:last-child { border-bottom: 1px solid var(--linje-sterk); }
.sp-liste summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  padding: 1.2rem 0; font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.4rem); font-weight: 400; letter-spacing: -0.012em; line-height: 1.3;
}
.sp-liste summary::-webkit-details-marker { display: none; }
.pluss { position: relative; flex: none; width: 18px; height: 18px; }
.pluss::before, .pluss::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.3s var(--mykt); }
.pluss::after { transform: rotate(90deg); }
details[open] .pluss::after { transform: rotate(0deg); }
.sp-liste details p { max-width: 40rem; padding: 0 2.5rem 1.4rem 0; color: var(--tekst-dempet); }

/* ---------- booking: the calendar that becomes the deck of cards (Sverre 01.11 kveld) ----------
   The deck is drawn by a line low in the window and comes alive from the wave. The calendar card on top picks a day and
   a time; then it lifts away, leaves its answer as a chip above the deck, and the next card steps up. From there it is
   the Janis deck (Kortstokken): one question per card, each card below a little lower and narrower, a chip brings its
   card back on top, and the last card turns into the receipt. js/sider.js runs the cards; css keeps them in one cell,
   so the deck never changes height. */
.book { overflow: clip; background: var(--natt); color: var(--tekst-lys); }
.book-felt { position: absolute; inset: 0; background: url("../assets/img/felt/book-felt.webp") center / cover no-repeat; }
.book-felt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15, 21, 32, 0.94) 25%, rgba(15, 21, 32, 0.6)); }
.book .merke { color: var(--signal-lys); }
.book .ingress { margin-top: 1.25rem; color: var(--tekst-lys-dempet); }
.book-rutenett { position: relative; display: grid; gap: 2.75rem 4.5rem; }
@media (min-width: 900px) {
  .book-rutenett { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .book-kalender { justify-self: end; width: 100%; max-width: 40rem; }
}
.book-tlf {
  display: inline-flex; align-items: center; gap: 0.9rem; margin-top: 2.25rem;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1;
  text-decoration: none; color: var(--tekst-lys);
}
.book-tlf-ikon { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--kalk); color: var(--tekst); }
.book-tlf-ikon svg { width: 1.25rem; height: 1.25rem; }
.book-epost { margin-top: 1.1rem; }
.book-kalender { display: grid; gap: 1rem; }
.book-spor { text-align: right; }

/* the form: no sheet of its own, the cards are the questions */
.kal { position: relative; display: grid; container-type: inline-size; color: var(--tekst-lys); }
.kal-ark {
  --trinn: 0.75em;   /* how much of each card below shows under the one above */
  --krymp: 0.04;     /* how much narrower each card below is */
  grid-area: 1 / 1; position: relative; min-width: 0;
  font-size: clamp(14px, 2.6cqi, 16.5px); line-height: 1.3;
}

/* above the deck: which card, the line, and the chips of the answered cards (JavaScript only) */
.kal:not(.klar) .ks-topp { display: none; }
.ks-topp { display: grid; gap: 0.7em; margin-bottom: 1em; }
.ks-status { display: flex; align-items: center; gap: 0.55em; font-size: 0.9em; font-weight: 500; }
.ks-kort-tekst { font-variant-numeric: tabular-nums; }
.ks-hint { margin-left: auto; font-weight: 400; color: var(--tekst-lys-dempet); text-align: right; }
.ks-bar { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--natt-flate-sterk); }
.ks-bar-fyll {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--signal);
  transform: scaleX(0.04); transform-origin: 0 50%; transition: transform 0.75s var(--mykt);
}
/* a short light runs along the line each time it grows */
.ks-bar-fyll::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--papir), transparent); opacity: 0; transform: translateX(-110%);
}
.ks-bar-fyll.er-glans::after { animation: ks-glans 1s var(--mykt) 0.2s; }
@keyframes ks-glans { 0% { opacity: 0.7; transform: translateX(-110%); } 100% { opacity: 0; transform: translateX(340%); } }
/* the chips: one row that never wraps, so the deck under it stands still; on a narrow screen it scrolls sideways */
.ks-brikker {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.45em; min-height: calc(2.5em + 6px);
  margin: 0 -3px; padding: 3px; overflow-x: auto; list-style: none; scrollbar-width: none;
}
.ks-brikker::-webkit-scrollbar { display: none; }
.ks-brikker:empty::before { content: attr(data-tom); font-size: 0.9em; color: var(--tekst-lys-dempet); }
.ks-brikker > li { flex: none; }
.ks-brikke {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.5em; margin: 0; padding: 0.35em 0.95em 0.35em 0.7em;
  border: 1px solid var(--natt-flate-sterk); border-radius: 999px; background: var(--natt-flate); color: var(--tekst-lys);
  font: inherit; font-size: 0.9em; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ks-brikke svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: var(--signal-lys); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ks-brikke:hover { border-color: var(--tekst-lys-dempet); }
.ks-brikke:focus-visible { outline: 2px solid var(--signal-lys); outline-offset: 2px; }
/* the chip of the card that is back on top */
.ks-brikke.er-aktiv { border-color: var(--papir); background: var(--papir); color: var(--tekst); }
.ks-brikke.er-aktiv svg { stroke: var(--signal-tekst); }
.ks-brikke-ny { animation: ks-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s both; }
@keyframes ks-pop { from { opacity: 0; transform: scale(0.6); } }
.kal.sendt .ks-brikker { visibility: hidden; }

/* the deck: every card in the same cell, so all are as tall as the tallest and the deck never changes height between
   the questions; room below for the edges of the two cards under the top one */
.ks-stabel { display: grid; grid-template-columns: minmax(0, 1fr); }
.klar .ks-stabel { padding-bottom: calc(2 * var(--trinn)); }
.ks-kort {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-inline-size: 0; margin: 0;
  padding: 1.4em 1.6em 1.5em; border: 1px solid transparent; border-radius: 20px;
  background: var(--papir); color: var(--tekst); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.9);
}
.kal:not(.klar) .ks-kort:not([data-steg="1"]) { display: none; }
.klar .ks-kort {
  --d: 0;
  grid-area: 1 / 1; z-index: calc(10 - var(--d));
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--d) * var(--trinn))) scale(calc(1 - var(--d) * var(--krymp)));
  transition: transform 0.55s var(--mykt) calc(var(--d) * 45ms + 110ms), opacity 0.35s var(--mykt), visibility 0s;
}
/* each card below is a little deeper */
.klar .ks-kort::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--natt);
  opacity: calc(var(--d) * 0.16); pointer-events: none; transition: opacity 0.45s var(--mykt);
}
.stille .ks-kort, .stille .ks-kort::after { transition: none !important; }
/* an answered card lifts up and away; brought back, it comes down from the same place */
.klar .ks-kort.er-ute {
  z-index: 20; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-1.75rem) rotate(-1.2deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0, 0, 0.2, 1), visibility 0s 0.4s;
}
.ks-sporsmal { float: left; width: 100%; margin: 0 0 0.9em; padding: 0; font-size: 1.2em; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.ks-sporsmal + * { clear: both; }
/* back and next at the foot of a card */
.ks-fot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.8em 1em; margin-top: auto; padding-top: 1.1em; }
.ks-fot [hidden] { display: none; }
.ks-tilbake {
  display: inline-flex; align-items: center; gap: 0.45em; margin-right: auto; padding: 0.35em 0; border: 0; background: none;
  color: var(--tekst-dempet); font: inherit; font-size: 0.92em; cursor: pointer;
}
.ks-tilbake svg { width: 1.05em; height: 1.05em; transform: scaleX(-1); }
.ks-tilbake:hover { color: var(--tekst); }

/* card 1: the calendar */
.kal-kropp { display: grid; gap: 1.2em; }
.kal-mnd-rad { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6em; font-weight: 500; }
.kal-blad { display: flex; gap: 0.35em; }
.kal-blad button {
  position: relative; width: 1.9em; height: 1.9em; padding: 0; border: 1px solid var(--linje); border-radius: 50%;
  background: none; color: var(--tekst); cursor: pointer;
}
.kal-blad button:hover:not(:disabled) { border-color: var(--tekst); }
.kal-blad button:disabled { cursor: default; opacity: 0.4; }
.kal-blad button::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.42em; height: 0.42em; margin: -0.21em 0 0 -0.3em;
  border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7;
}
.kal-blad button:first-child::before { margin-left: -0.1em; transform: rotate(-135deg); }
.kal-uke, .kal-dager { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.kal-uke { margin-bottom: 0.25em; font: 500 0.66em/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-dempet); }
.kal-dager > * {
  position: relative; z-index: 0; display: grid; place-items: center; aspect-ratio: 1; min-width: 0;
  font-size: 0.9em; font-variant-numeric: tabular-nums; color: var(--tekst-svak);
}
.kal-dager > *::before { content: ""; position: absolute; z-index: -1; inset: 8%; border-radius: 50%; }
.kal-dager button { padding: 0; border: 0; background: none; font: inherit; font-size: 0.9em; cursor: pointer; }
.kal-dager button:hover::before { background: var(--kalk); }
.kal-dager button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; border-radius: 50%; }
.kal-dager .ledig { color: var(--tekst); font-weight: 500; }
.kal-dager .ut { visibility: hidden; }
.kal-dager .idag::after { content: ""; position: absolute; left: 50%; bottom: 13%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--signal); }
.kal-dager .valgt { color: var(--tekst-lys); }
.kal-dager .valgt::before, .kal-dager button.valgt:hover::before { background: var(--natt); }
.kal-tider { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em; align-content: start; }
.kal-dato, .kal-hjelp { grid-column: 1 / -1; }
.kal-dato { margin-bottom: 0.15em; font-size: 0.92em; font-weight: 500; }
.kal-tid {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.4em; height: 2.7em; padding: 0;
  border: 1px solid var(--linje-sterk); border-radius: 0.75em; background: none; color: var(--tekst);
  font: inherit; font-size: 0.95em; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer;
}
.kal-tid:hover { border-color: var(--tekst); }
.kal-tid:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* the times stay locked until a day is tapped; dimmed, so nobody taps a time first and waits */
.kal-tid:disabled, .kal-tid:disabled:hover { border-color: var(--linje); color: var(--tekst-svak); cursor: default; }
.kal-tid.er-valgt { background: var(--kalk); }
.kal-tid.er-valgt::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0.25em var(--signal-flate); }
.kal-tid.er-valgt::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--natt); }
.kal-hjelp { margin-top: 0.15em; font-size: 0.82em; color: var(--tekst-dempet); }
/* twelve times: four a row on a phone, six where the card is wider, two beside the month from 520 px */
@container (min-width: 400px) { .kal-tider { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (min-width: 520px) {
  .kal-kropp { grid-template-columns: minmax(0, 1fr) 12.5em; gap: 1.6em; }
  .kal-tider { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* card 2: one tile per trade, the tiles fill the card */
.ks-fliser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55em; }
@container (min-width: 520px) { .ks-fliser { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-kort[data-steg="2"] .ks-fliser { flex: 1; grid-auto-rows: 1fr; }
.ks-flis { position: relative; display: grid; }
.ks-flis input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ks-flis > span {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.7em; min-height: 5.4em;
  padding: 0.85em 0.9em; border: 1px solid var(--linje-sterk); border-radius: 0.8em; background: var(--hvit);
  font-weight: 500; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.ks-flis svg { width: 1.6em; height: 1.6em; fill: none; stroke: var(--signal-tekst); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ks-flis > span:hover { border-color: var(--tekst); }
.ks-flis input:checked + span { background: var(--natt); border-color: var(--natt); color: var(--tekst-lys); }
.ks-flis input:checked + span svg { stroke: var(--signal-lys); }
.ks-flis input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* card 3: name, company and phone, one under the other */
.ks-felt-rad { display: grid; gap: 0.8em; }
.ks-felt { min-width: 0; }
.ks-felt label { display: block; margin-bottom: 0.35em; font-size: 0.9em; font-weight: 500; }
.ks-felt input {
  width: 100%; padding: 0.75em 0.85em; border: 1px solid var(--linje-sterk); border-radius: 0.7em; background: var(--hvit);
  color: var(--tekst); font: inherit; font-size: max(16px, 1em); transition: border-color 0.2s, box-shadow 0.2s;
}
.ks-felt input:focus { outline: none; border-color: var(--tekst); box-shadow: 0 0 0 3px var(--signal-glod); }
.ks-felt input[aria-invalid="true"] { border-color: var(--feil); }
.kontroll-felt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ks-personvern { margin-top: 0.9em; font-size: 0.84em; color: var(--tekst-svak); }
.ks-send:disabled { opacity: 0.6; cursor: progress; }
.ks-melding { margin-top: 0.8em; font-size: 0.92em; color: var(--feil); }
.ks-melding:empty { display: none; }

/* sent: the last card turns into the receipt */
.kal.sendt .ks-kort[data-steg="3"] > :not(.ks-ferdig) { display: none; }
.kal.sendt .ks-kort[data-steg="3"] { justify-content: center; animation: ks-sett 0.6s var(--mykt); }
@keyframes ks-sett { from { transform: translateY(6px) scale(0.985); } }
.ks-ferdig { display: grid; align-content: start; gap: 1em; }
.ks-ferdig[hidden] { display: none; }
.ks-ferdig:focus { outline: none; }
.ks-ferdig-tittel { display: flex; align-items: center; gap: 0.6em; font-size: 1.25em; font-weight: 500; letter-spacing: -0.01em; }
.ks-ferdig-tittel::before { content: ""; flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal-glod); }
.ks-kvittering { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55em 1.4em; margin: 0; padding: 1em 0; border-block: 1px solid var(--linje); }
.ks-kvittering dt { color: var(--tekst-svak); }
.ks-kvittering dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ks-ferdig-tekst { color: var(--tekst-dempet); }
.ks-ferdig-tekst a { color: var(--tekst); font-weight: 500; }
.ks-uten-js { margin-top: 1em; padding: 0.8em 1em; border-radius: 0.7em; background: var(--sand); color: var(--tekst); font-size: 0.92em; }

/* with motion: js/sider.js adds .lever and sets --skann (the drawing line, fixed low in the window), --m (the rest),
   and --ox, --oy, --rmax (the wave the deck comes alive from). The film only brings the calendar to life: it never
   picks a day or a time; the visitor does (Sverre 02.11). */
.kal.lever {
  --e0: clamp(0, calc((var(--m) - 0.2) / 0.3), 1);
  --ekte: calc(var(--e0) * var(--e0) * (3 - 2 * var(--e0)));
  --puls: clamp(0, calc((var(--m) - 0.18) / 0.22), 1);
  --puls2: clamp(0, calc((var(--m) - 0.26) / 0.22), 1);
  --dag: clamp(0, calc((var(--m) - 0.48) / 0.1), 1);
  --tid: clamp(0, calc((var(--m) - 0.56) / 0.16), 1);
  --velg: clamp(0, calc((var(--m) - 0.7) / 0.08), 1);
}
/* the mask clips the cards' shadows, so it goes once the deck is whole (.levd) */
.kal.lever:not(.levd) > .kal-ark:not(.tegning) {
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--ekte) * var(--rmax) - 36px), transparent calc(var(--ekte) * var(--rmax)));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--ekte) * var(--rmax) - 36px), transparent calc(var(--ekte) * var(--rmax)));
}
.kal.lever .kal-ark:not(.tegning) .valgt { color: color-mix(in srgb, var(--tekst-lys) calc(var(--dag) * 100%), var(--tekst)); }
.kal.lever .kal-ark:not(.tegning) .valgt::before { opacity: var(--dag); transform: scale(calc(0.3 + 0.7 * var(--dag))); }
.kal.lever .kal-ark:not(.tegning) .kal-dato { opacity: var(--dag); transform: translateY(calc((1 - var(--dag)) * 0.4em)); }
.kal.lever .kal-ark:not(.tegning) .kal-tid {
  --t: clamp(0, calc(var(--tid) * 1.6 - var(--i) * 0.05), 1);
  opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 0.7em));
}
.kal.lever .kal-ark:not(.tegning) .kal-hjelp { opacity: var(--tid); }
.kal.lever .kal-ark:not(.tegning) .er-valgt { background: color-mix(in srgb, var(--kalk) calc(var(--velg) * 100%), transparent); }
.kal.lever .kal-ark:not(.tegning) .er-valgt::before { transform: scale(var(--velg)); }
.kal.lever .kal-ark:not(.tegning) .er-valgt::after { opacity: var(--velg); }

/* the drawing: the same deck in fine light lines on the night, the calendar on top */
.kal-ark.tegning {
  color: rgba(244, 242, 238, 0.66);
  -webkit-mask-image: linear-gradient(#000 calc(var(--skann) * 100%), transparent calc(var(--skann) * 100% + 1px));
  mask-image: linear-gradient(#000 calc(var(--skann) * 100%), transparent calc(var(--skann) * 100% + 1px));
  opacity: calc(1 - clamp(0, calc((var(--ekte) - 0.85) / 0.15), 1));
}
.tegning .ks-hint, .tegning .ks-brikker:empty::before { color: inherit; }
.tegning .ks-bar { background: rgba(244, 242, 238, 0.2); }
.tegning .ks-bar-fyll { display: none; }
.tegning .ks-kort { background: transparent; border-color: rgba(244, 242, 238, 0.34); color: inherit; box-shadow: none; }
.tegning .ks-kort::after { display: none; }
/* the cards below show only their edge under the one above, as on the real deck */
.tegning .ks-kort:not([data-steg="1"]) { clip-path: inset(calc(100% - var(--trinn) / (1 - var(--d) * var(--krymp)) - 1px) -2px -2px); }
.tegning .ks-kort:not([data-steg="1"]) > * { visibility: hidden; }
.tegning .ks-sporsmal, .tegning .kal-dato, .tegning .kal-uke, .tegning .kal-hjelp { color: inherit; }
.tegning .kal-blad button { border-color: rgba(244, 242, 238, 0.25); color: inherit; }
.tegning .kal-dager > * { color: inherit; font-weight: 400; }
.tegning .kal-dager > *::before { border: 1px solid rgba(244, 242, 238, 0.14); background: none; }
.tegning .kal-dager .valgt::before { border-color: var(--signal); }
.tegning .kal-tid { border-color: rgba(244, 242, 238, 0.3); background: none; color: inherit; }
.tegning .kal-tid.er-valgt::after { box-shadow: inset 0 0 0 1px var(--signal); }
.tegning .kal-tid.er-valgt::before { background: var(--signal); }

/* the drawing line and the pulses from the wave */
.kal-skann, .kal-puls { pointer-events: none; }
.kal-skann {
  position: absolute; inset: 0; z-index: 3;
  transform: translateY(calc(var(--skann) * 100%));
  opacity: calc(clamp(0, calc(var(--skann) * 25), 1) * clamp(0, calc((1 - var(--skann)) * 25), 1));
}
.kal-skann::before {
  content: ""; position: absolute; left: -5%; right: -5%; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal) 14%, var(--signal) 86%, transparent);
  box-shadow: 0 0 14px 1px var(--signal-glod);
}
.kal-puls { position: absolute; z-index: 3; left: var(--ox); top: var(--oy); width: 0; height: 0; }
.kal-puls::before, .kal-puls::after {
  content: ""; position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%;
  border: 1.5px solid var(--signal);
}
.kal-puls::before { transform: scale(calc(0.1 + var(--puls) * 4)); opacity: calc(clamp(0, calc(var(--puls) * 10), 1) * (1 - var(--puls))); }
.kal-puls::after { transform: scale(calc(0.1 + var(--puls2) * 4)); opacity: calc(clamp(0, calc(var(--puls2) * 10), 1) * (1 - var(--puls2)) * 0.6); }
@media (prefers-reduced-motion: reduce) {
  .klar .ks-kort, .klar .ks-kort.er-ute, .klar .ks-kort::after, .ks-bar-fyll { transition: none; }
  .ks-brikke-ny, .ks-bar-fyll.er-glans::after, .kal.sendt .ks-kort[data-steg="3"] { animation: none; }
}

/* ---------- footer ---------- */
.bunn { background: var(--natt-2); color: var(--tekst-lys-dempet); padding: clamp(3rem, 2rem + 3vw, 5rem) var(--marg) clamp(2.5rem, 2rem + 2vw, 4rem); font-size: 0.98rem; }
.bunn-indre { max-width: var(--maks); margin: 0 auto; display: grid; gap: 2.5rem 3rem; }
@media (min-width: 900px) { .bunn-indre { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }
.bunn .ordmerke { color: var(--tekst-lys); font-size: 1.1rem; }
.bunn .ordmerke-navn span { color: var(--tekst-lys-dempet); }
.bunn-merke p { margin-top: 1rem; max-width: 22rem; }
.bunn-kol { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.bunn-kol a { color: var(--tekst-lys); text-decoration: none; }
.bunn-kol a:hover { text-decoration: underline; }
.bunn-tittel { margin-bottom: 0.25rem; font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--natt-svak); }

/* ---------- the phone's booking bar ---------- */
.mobil-cta { display: none; }
@media (max-width: 899px) {
  .mobil-cta {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem;
    padding: 0.7rem var(--marg) calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--meny-matt); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--linje); transform: translateY(110%); transition: transform 0.35s var(--mykt);
  }
  .mobil-cta.vis { transform: none; }
  .mobil-cta .knapp { min-height: 46px; padding: 0.7rem 1.2rem; }
  .bunn { padding-bottom: 6.5rem; }
}

/* ---------- Sverre's changes 02.11.2026 evening ---------- */

/* what we do: the line under the four scenes, with the way to the service pages */
.hva-bunn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.hva-bunn p { max-width: 40rem; font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-dempet); }
.hva-bunn .knapp-pil { width: 16px; height: 16px; }

/* KI search: the question, and an answer that names your business */
.tj-ki { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.65rem; padding: 7%; }
.ki-sporsmal, .ki-svar {
  --v: clamp(0, calc((var(--q) - 0.2 - var(--j) * 0.22) / 0.16), 1);
  opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 10px));
}
.ki-sporsmal {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border-radius: 99px;
  background: var(--hvit); box-shadow: 0 10px 24px -14px rgba(16, 21, 29, 0.3); font-size: 0.84rem; line-height: 1.3;
}
.ki-sporsmal svg { flex: none; width: 15px; height: 15px; color: var(--tekst-dempet); }
.ki-svar { padding: 0.8rem 0.9rem 0.55rem; border-radius: 14px; background: var(--natt); color: var(--tekst-lys); box-shadow: 0 16px 30px -16px rgba(16, 21, 29, 0.55); }
.ki-merke { display: flex; align-items: center; gap: 0.45rem; font: 500 0.64rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-lys); }
.ki-prikk { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25); }
.ki-tekst { margin: 0.55rem 0 0.35rem; font-size: 0.78rem; line-height: 1.35; color: var(--tekst-lys-dempet); }
.ki-rad { display: flex; align-items: baseline; gap: 0.5rem; min-height: 1.6rem; padding: 0.35rem 0; border-top: 1px solid var(--natt-linje); font-size: 0.8rem; }
.ki-rad b { font-weight: 500; }
.ki-rad span { color: var(--tekst-lys-dempet); font-size: 0.74rem; }
.ki-rad i { align-self: center; width: var(--b); height: 0.42rem; border-radius: 99px; background: var(--natt-flate-sterk); }
.ki-du b { color: var(--signal-lys); }

/* who we suit: the trades are examples, not a fence */
.hus-mer { margin-top: 0.9rem; padding-left: 1rem; font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-lys-dempet); }

/* our work: a site still being built has no link, only its state */
.ref-status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-tekst); }
.ref-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* about us: the founders under the text */
.om-tekst .om-signatur { margin-top: 2.25rem; }

/* what we see among craftsmen now, on a light ground (Sverre 02.11). The scenes were drawn for the night room: here the
   night tokens are mapped to their light twins, so the scenes keep their code */
.ser { background: var(--papir); color: var(--tekst); }
.ser .om-funn {
  --natt-2: var(--hvit); --natt-linje: var(--linje); --natt-svak: var(--tekst-dempet);
  --natt-flate: var(--kalk); --natt-flate-sterk: rgba(16, 21, 29, 0.09);
  --tekst-lys: var(--tekst); --tekst-lys-dempet: var(--tekst-dempet); --signal-lys: var(--signal-tekst);
}
.ser .om-derfor { color: var(--tekst); }
.ser .om-slutt { border-top-color: var(--linje); }
.ser .hode { margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.ser .funn-scene { box-shadow: 0 22px 44px -30px rgba(16, 21, 29, 0.35); }
.ser .om-slutt .knapp { justify-self: start; }
@media (min-width: 1000px) { .ser .om-slutt .knapp { justify-self: end; } }

/* booking: our reviews from Google by the deck (Sverre 02.11: «faktisk få frem vurderingene»): the text of each review in the
   page's own colours, standing still, the stars in the signal colour. From 900 px they fill the left column under the phone
   number while the deck spans both rows on the right; on a phone they follow the deck */
@media (min-width: 900px) {
  .book-rutenett { grid-template-rows: auto 1fr; }
  .book-tekst { grid-area: 1 / 1; }
  .book-kalender { grid-area: 1 / 2 / span 2; }
  .omtaler { grid-area: 2 / 1; }
}
/* where the deck fits under the menu, it stays in view beside the reviews, so no empty field opens under it. It sticks
   12 px under the menu, above the line where the film ends (js/sider.js kalRull: never under the menu + 14 px) */
@media (min-width: 1180px) and (min-height: 650px) {
  .book-kalender { position: sticky; top: calc(var(--meny-h) + 12px); }
}
.omtaler-hode { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding-bottom: 1.1rem; font-size: 0.95rem; font-weight: 500; color: var(--tekst-lys-dempet); }
.omtaler-snitt { font-size: 2.6rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--tekst-lys); }
.omtaler-stjerner { display: inline-flex; flex: none; gap: 2px; color: var(--signal); }
.omtaler-stjerner svg { width: 1.05rem; height: 1.05rem; }
.omtaler-liste { margin: 0; padding: 0; list-style: none; }
.omtale { padding: 1.15rem 0 1.2rem; border-top: 1px solid var(--natt-linje); }
.omtale blockquote { margin: 0; }
.omtale blockquote p { font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-lys); }
.omtale-navn { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 500; color: var(--tekst-lys-dempet); }
.omtale-bokstaver {
  display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border: 1px solid var(--natt-linje); border-radius: 50%;
  font-size: 0.7rem; letter-spacing: 0.06em; color: var(--tekst-lys);
}

/* who we suit, on a phone: the last line under the trades stays clear of the booking bar while the house stands still */
@media (max-width: 899px) { .js-anim .hus-scene { padding-bottom: 4.5rem; } }