/* Frekvens Digital: the hero «Slik kommer oppdraget».
   Two phones stand on the stage: the customer's and yours. They are drawn first, in fine lines with the
   construction lines around them; with the scroll the customer's phone turns real (the Google profile, the
   website, the form), the request travels as an orange signal to your phone, the customer says yes, the job is
   paid, and our share breaks off the end of the job's bar.
   --f (0 to 1) is the film, set by js/hero.js. Every size on the stage is in --u (one tenth of the drawings'
   units), so the drawings lie exactly on the real screens. Without js-anim the stage shows the finished film. */

@property --u { syntax: "<length>"; inherits: true; initial-value: 10px; }

.hero { position: relative; background: var(--kalk); }
.hero-scene {
  --f: 1;
  --m: 0; --pan: 0;
  --tx0: 0px; --ty0: 0px; --sc0: 1; --tx1: 0px; --ty1: 0px; --txR: 0px;
  position: relative; overflow: hidden;
  padding: calc(var(--meny-h) + 1.5rem) var(--marg) 3rem;
  background:
    radial-gradient(ellipse 55% 60% at 74% 56%, var(--papir), transparent 72%),
    var(--kalk);
}
html.js-anim .hero { height: calc(100svh * (1 + var(--hero-reise))); }
html.js-anim .hero-scene { position: sticky; top: 0; height: 100svh; min-height: 520px; padding: 0; }

/* ---------- the text ---------- */
.hero h1 { font-weight: var(--vekt-tittel); color: var(--tekst); }
.hero-over {
  display: flex; align-items: center; gap: 0.6em; margin-bottom: clamp(0.8rem, 2.4vh, 1.5rem);
  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;
}
.hero-over::before { content: ""; flex: none; width: 1.6rem; height: 1px; background: currentColor; }
.hero-hoved {
  display: block; font-size: clamp(2.2rem, min(4.3vw, 8vh), 4.6rem);
  letter-spacing: var(--sporing-tittel); line-height: 1.03; text-wrap: balance;
}
.hero-ingress { margin-top: clamp(1rem, 2.6vh, 1.6rem); max-width: 31rem; font-size: var(--str-ingress); line-height: 1.5; color: var(--tekst-dempet); }
.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.25rem, 3.4vh, 2.1rem); }

html.js-anim .hero-innhold {
  position: absolute; z-index: 3; left: var(--marg); top: calc(var(--meny-h) + clamp(1.25rem, 7vh, 5rem));
  width: min(34rem, 40vw);
}
html.js-anim .hero-innhold h1 > *, html.js-anim .hero-ingress, html.js-anim .hero-knapper { animation: hero-inn 0.9s var(--mykt) both; }
html.js-anim .hero-innhold h1 > :nth-child(2) { animation-delay: 0.06s; }
html.js-anim .hero-ingress { animation-delay: 0.14s; }
html.js-anim .hero-knapper { animation-delay: 0.22s; }
@keyframes hero-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- the caption of the film: the frekvens wave fills as the job comes in ---------- */
.hero-logg { display: none; }
html.js-anim .hero-logg {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; row-gap: 0.2rem;
  position: absolute; z-index: 3; left: var(--marg); bottom: clamp(1.25rem, 5vh, 3rem);
  width: min(34rem, 40vw); color: var(--tekst);
}
.logg-boelge { grid-row: span 2; width: 92px; height: 20px; overflow: visible; }
.logg-boelge path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logg-spor { stroke: var(--linje-sterk); stroke-width: 1.3; }
.logg-fyll { stroke: var(--signal); stroke-width: 2.4; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--f)); }
.logg-overskrift { 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; }
.logg-steg { font-size: 1.05rem; font-weight: 500; line-height: 1.3; }
.logg-steg [data-logg-nr] { color: var(--signal-tekst); font-variant-numeric: tabular-nums; margin-right: 0.5rem; }

/* ---------- the stage ---------- */
.scene {
  --u: 1em;
  position: relative; width: calc(72 * var(--u)); height: calc(66 * var(--u));
  margin: 2.5rem auto 0; font-size: clamp(4.4px, 1.18vw, 9px);
  color: var(--tekst);
}
/* the phones wait, unseen, for js/hero.js to measure them, so they never jump after the first paint (Lighthouse
   found a layout shift of 0.142 there 02.11.2026); without JavaScript or with reduced motion this never applies */
html.js-anim .hero-scene:not(.maalt) .scene { visibility: hidden; }
html.js-anim .scene {
  position: absolute; z-index: 1; left: 0; top: 0; margin: 0; font-size: var(--em, 10px);
  transform-origin: 0 0;
  transform:
    translate(calc(var(--tx0) + (var(--tx1) - var(--tx0)) * var(--m) + (var(--txR) - var(--tx1)) * var(--pan)),
              calc(var(--ty0) + (var(--ty1) - var(--ty0)) * var(--m)))
    scale(calc(var(--sc0) + (1 - var(--sc0)) * var(--m)));
}
.abs {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}

/* construction lines and measures */
.hjelp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hjelp path {
  fill: none; stroke: var(--strek-mal); stroke-width: calc(var(--sw, 1) * 0.8); stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--f) - var(--a)) / (var(--b) - var(--a))), 1));
}
.hjelp .hjelp-mal { stroke-width: calc(var(--sw, 1) * 1.1); }
.hjelp text {
  font-family: var(--mono); font-weight: 500; font-size: 11px; fill: var(--signal-tekst); letter-spacing: 0.04em;
  opacity: clamp(0, calc((var(--f) - var(--a)) / (var(--b) - var(--a))), 1);
}
.hjelp-kunde { opacity: calc(0.55 * (1 - clamp(0, calc((var(--f) - 0.21) / 0.1), 1))); }
.hjelp-deg { opacity: calc(0.55 * (1 - clamp(0, calc((var(--f) - 0.62) / 0.1), 1))); }

/* ---------- the phones ---------- */
.tlf { position: absolute; width: calc(26 * var(--u)); height: calc(56.2 * var(--u)); }
.tlf-kunde { left: calc(2 * var(--u)); top: calc(3 * var(--u)); z-index: 2; }
html.js-anim .tlf-kunde { opacity: calc(1 - 0.3 * clamp(0, calc((var(--f) - 0.82) / 0.06), 1)); }
.tlf-deg { left: calc(40 * var(--u)); top: calc(7 * var(--u)); z-index: 3; }

.tlf-ekte {
  position: absolute; inset: 0; border-radius: calc(4.2 * var(--u)); background: var(--tlf-kropp);
  box-shadow:
    inset 0 0 0 calc(0.12 * var(--u)) var(--tlf-kant),
    0 calc(3.2 * var(--u)) calc(5 * var(--u)) calc(-2 * var(--u)) var(--skygge-tlf),
    0 calc(1 * var(--u)) calc(2.2 * var(--u)) calc(-1 * var(--u)) rgba(16, 21, 29, 0.16);
}
html.js-anim .tlf-ekte {
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--r) * 70 * var(--u) - 6 * var(--u)), transparent calc(var(--r) * 70 * var(--u)));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--r) * 70 * var(--u) - 6 * var(--u)), transparent calc(var(--r) * 70 * var(--u)));
}
.tlf-kunde .tlf-ekte { --ox: 50%; --oy: 13.7%; --r: clamp(0, calc((var(--f) - 0.18) / 0.11), 1); }
.tlf-deg .tlf-ekte { --ox: 8.5%; --oy: 41.5%; --r: clamp(0, calc((var(--f) - 0.595) / 0.11), 1); }

.tlf-skjerm {
  position: absolute; left: calc(1.1 * var(--u)); top: calc(1.1 * var(--u));
  width: calc(23.8 * var(--u)); height: calc(54 * var(--u));
  border-radius: calc(3.2 * var(--u)); overflow: hidden; background: var(--skjerm); isolation: isolate;
}
.tlf-skjerm::after {
  content: ""; position: absolute; z-index: 30; left: calc(8.6 * var(--u)); top: calc(1 * var(--u));
  width: calc(6.6 * var(--u)); height: calc(2.2 * var(--u)); border-radius: calc(1.1 * var(--u)); background: #000;
}

/* the drawing of each phone */
.tlf-strek { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
html.js-anim .tlf-strek { display: block; }
.tlf-strek path {
  fill: none; stroke: var(--strek); stroke-width: calc(var(--sw, 1) * 1.3); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--f) - var(--a)) / (var(--b) - var(--a))), 1));
}
.tlf-strek .t-f { stroke-width: calc(var(--sw, 1) * 0.9); }
.tlf-strek .t-l { stroke-width: calc(var(--sw, 1) * 0.8); opacity: 0.55; }
.tlf-kunde .tlf-strek { opacity: calc(1 - clamp(0, calc((var(--f) - 0.215) / 0.075), 1)); }
.tlf-deg .tlf-strek { opacity: calc(1 - clamp(0, calc((var(--f) - 0.635) / 0.075), 1)); }

/* the name over each phone, and what we build for that step */
.tlf-navn {
  position: absolute; left: 0; bottom: 100%; margin-bottom: calc(1.3 * var(--u));
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(1 * var(--u));
  font-family: var(--mono); font-size: calc(0.95 * var(--u)); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tekst-dempet); white-space: nowrap; line-height: 1.2;
}
.tlf-tagg {
  grid-area: 1 / 2; display: flex; align-items: center; gap: calc(0.8 * var(--u)); color: var(--signal-tekst);
  opacity: 0;
}
.tlf-tagg::before { content: ""; width: calc(1.8 * var(--u)); height: 1px; background: var(--signal); }
html.js-anim .tlf-tagg {
  opacity: calc(clamp(0, calc((var(--f) - var(--ta)) / 0.025), 1) * (1 - clamp(0, calc((var(--f) - var(--tb)) / 0.025), 1)));
}
.tlf-tagg[data-tagg="1"] { --ta: 0.2; --tb: 0.3; }
.tlf-tagg[data-tagg="2"] { --ta: 0.32; --tb: 0.455; }
.tlf-tagg[data-tagg="3"] { --ta: 0.475; --tb: 0.6; }
.tlf-tagg[data-tagg="4"] { --ta: 0.62; --tb: 0.79; }

/* status bar */
.statuslinje {
  position: absolute; z-index: 25; left: 0; right: 0; top: 0; height: calc(4.2 * var(--u));
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 calc(2.1 * var(--u)) 0 calc(2.9 * var(--u));
  font-size: calc(1.3 * var(--u)); font-weight: 500; color: var(--tekst); letter-spacing: -0.01em;
}
.statuslinje.lys { color: #fff; }
.status-ikoner { display: flex; align-items: center; gap: calc(0.5 * var(--u)); }
.status-ikoner svg { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); }
.status-ikoner .batteri { width: calc(2.4 * var(--u)); height: calc(1.2 * var(--u)); }

/* ---------- the customer's phone: screen 1, the Google profile ---------- */
.skjerm { position: absolute; inset: 0; }
.s-profil { background: var(--skjerm); }
.sok {
  display: flex; align-items: center; gap: calc(0.8 * var(--u)); padding: 0 calc(1.4 * var(--u));
  border-radius: calc(1.9 * var(--u)); background: var(--skjerm-flate);
}
.sok svg { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); color: var(--tekst-svak); flex: none; }
.sok span { font-size: calc(1.25 * var(--u)); color: var(--tekst); }
.kart { border-radius: calc(1.4 * var(--u)); overflow: hidden; background: var(--kart-land); }
.kart > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.kart-vann { fill: var(--kart-vann); }
.kart-vei { fill: none; stroke: var(--kart-vei); stroke-width: 5; stroke-linecap: round; }
.kart-vei.tynn { stroke-width: 3; }
.kart-pin {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(2.2 * var(--u)); height: calc(2.9 * var(--u)); color: var(--signal);
  filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(16, 21, 29, 0.3));
}
.profil-bilde { object-fit: cover; border-radius: calc(1.4 * var(--u)); }
.profil-navn { font-size: calc(1.8 * var(--u)); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.profil-info { display: flex; align-items: center; gap: calc(0.7 * var(--u)); font-size: calc(1.1 * var(--u)); color: var(--tekst-dempet); white-space: nowrap; line-height: 1.2; }
.stjerner { display: inline-flex; gap: calc(0.12 * var(--u)); }
.stjerner svg { width: calc(1.15 * var(--u)); height: calc(1.15 * var(--u)); color: var(--stjerne); }
.profil-knapper { display: flex; gap: calc(0.8 * var(--u)); }
.pk {
  position: relative; width: calc(var(--w) * var(--u)); height: 100%;
  display: flex; align-items: center; justify-content: center; gap: calc(0.5 * var(--u));
  border: calc(0.1 * var(--u)) solid var(--linje-sterk); border-radius: calc(1.6 * var(--u));
  font-size: calc(1.1 * var(--u)); font-weight: 500; color: var(--tekst);
}
.pk svg { width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); }
.pk-nett::after {
  content: ""; position: absolute; inset: calc(-0.45 * var(--u)); border-radius: calc(2 * var(--u));
  border: calc(0.22 * var(--u)) solid var(--signal); opacity: 0;
}
html.js-anim .pk-nett::after {
  opacity: calc(clamp(0, calc((var(--f) - 0.265) / 0.02), 1) * (1 - clamp(0, calc((var(--f) - 0.33) / 0.03), 1)));
}
.faner {
  display: flex; gap: calc(1.6 * var(--u)); height: calc(2.2 * var(--u));
  border-bottom: calc(0.1 * var(--u)) solid var(--linje); font-size: calc(1.1 * var(--u)); color: var(--tekst-svak); line-height: 1.2;
}
.faner .aktiv { color: var(--tekst); font-weight: 500; border-bottom: calc(0.2 * var(--u)) solid var(--tekst); }
.skjelett { height: calc(0.7 * var(--u)); border-radius: calc(0.35 * var(--u)); background: var(--skjerm-linje); }

/* a finger's tap */
.trykk {
  position: absolute; z-index: 20; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); margin: calc(-1.7 * var(--u)) 0 0 calc(-1.7 * var(--u));
  border-radius: 50%; background: rgba(16, 21, 29, 0.14); border: calc(0.18 * var(--u)) solid rgba(16, 21, 29, 0.35);
  --t: clamp(0, calc((var(--f) - var(--a)) / (var(--b) - var(--a))), 1);
  transform: scale(calc(0.55 + var(--t) * 0.9));
  opacity: calc(min(1, var(--t) * 8) * (1 - var(--t)));
}

/* ---------- screen 2, the website we build ---------- */
.s-side {
  background: var(--skjerm); z-index: 5;
  --s2l: clamp(0, calc((var(--f) - 0.31) / 0.08), 1);
  --s2: calc(var(--s2l) * var(--s2l) * (3 - 2 * var(--s2l)));
  transform: translateY(calc((1 - var(--s2)) * 102%));
  box-shadow: 0 calc(-1.5 * var(--u)) calc(4 * var(--u)) rgba(16, 21, 29, 0.14);
}
.side-rull { position: absolute; inset: 0; }
.side-topp { display: flex; justify-content: space-between; align-items: center; }
.side-topp > span:first-child { font-size: calc(1.35 * var(--u)); font-weight: 500; letter-spacing: -0.02em; }
.side-meny { display: grid; gap: calc(0.45 * var(--u)); width: calc(1.9 * var(--u)); }
.side-meny i { display: block; height: calc(0.16 * var(--u)); background: var(--tekst); }
.side-bilde { overflow: hidden; }
.side-bilde img { width: 100%; height: 100%; object-fit: cover; }
.side-bilde::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(10, 12, 16, 0.62)); }
.side-over, .side-tittel { position: absolute; z-index: 1; left: calc(1.4 * var(--u)); color: #fff; }
.side-over { bottom: calc(6.2 * var(--u)); font-family: var(--mono); font-size: calc(0.78 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.side-tittel { bottom: calc(1.5 * var(--u)); font-size: calc(2.3 * var(--u)); font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; }
.side-knapp {
  display: flex; align-items: center; justify-content: center; border-radius: calc(1.7 * var(--u));
  background: var(--tekst); color: #fff; font-size: calc(1.15 * var(--u)); font-weight: 500;
}
.side-knapp.omriss { background: transparent; color: var(--tekst); border: calc(0.1 * var(--u)) solid var(--linje-sterk); }
.side-liste li {
  display: flex; justify-content: space-between; align-items: center; height: calc(3.5 * var(--u));
  border-bottom: calc(0.1 * var(--u)) solid var(--linje); font-size: calc(1.2 * var(--u));
}
.side-liste svg { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); color: var(--tekst-svak); }
.side-omtale { display: flex; align-items: center; gap: calc(0.6 * var(--u)); font-size: calc(1.05 * var(--u)); color: var(--tekst-dempet); white-space: nowrap; }

/* ---------- screen 3, the form ---------- */
.s-skjema { z-index: 10; pointer-events: none; }
.skjema-dim { position: absolute; inset: 0; background: rgba(10, 12, 16, 0.38); opacity: clamp(0, calc((var(--f) - 0.46) / 0.05), 1); }
.skjema-ark {
  position: absolute; left: 0; right: 0; top: calc(22.5 * var(--u)); bottom: 0;
  background: var(--skjerm); border-radius: calc(2.2 * var(--u)) calc(2.2 * var(--u)) 0 0;
  box-shadow: 0 calc(-1 * var(--u)) calc(3 * var(--u)) rgba(10, 12, 16, 0.18);
  --s3l: clamp(0, calc((var(--f) - 0.465) / 0.06), 1);
  transform: translateY(calc((1 - var(--s3l) * var(--s3l) * (3 - 2 * var(--s3l))) * 105%));
}
.skjema-hank { position: absolute; left: 50%; top: calc(0.8 * var(--u)); width: calc(3.6 * var(--u)); height: calc(0.5 * var(--u)); margin-left: calc(-1.8 * var(--u)); border-radius: 99px; background: rgba(16, 21, 29, 0.2); }
.skjema-tittel { position: absolute; left: calc(1.3 * var(--u)); top: calc(2.3 * var(--u)); font-size: calc(1.9 * var(--u)); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.skjema-etikett { position: absolute; left: calc(1.3 * var(--u)); top: calc(var(--y) * var(--u)); font-size: calc(1 * var(--u)); color: var(--tekst-svak); line-height: 1.2; }
.skjema-felt {
  position: absolute; left: calc(1.3 * var(--u)); right: calc(1.3 * var(--u)); top: calc(var(--y) * var(--u)); height: calc(3.6 * var(--u));
  display: flex; align-items: center; padding: 0 calc(1.2 * var(--u));
  border: calc(0.1 * var(--u)) solid var(--linje-sterk); border-radius: calc(1 * var(--u));
  font-size: calc(1.3 * var(--u)); white-space: nowrap;
}
.skjema-skrevet { --t: clamp(0, calc((var(--f) - 0.49) / 0.035), 1); clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); }
.skjema-skrevet.to { --t: clamp(0, calc((var(--f) - 0.528) / 0.018), 1); }
.skjema-send {
  position: absolute; left: calc(1.3 * var(--u)); right: calc(1.3 * var(--u)); top: calc(20 * var(--u)); height: calc(4 * var(--u));
  display: grid; place-items: center; border-radius: calc(2 * var(--u)); background: var(--tekst); color: #fff;
  font-size: calc(1.25 * var(--u)); font-weight: 500;
  --k: clamp(0, calc((var(--f) - 0.552) / 0.012), 1);
  --trykk: calc(clamp(0, calc((var(--f) - 0.54) / 0.008), 1) - var(--k));
  transform: scale(calc(1 - 0.035 * var(--trykk)));
}
.skjema-send > span { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(0.6 * var(--u)); }
.send-tekst { opacity: calc(1 - var(--k)); }
.send-ferdig { opacity: var(--k); }
.send-ferdig svg { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); color: var(--signal); }

/* ---------- your phone: the lock screen ---------- */
.laas {
  background: #1a1e26;
  --q1l: clamp(0, calc((var(--f) - 0.615) / 0.045), 1);
  --q2l: clamp(0, calc((var(--f) - 0.675) / 0.05), 1);
  --q3l: clamp(0, calc((var(--f) - 0.795) / 0.045), 1);
  --q1: calc(var(--q1l) * var(--q1l) * (3 - 2 * var(--q1l)));
  --q2: calc(var(--q2l) * var(--q2l) * (3 - 2 * var(--q2l)));
  --q3: calc(var(--q3l) * var(--q3l) * (3 - 2 * var(--q3l)));
}
.laas-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.laas-ikon { color: #fff; }
.laas-tid {
  position: absolute; left: 0; right: 0; top: calc(8.1 * var(--u)); text-align: center; color: #fff;
  font-size: calc(6.4 * var(--u)); font-weight: 300; letter-spacing: -0.03em; line-height: 1;
}
.varsel {
  position: absolute; left: calc(1.1 * var(--u)); top: calc(18.9 * var(--u)); width: calc(21.6 * var(--u)); height: calc(6.6 * var(--u));
  border-radius: calc(1.8 * var(--u)); background: var(--varsel); color: #fff;
  box-shadow: 0 calc(0.6 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25);
  transform-origin: 50% 0;
}
.v1 { opacity: var(--q1); transform: translateY(calc((var(--q2) + var(--q3)) * 7.4 * var(--u) - (1 - var(--q1)) * 1.4 * var(--u))) scale(calc(0.94 + 0.06 * var(--q1))); }
.v2 { opacity: var(--q2); transform: translateY(calc(var(--q3) * 7.4 * var(--u) - (1 - var(--q2)) * 1.4 * var(--u))) scale(calc(0.94 + 0.06 * var(--q2))); }
.v3 { opacity: var(--q3); transform: translateY(calc((1 - var(--q3)) * -1.4 * var(--u))) scale(calc(0.94 + 0.06 * var(--q3))); }
.varsel-ikon {
  position: absolute; left: calc(1.15 * var(--u)); top: calc(1.15 * var(--u)); width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u));
  display: grid; place-items: center; border-radius: calc(0.7 * var(--u));
}
.varsel-ikon.frekvens { background: var(--signal); }
.varsel-ikon.frekvens svg { width: calc(1.8 * var(--u)); height: calc(1.3 * var(--u)); overflow: visible; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.varsel-ikon.bank { background: #2c5a85; }
.varsel-ikon.bank svg { width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); color: #fff; }
.varsel-tittel {
  position: absolute; left: calc(4.8 * var(--u)); right: calc(1.3 * var(--u)); top: calc(1.2 * var(--u));
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: calc(1.25 * var(--u)); font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.varsel-tittel span { font-size: calc(1 * var(--u)); font-weight: 400; opacity: 0.6; }
.varsel-tekst {
  position: absolute; left: calc(4.8 * var(--u)); right: calc(1.3 * var(--u)); top: calc(3.45 * var(--u));
  font-size: calc(1.12 * var(--u)); line-height: 1.2; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- the signal and the pulses ---------- */
.signal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; display: none; }
html.js-anim .signal { display: block; }
.signal-spor {
  fill: none; stroke: var(--signal); stroke-width: calc(var(--sw, 1) * 2.2); stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--f) - 0.555) / 0.07), 1));
  opacity: calc(1 - 0.65 * clamp(0, calc((var(--f) - 0.68) / 0.08), 1));
}
.signal-hode {
  position: absolute; z-index: 6; left: 0; top: 0; width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u));
  margin: calc(-0.75 * var(--u)) 0 0 calc(-0.75 * var(--u)); border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 calc(0.55 * var(--u)) rgba(255, 90, 31, 0.22), 0 0 calc(2.2 * var(--u)) var(--signal-glod);
  opacity: 0; pointer-events: none;
}

.puls {
  position: absolute; z-index: 4; width: calc(140 * var(--u)); height: calc(140 * var(--u));
  margin: calc(-70 * var(--u)) 0 0 calc(-70 * var(--u)); border-radius: 50%; pointer-events: none;
  border: calc(0.45 * var(--u)) solid var(--signal);
  box-shadow: 0 0 calc(2.4 * var(--u)) var(--signal-glod), inset 0 0 calc(2.4 * var(--u)) var(--signal-glod);
  transform: scale(var(--pr)); opacity: calc((1 - var(--pr)) * min(1, var(--pr) * 40) * 0.85);
  display: none;
}
html.js-anim .puls { display: block; }
.puls::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%; border: calc(0.5 * var(--u)) solid var(--signal);
  opacity: calc(min(1, var(--pr) * 40) * 0.5);
}
.puls-kunde { left: calc(15 * var(--u)); top: calc(10.7 * var(--u)); --pr: clamp(0, calc((var(--f) - 0.18) / 0.12), 1); }
.puls-deg { left: calc(42.2 * var(--u)); top: calc(30.3 * var(--u)); --pr: clamp(0, calc((var(--f) - 0.595) / 0.12), 1); }

/* ---------- the job: paid, and our share breaks off the end ---------- */
.oppdrag {
  position: absolute; z-index: 7; left: calc(7 * var(--u)); top: calc(49 * var(--u)); width: calc(58 * var(--u));
  padding: calc(2.4 * var(--u)) calc(2.8 * var(--u)) calc(2.3 * var(--u));
  border-radius: calc(1.6 * var(--u)); background: var(--hvit);
  box-shadow: 0 calc(2.4 * var(--u)) calc(5 * var(--u)) calc(-1.6 * var(--u)) rgba(16, 21, 29, 0.28), 0 0 0 1px rgba(16, 21, 29, 0.05);
  --cl: clamp(0, calc((var(--f) - 0.82) / 0.055), 1);
  --c: calc(var(--cl) * var(--cl) * (3 - 2 * var(--cl)));
  --bf: clamp(0, calc((var(--f) - 0.86) / 0.06), 1);
  --k: clamp(0, calc((var(--f) - 0.915) / 0.05), 1);
  opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 3 * var(--u)));
}
.oppdrag-over { font-family: var(--mono); font-size: calc(1.05 * var(--u)); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-tekst); line-height: 1.2; }
.oppdrag-tittel {
  display: flex; justify-content: space-between; align-items: center; margin-top: calc(0.5 * var(--u));
  font-size: calc(2.5 * var(--u)); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15;
}
.oppdrag-tittel span {
  display: inline-flex; align-items: center; gap: calc(0.4 * var(--u)); padding: calc(0.35 * var(--u)) calc(0.9 * var(--u));
  border-radius: 99px; background: var(--kalk); font-size: calc(1.2 * var(--u)); font-weight: 500; letter-spacing: 0;
  color: var(--tekst-dempet); opacity: clamp(0, calc((var(--f) - 0.845) / 0.025), 1);
}
.oppdrag-tittel span svg { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); color: var(--tekst); }
.oppdrag-strek {
  position: relative; height: calc(2 * var(--u)); margin-top: calc(1.9 * var(--u));
  transform-origin: 0 50%; transform: scaleX(var(--bf));
}
.oppdrag-ditt { position: absolute; left: 0; top: 0; bottom: 0; right: 9%; border-radius: 99px 0 0 99px; background: var(--tekst); }
.oppdrag-andel {
  position: absolute; top: 0; bottom: 0; right: 0; width: 9%; border-radius: 0 99px 99px 0; background: var(--tekst);
  transform: translate(calc(var(--k) * 1.5 * var(--u)), calc(var(--k) * -1 * var(--u))) rotate(calc(var(--k) * -6deg));
}
.oppdrag-andel::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background: var(--signal); opacity: var(--k); box-shadow: 0 0 calc(1.6 * var(--u)) var(--signal-glod); }
.oppdrag-strek .puls {
  left: 95.5%; top: 50%; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(-13 * var(--u)) 0 0 calc(-13 * var(--u));
  border-width: calc(0.35 * var(--u)); --pr: clamp(0, calc((var(--f) - 0.925) / 0.07), 1);
}
.oppdrag-etiketter {
  display: flex; justify-content: space-between; margin-top: calc(1.3 * var(--u));
  font-size: calc(1.4 * var(--u)); line-height: 1.2; opacity: var(--k);
}
.e-ditt { color: var(--tekst-dempet); }
.e-andel { color: var(--signal-tekst); font-weight: 500; }

/* ---------- layouts ---------- */
/* wide screens: the text on the left, the stage on the right (placed by js/hero.js) */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html:not(.js-anim) .hero-scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; }
  html:not(.js-anim) .scene { margin: 0; }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 720px) {
  .hero-hoved { font-size: clamp(2rem, min(3.9vw, 7.6vh), 3.6rem); }
  .hero-ingress { font-size: 1.0625rem; }
}

/* upright and small screens: the text first; with the scroll it leaves, and the camera goes in on the
   customer's phone, then follows the signal over to yours */
@media not all and (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html.js-anim .hero-scene {
    --ml: clamp(0, calc((var(--f) - 0.17) / 0.11), 1);
    --m: calc(var(--ml) * var(--ml) * (3 - 2 * var(--ml)));
    --pl: clamp(0, calc((var(--f) - 0.535) / 0.1), 1);
    --pan: calc(var(--pl) * var(--pl) * (3 - 2 * var(--pl)));
  }
  html.js-anim .hero-innhold {
    left: var(--marg); right: var(--marg); width: auto; top: calc(var(--meny-h) + 1rem);
    transform: translateY(calc(var(--m) * -1 * var(--txt-h, 70vh))); opacity: calc(1 - var(--m) * 1.6);
  }
  .hero-hoved { font-size: clamp(2.05rem, 8.6vw, 3.2rem); }
  .hero-knapper .knapp { flex: 1 1 auto; }
  html.js-anim .hero-logg {
    left: var(--marg); right: var(--marg); width: auto; bottom: 0.9rem;
    padding-top: 0.6rem; opacity: var(--m);
  }
  .logg-overskrift { display: none; }
  .logg-boelge { grid-row: auto; width: 44px; }
  .logg-steg { font-size: 0.95rem; }
  .oppdrag { left: calc(34.5 * var(--u)); width: calc(37 * var(--u)); top: calc(48 * var(--u)); }
  .tlf-navn { font-size: calc(1.05 * var(--u)); }
}
@media (max-width: 899px) and (max-aspect-ratio: 1/1) and (min-width: 600px) {
  html.js-anim .hero-innhold { right: auto; width: min(36rem, 80vw); }
}