/* Havbyen. Sidens egne regler. Motoren (scrollcraft.css) restyles ikke:
   [data-sc-*], .sc-world og .sc-world__seg eies av den. */

/* ------------------------------------------------------------- fonter -- */
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------ tokens -- */
:root {
  --surface: #BFE3EA;
  --deep:    #0A2A3F;
  --abyss:   #04111C;
  --tide:    #125E73;
  --glow:    #5CE1E6;
  --pearl:   #EAF4F4;
  --mist:    #9FBFC4;
  --relic:   #C9A45C;

  --sc-canvas: var(--abyss);
  --sc-surface: var(--deep);
  --sc-ink: var(--pearl);
  --sc-ink-soft: var(--mist);
  --sc-accent: var(--glow);
  --sc-accent-ink: var(--abyss);
  --sc-shadow-color: 205 75% 5%;
  --sc-font-display: "Clash Display", "General Sans", system-ui, sans-serif;
  --sc-font-text: "General Sans", system-ui, sans-serif;

  --mobil-bar: 3.25rem;
  --r-kort: 16px;
  --r-knapp: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* expo.out */
}

body { background: var(--abyss); }

/* Før motoren har startet. Motoren gjør scenen fast ved å legge på klasser
   (.sc-world, .sc-world__seg …) når scriptet kjører. Tegner nettleseren siden
   før det, ligger scenen i vanlig flyt og hopper på plass etterpå (CLS).
   De samme reglene her, på attributtene som står i HTML-en fra start, gjør at
   første tegning er identisk med den etter oppstart. */
[data-sc-world] { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); }
[data-sc-segment] { position: absolute; inset: 0; opacity: 0; }
[data-sc-segment] > picture, [data-sc-segment] > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-sc-segment] > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-sc-world-copy] { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; }
html:not(.sc-ready) [data-sc-segment]:first-child { opacity: 1; }
html:not(.sc-ready) #overflaten { opacity: 1; }
/* Lag som følger en tekstblokk (innhugget, footeren) er av til blokken er oppe. */
[data-hb-folg] { opacity: 0; visibility: hidden; }

[hidden] { display: none !important; }  /* skjulte plassholdere skal aldri tvinges fram av en display-regel */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ typografi -- */
.tittel {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--pearl);
}
.tittel--hero { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); letter-spacing: -0.03em; line-height: 0.98; }
.tittel--kort { font-size: var(--sc-t-xl); letter-spacing: -0.015em; line-height: 1.08; }
.ingress { font-size: var(--sc-t-lg); line-height: 1.45; max-width: 34ch; margin: var(--sc-5) 0 0; color: var(--pearl); text-wrap: pretty; font-weight: 500; }
.brod { font-size: var(--sc-t-base); line-height: 1.66; letter-spacing: 0.005em; max-width: 44ch; margin: var(--sc-4) 0 0; color: var(--pearl); text-wrap: pretty; }
/* Brødtekst rett på film: litt tyngre og med en myk skygge som skiller den fra lysstrålene. */
.kopi > .brod { font-weight: 500; text-shadow: 0 1px 2px hsl(205 80% 4% / 0.9), 0 0 18px hsl(205 80% 4% / 0.75); }
.overlinje { font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--glow); margin: 0 0 var(--sc-3); font-weight: 600; }
.fotnote { font-size: var(--sc-t-xs); color: var(--mist); margin: var(--sc-5) 0 0; letter-spacing: 0.01em; }
.tabell-tall { font-variant-numeric: tabular-nums; }

/* Linje for linje: js/havbyen.js deler overskriften i linjer og setter
   --i per linje. Linjen løftes inn når blokken får .er-inne. */
[data-hb-linjer] .linje { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-hb-linjer] .linje > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.er-inne [data-hb-linjer] .linje > span,
.er-inne[data-hb-linjer] .linje > span { transform: none; }

/* --------------------------------------------------------------- knapper -- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.8rem 1.35rem;
  border-radius: var(--r-knapp);
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text);
  letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.knapp:active { transform: scale(0.97); }
.knapp--primar { background: var(--glow); color: var(--abyss); box-shadow: 0 6px 18px -6px hsl(185 80% 40% / 0.55); }
.knapp--sekundar { color: var(--pearl); border: 1px solid color-mix(in oklab, var(--pearl) 45%, transparent); background: color-mix(in oklab, var(--abyss) 35%, transparent); }
.knapp--mork { background: var(--deep); color: var(--pearl); }
.knapp--liten { min-height: 2.5rem; padding: 0.6rem 1rem; }
.knapp--stor { min-height: 3.5rem; padding: 1rem 1.75rem; font-size: var(--sc-t-base); }
@media (hover: hover) and (pointer: fine) {
  .knapp--primar:hover { background: #8BECEF; transform: translateY(-1px); }
  .knapp--sekundar:hover { border-color: var(--pearl); background: color-mix(in oklab, var(--abyss) 55%, transparent); }
  .knapp--mork:hover { background: var(--tide); }
}
.knapper { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.kort--lys :focus-visible, .bunn :focus-visible { outline-color: var(--tide); }

/* ------------------------------------------------------------------ topp -- */
.topp {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  pointer-events: none;
}
.topp > * { pointer-events: auto; }
.topp__logo {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.45rem 1rem 0.45rem 0.6rem; border-radius: 12px;
  /* Lys logo på egen mørk plate, så den synes over lyst vann og korallrevet også. */
  background: color-mix(in oklab, var(--abyss) 78%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--sc-e2), inset 0 1px 0 hsl(0 0% 100% / 0.08);
  text-decoration: none; color: var(--pearl);
  font: 600 var(--sc-t-base)/1 var(--sc-font-display); letter-spacing: 0.005em;
}
.topp__logo img { width: 2.9rem; height: auto; display: block; }

/* ------------------------------------------------------------- rammer --
   Et 16:9-kort som dekker skjermen nøyaktig slik object-fit: cover dekker
   videoen. Alt som skal treffe noe i filmen (porten, treforken, platen,
   gaten, sanden) plasseres i prosent av denne rammen. */
.ramme {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 100dvh * 16 / 9);
  aspect-ratio: 16 / 9;
  translate: -50% -50%;
  container-type: inline-size;
  pointer-events: none;
}
.ramme > * { position: absolute; }
.sc-world__seg > picture { position: absolute; inset: 0; }
.sc-world__seg > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-world__seg > .lokke { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.sc-world__seg > .lokke.spiller { opacity: 1; }
/* Plakaten ligger ALLTID under videoen. Motoren skjuler den etter 2,5 s selv om
   klippet aldri har malt et bilde (dekoder som feiler, strømsparing, blokkert
   avspilling), og da blir scenen svart. En video som ikke har malt noe er
   gjennomsiktig, så plakaten synes; en video som spiller dekker den. */
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 1; }
.sc-world__seg > canvas.blakopi { z-index: 2; }
.sc-world__seg > picture.statue-uten { z-index: 1; opacity: 0; }
.sc-world__seg > .ramme { z-index: 3; }
.grunn { position: absolute; inset: 0; }
.grunn--byregister {
  background:
    radial-gradient(ellipse 60% 55% at 50% 55%, color-mix(in oklab, var(--abyss) 20%, transparent), color-mix(in oklab, var(--abyss) 70%, transparent) 100%),
    url("../assets/bilder/havbyen-uskarp.webp") center / cover,
    var(--abyss);
  transform: scale(calc(1.02 + var(--sc-segp, 0) * 0.08));
  will-change: transform;
}

/* Plantegningen i sanden: tegner seg selv (stroke-dashoffset fra JS). */
.ramme--sand .plantegning {
  position: absolute; left: 12%; top: 64%; width: 30%;
  transform: perspective(900px) rotateX(62deg) rotateZ(-6deg);
  transform-origin: 50% 60%;
  overflow: visible;
}
.plantegning path { stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--tegn, 1); opacity: 0.9; }
.plantegning path:nth-child(4) { stroke-width: 1.4; opacity: 0.6; }

/* ------------------------------------------------------------- effektlag -- */
.fx { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: clip; }
.fx > * { position: absolute; }
.partikler { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.partikler--bak { z-index: 0; }
.partikler--foran { z-index: 30; }

.fx__hero-lys {
  inset: -10%;
  background:
    radial-gradient(ellipse 38% 30% at 50% 4%, hsl(38 90% 78% / 0.55), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 0%, hsl(190 60% 70% / 0.18), transparent 70%),
    repeating-linear-gradient(100deg, transparent 0 7%, hsl(40 80% 85% / 0.05) 7.5% 9%, transparent 9.5% 16%);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
}
.fx__dyp {
  inset: 0;
  background: linear-gradient(to top, var(--deep) 0%, color-mix(in oklab, var(--deep) 70%, transparent) 30%, transparent 70%);
  opacity: 0;
}
.fx__gull {
  left: 50%; top: 60%; width: 30%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(44 100% 92%) 0%, hsl(41 95% 70% / 0.95) 16%, hsl(36 90% 55% / 0.7) 34%, hsl(30 85% 42% / 0.35) 52%, hsl(28 80% 30% / 0) 72%);
  mix-blend-mode: screen;
  transform: scale(0.3); opacity: 0;
  will-change: transform, opacity;
}
.fx__spyd, .fx__strale { inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx__spyd path, .fx__strale path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx__spyd-bane { stroke: hsl(184 90% 70% / 0.28); stroke-width: 34; }
.fx__spyd-kjerne { stroke: var(--pearl); stroke-width: 6; }
.fx__spyd-spiss { fill: var(--pearl); opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx__strale-bane { stroke: hsl(184 90% 70% / 0.3); stroke-width: 44; }
.fx__strale-kjerne { stroke: hsl(184 100% 94%); stroke-width: 9; }
.fx__strale-hode { fill: var(--pearl); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.2); }
.fx__spyd, .fx__strale { opacity: 0; }
.fx__blink {
  inset: 0;
  background: radial-gradient(circle at var(--bx, 20%) var(--by, 78%), hsl(184 100% 96%) 0%, hsl(184 90% 72% / 0.95) 18%, hsl(195 80% 40% / 0.6) 45%, hsl(200 80% 20% / 0) 80%);
  opacity: 0;
}
.fx__lysstraler {
  inset: -20% -10% 0;
  background:
    repeating-linear-gradient(104deg, transparent 0 6%, hsl(188 70% 80% / 0.07) 6.6% 7.8%, transparent 8.6% 13%),
    repeating-linear-gradient(97deg, transparent 0 9%, hsl(190 70% 85% / 0.05) 9.5% 10.4%, transparent 11% 17%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 80%);
  opacity: 0;
  animation: straler 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes straler { from { transform: translate3d(-2%, 0, 0) skewX(-2deg); } to { transform: translate3d(2%, 0, 0) skewX(2deg); } }
.fx__turkis { inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 15%, hsl(180 70% 62%), hsl(188 70% 38%)); mix-blend-mode: screen; opacity: 0; }


/* --------------------------------------------------------------- slør --
   Mørke der teksten står, ikke over hele bildet. Opasiteten følger tekstblokken. */
.slor { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.slor--hero { background: linear-gradient(20deg, color-mix(in oklab, var(--abyss) 82%, transparent) 0%, color-mix(in oklab, var(--abyss) 55%, transparent) 30%, transparent 62%); }
.slor--venstre { background: linear-gradient(90deg, color-mix(in oklab, var(--abyss) 92%, transparent) 0%, color-mix(in oklab, var(--abyss) 80%, transparent) 32%, color-mix(in oklab, var(--abyss) 40%, transparent) 50%, transparent 64%); }
.slor--hoyre { background: linear-gradient(270deg, color-mix(in oklab, var(--abyss) 92%, transparent) 0%, color-mix(in oklab, var(--abyss) 80%, transparent) 32%, color-mix(in oklab, var(--abyss) 40%, transparent) 50%, transparent 64%); }
.slor--topp { background: radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in oklab, var(--abyss) 94%, transparent) 0%, color-mix(in oklab, var(--abyss) 80%, transparent) 45%, transparent 100%); }
.slor--bunn { background: linear-gradient(0deg, color-mix(in oklab, var(--abyss) 88%, transparent) 0%, color-mix(in oklab, var(--abyss) 55%, transparent) 30%, transparent 56%); }
.slor--kun-mobil { display: none; }

/* --------------------------------------------------------------- kopi -- */
.kopi { position: absolute; }
.kopi--hero { left: var(--sc-gutter); bottom: 12vh; max-width: 46rem; }
.kopi--venstre, .kopi--hoyre {
  top: 0; bottom: 0; margin-block: auto; height: fit-content;
  max-width: 30rem;
}
.kopi--venstre { left: var(--sc-gutter); }
.kopi--hoyre { right: calc(var(--sc-gutter) + 4.5rem); }
.kopi--bred { max-width: 52rem; }
.kopi--portene { left: var(--sc-gutter); top: 15vh; max-width: 48rem; }
.kopi--midt { inset: 0; margin: auto; height: fit-content; width: min(46rem, 100% - 2 * var(--sc-gutter)); }
.kopi--statue { inset: 0; }
.kopi--havbyen { inset: 0; }
.kopi--havbyen > .tittel { position: absolute; left: var(--sc-gutter); top: 15vh; max-width: 26rem; font-size: var(--sc-t-xl); }

/* Skumring: tre steg */
.steg { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; gap: var(--sc-4); }
.steg li { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: var(--sc-3); font-size: var(--sc-t-lg); line-height: 1.35; font-weight: 500; }
.steg__nr { font: 600 var(--sc-t-sm)/1 var(--sc-font-display); color: var(--abyss); background: var(--glow); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; translate: 0 -0.1em; }

/* Portene: logoer (plassholdere til ekte logoer kommer) */
/* Portene: logoveggen. Alle logoer hvite og rolige; egen farge ved hover. */
.logoer { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-6); align-items: center; }
.logoer li { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; }
.logo-vegg__lenke { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; text-decoration: none; }
.logo-vegg__lenke img { display: block; max-width: 100%; max-height: 3.25rem; width: auto; height: auto;
  filter: brightness(0) invert(1); opacity: 0.86; transition: filter 180ms var(--sc-ease-out), opacity 180ms var(--sc-ease-out); }
.logo-tekst { font: 600 0.82rem/1.1 var(--sc-font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pearl); opacity: 0.86; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .logo-vegg__lenke:hover img, .logo-vegg__lenke:focus-visible img { filter: none; opacity: 1; }
  .logo-vegg__lenke:hover .logo-tekst { opacity: 1; }
}
.logo-vegg__lenke:focus-visible img { filter: none; opacity: 1; }

/* Statuen: setningen hugget inn i steinplaten. .innhugg er en 1000x560-flate som
   js/havbyen.js strekker over platens fire hjørner med matrix3d, så teksten får
   platens perspektiv. Innhugget: bokstaven er mørkere stein, med skygge i
   overkanten (lyset kommer ovenfra) og en svak lys kant nederst. */
.innhugg { position: absolute; left: 0; top: 0; width: 1000px; height: 560px; transform-origin: 0 0; }
.innhugg p {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 600 92px/1.2 var(--sc-font-display);
  letter-spacing: 0.09em; text-transform: uppercase; text-align: center;
}
.innhugg span { display: block; white-space: nowrap; }
.innhugg b { font-weight: inherit; }
.innhugg__stein b {
  color: rgb(12 38 50 / 0.62);
  text-shadow: 0 -5px 4px rgb(0 8 14 / 0.75), 0 5px 1px rgb(190 232 240 / 0.38);
  opacity: var(--hugg, 0);
}
.innhugg__lys b {
  color: rgb(214 252 253);
  text-shadow: 0 0 10px rgb(92 225 230 / 0.95), 0 0 34px rgb(92 225 230 / 0.6);
  opacity: var(--lys, 0);
}
.statue-setning { display: none; }

/* Havbyen: prosjektkort langs hovedgaten, ett om gangen */
.prosjekter { list-style: none; margin: 0; padding: 0; }
.prosjekt {
  position: absolute; bottom: 11vh;
  width: min(30rem, 44vw);
  display: grid; grid-template-columns: 10rem 1fr; align-items: center;
  opacity: 0; pointer-events: none;
}
.prosjekt--venstre { left: var(--sc-gutter); }
.prosjekt--hoyre { right: calc(var(--sc-gutter) + 6.5rem); }
.prosjekt.er-aktiv { pointer-events: auto; }
.prosjekt__bygg { position: relative; width: 100%; min-height: 10rem; align-self: stretch; border-radius: var(--r-kort) 0 0 var(--r-kort); overflow: clip; background: var(--abyss); }
.prosjekt__tekst { min-width: 0; }
.prosjekt__bygg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prosjekt__bygg img + img { clip-path: inset(var(--stein, 100%) 0 0 0); }
.prosjekt__tekst { padding: var(--sc-4) var(--sc-5); }
.prosjekt__bransje { margin: 0; font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide); font-weight: 600; }
.prosjekt__navn { margin: var(--sc-2) 0 var(--sc-4); font: 600 var(--sc-t-xl)/1.05 var(--sc-font-display); letter-spacing: -0.01em; color: var(--deep); }

/* ------------------------------------------------------------ lyse kort -- */
.kort--lys {
  background: color-mix(in oklab, var(--pearl) 92%, transparent);
  color: var(--deep);
  border-radius: var(--r-kort);
  box-shadow: var(--sc-e3), inset 0 1px 0 hsl(0 0% 100% / 0.7);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
.kort--lys .tittel { color: var(--deep); }
.kort--lys .brod { color: var(--deep); }
.prosjekt.kort--lys { padding: 0; background: color-mix(in oklab, var(--pearl) 98%, transparent); }

.kopi--byen { width: min(62rem, 100% - 2 * var(--sc-gutter) - 5rem); }
.byregister .brod { margin-top: var(--sc-3); color: color-mix(in oklab, var(--deep) 86%, var(--tide)); max-width: 56ch; }
.byregister__tall { margin: var(--sc-3) 0 0; font: 600 var(--sc-t-sm)/1 var(--sc-font-display); letter-spacing: 0.02em; color: var(--tide); font-variant-numeric: tabular-nums; }
.register { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-5); }
.kunde { opacity: var(--rad, 1); transform: translateY(calc((1 - var(--rad, 1)) * 10px)); display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: var(--sc-3); padding: var(--sc-2) 0; border-top: 1px solid color-mix(in oklab, var(--deep) 12%, transparent); }
.kunde__bilde { position: relative; width: 5.5rem; aspect-ratio: 16 / 10; border-radius: 6px; overflow: clip; background: var(--deep); }
.kunde__bilde img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.kunde__merke { position: absolute; left: 4px; top: 4px; padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--glow); color: var(--abyss); font: 600 0.6rem/1.3 var(--sc-font-text); letter-spacing: 0.04em; text-transform: uppercase; }
.kunde__tekst { min-width: 0; }
.kunde__navn { margin: 0; font: 600 var(--sc-t-base)/1.15 var(--sc-font-display); color: var(--deep); }
.kunde__bransje { margin: 0.15rem 0 0; font-size: var(--sc-t-xs); line-height: 1.35; color: var(--tide); }
.kunde__lenke { color: var(--deep); font-weight: 600; font-size: var(--sc-t-sm); text-underline-offset: 3px; padding: 0.6rem 0.2rem; }
.kunde__snart { color: var(--tide); font-size: var(--sc-t-xs); font-weight: 600; white-space: nowrap; }

/* Markedsføringscase: Glødfestivalen */
.overlinje--mork { color: var(--tide); }
.case { max-width: 44rem; }
.case__hva { margin: var(--sc-3) 0 0; color: color-mix(in oklab, var(--deep) 88%, var(--tide)); max-width: 52ch; line-height: 1.55; }
.case__tall { margin: var(--sc-6) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-6); }
.case__tall > div { display: flex; flex-direction: column-reverse; gap: var(--sc-1); border-top: 1px solid color-mix(in oklab, var(--deep) 14%, transparent); padding-top: var(--sc-3); }
.case__tall dd { margin: 0; font: 600 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--deep); font-variant-numeric: tabular-nums; }
.case__tall dt { font-size: var(--sc-t-sm); line-height: 1.4; color: var(--tide); }
.case--detaljer { max-width: 40rem; }
.case__utgangspunkt { margin: var(--sc-4) 0 0; line-height: 1.6; color: var(--deep); }
.case__liste { margin: var(--sc-4) 0 0; padding-left: 1.1rem; display: grid; gap: var(--sc-2); color: var(--deep); line-height: 1.55; font-size: var(--sc-t-sm); }
.case .plassholder--sitat { display: block; margin: var(--sc-5) 0; padding: var(--sc-4); text-transform: none; letter-spacing: 0; font: italic 500 var(--sc-t-sm)/1.5 var(--sc-font-text); text-align: left; place-items: start; }

/* Pris */
.pris { max-width: 27rem; }
.pris__tall { margin: var(--sc-4) 0 0; font: 600 var(--sc-t-3xl)/1 var(--sc-font-display); letter-spacing: -0.03em; color: var(--deep); }
.pris__tall .tabell-tall { color: var(--deep); }
.pris__liste { list-style: none; padding: 0; margin: var(--sc-5) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-4); }
.pris__liste li { display: flex; gap: var(--sc-2); align-items: baseline; font-weight: 500; }
.pris__liste li::before { content: ""; width: 0.55rem; height: 0.3rem; border: solid var(--tide); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -0.2em; flex: none; }
.pris__vilkar { margin: var(--sc-5) 0 var(--sc-5); font-size: var(--sc-t-sm); color: var(--tide); line-height: 1.55; }

/* Sammenligning */
.sammenligning { width: 100%; border-collapse: collapse; margin-top: var(--sc-5); font-size: var(--sc-t-sm); line-height: 1.4; }
.sammenligning th, .sammenligning td { text-align: left; vertical-align: top; padding: var(--sc-3) var(--sc-3); border-top: 1px solid color-mix(in oklab, var(--deep) 14%, transparent); }
.sammenligning thead th { border-top: 0; font: 600 var(--sc-t-sm)/1.2 var(--sc-font-display); color: var(--tide); }
.sammenligning tbody th { font-weight: 600; color: var(--deep); white-space: nowrap; }
.sammenligning td { color: color-mix(in oklab, var(--deep) 86%, var(--tide)); }
.sammenligning .oss { background: color-mix(in oklab, var(--glow) 22%, transparent); color: var(--deep); font-weight: 600; }
.sammenligning thead .oss { color: var(--deep); border-radius: 8px 8px 0 0; }

/* Hvem bygger byen */
.folk { list-style: none; padding: 0; margin: var(--sc-5) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.plassholder { display: grid; place-items: center; border: 1.5px dashed color-mix(in oklab, var(--tide) 70%, transparent); border-radius: 12px; color: var(--tide); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; background: color-mix(in oklab, var(--surface) 35%, transparent); }
.plassholder--portrett { aspect-ratio: 4 / 5; }
.person__navn { margin: var(--sc-3) 0 0; font: 600 var(--sc-t-lg)/1.1 var(--sc-font-display); color: var(--deep); }
.person__rolle { margin: 0.2rem 0 0; font-size: var(--sc-t-xs); }
.person__tekst { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); }
.plassholder-tekst { color: var(--tide); font-style: normal; outline: 1px dashed color-mix(in oklab, var(--tide) 50%, transparent); outline-offset: 2px; border-radius: 3px; }

/* Spørsmål og svar */
.faq { max-width: 32rem; }
.faq details { border-top: 1px solid color-mix(in oklab, var(--deep) 14%, transparent); }
.faq .tittel + details { margin-top: var(--sc-4); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-3) 0; font-weight: 600; color: var(--deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 0.55rem; height: 0.55rem; border: solid var(--tide); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 0.15em; flex: none; transition: rotate 200ms var(--sc-ease-out); }
.faq details[open] summary::after { rotate: -135deg; translate: 0 0.35em; }
.faq details p { margin: 0 0 var(--sc-4); color: color-mix(in oklab, var(--deep) 88%, var(--tide)); line-height: 1.6; font-size: var(--sc-t-sm); max-width: 44ch; }

/* Avslutning og footer: ankomst i lyset */
.kopi--slutt { inset: 0 0 5.5rem; display: grid; }
.slutt { align-self: center; justify-self: center; text-align: center; max-width: 44rem; padding: var(--sc-9) var(--sc-gutter) var(--sc-6); }
.slutt .tittel { color: var(--deep); font-size: var(--sc-t-2xl); }
.slutt .knapp { margin-top: var(--sc-6); }
.slutt .knapp--primar { background: var(--deep); color: var(--pearl); box-shadow: var(--sc-e2); }
@media (hover: hover) and (pointer: fine) { .slutt .knapp--primar:hover { background: var(--tide); } }
.bunn {
  position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sc-2) var(--sc-6);
  padding: var(--sc-5) var(--sc-gutter) calc(var(--sc-5) + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--pearl) 94%, transparent);
  color: var(--deep); font-size: var(--sc-t-sm);
  border-top: 1px solid color-mix(in oklab, var(--deep) 10%, transparent);
}
.bunn.er-paa { pointer-events: auto; }
.bunn p { margin: 0; }
.bunn img { width: 2.4rem; height: auto; }
.bunn a { color: var(--deep); font-weight: 600; text-underline-offset: 3px; }
.bunn__lenker { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sc-4); font-size: var(--sc-t-xs); }
.bunn__lenker a { font-weight: 500; color: color-mix(in oklab, var(--deep) 80%, var(--tide)); padding: 0.35rem 0; }
.fx__lyst { inset: 0; }

/* ------------------------------------------------------------ dybdemåler -- */
.dybde { position: fixed; z-index: 60; right: calc(var(--sc-gutter) * 0.5); top: 50%; translate: 0 -50%; height: min(62vh, 36rem); width: 3.5rem; }
.dybde__skala { position: absolute; right: 0.6rem; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--pearl) 28%, transparent); }
.dybde__merke { position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--relic); translate: 0 -50%; transform: translateY(calc(var(--p, 0) * min(62vh, 36rem))); box-shadow: 0 0 0 3px hsl(40 50% 57% / 0.25); }
.dybde__les {
  position: absolute; right: 1.6rem; top: 0; translate: 0 -50%;
  transform: translateY(calc(var(--p, 0) * min(62vh, 36rem)));
  display: grid; justify-items: end; gap: 0.15rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: right;
}
.dybde__tall { font: 600 var(--sc-t-lg)/1 var(--sc-font-display); color: var(--relic); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; }
.dybde__enhet { font: 500 var(--sc-t-xs)/1 var(--sc-font-text); color: var(--relic); margin-left: 0.2rem; }
.dybde__verdi { white-space: nowrap; }
.dybde__navn { font-size: var(--sc-t-xs); letter-spacing: 0.06em; color: var(--pearl); white-space: nowrap; text-shadow: 0 1px 8px hsl(205 80% 5% / 0.9); }
.dybde__liste { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.dybde__liste li { position: absolute; right: 0; top: calc(var(--pos, 0) * 100%); translate: 0 -50%; }
.dybde__liste a { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; text-decoration: none; color: var(--mist); font-size: var(--sc-t-xs); padding: 0.35rem 0; min-height: 24px; }
.dybde__liste a::after { content: ""; width: 0.8rem; height: 1px; background: color-mix(in oklab, var(--pearl) 60%, transparent); margin-right: 0.2rem; transition: width 160ms var(--sc-ease-out), background-color 160ms; }
.dybde__liste a > span { opacity: 0; translate: 6px 0; transition: opacity 160ms var(--sc-ease-out), translate 160ms var(--sc-ease-out); white-space: nowrap; }
.dybde__liste .dybde__m { display: none; }
.dybde__liste a:hover > span, .dybde__liste a:focus-visible > span, .dybde.viser-alle .dybde__liste a > span { opacity: 1; translate: 0 0; }
.dybde.viser-alle .dybde__les, .dybde:has(a:hover) .dybde__les, .dybde:has(a:focus-visible) .dybde__les { opacity: 0; }
.dybde__liste a:hover::after, .dybde__liste a:focus-visible::after, .dybde__liste a[aria-current="true"]::after { width: 1.3rem; background: var(--relic); }
.dybde__liste a:hover, .dybde__liste a:focus-visible { color: var(--pearl); }
.dybde__les { transition: opacity 160ms; }
.dybde .sr { position: absolute; }
.boble { position: absolute; right: 0.35rem; width: var(--d, 6px); height: var(--d, 6px); border-radius: 50%; border: 1px solid hsl(184 80% 85% / 0.8); background: hsl(184 80% 85% / 0.12); pointer-events: none; animation: stig 1.6s var(--ease) forwards; }
@keyframes stig { from { transform: translate(0, 0); opacity: 0.9; } to { transform: translate(var(--dx, 0), -70px); opacity: 0; } }

/* ------------------------------------------------------------------ mobil -- */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .ramme { width: max(100vw, 100dvh * 9 / 16); aspect-ratio: 9 / 16; }
  .ramme--sand .plantegning { left: 10%; top: 73%; width: 64%; }
  
  .topp { padding: var(--sc-3) var(--sc-gutter); }
  .topp__logo { padding: 0.4rem 0.8rem 0.4rem 0.5rem; gap: 0.5rem; font-size: var(--sc-t-sm); }
  .topp__logo img { width: 2.4rem; }

  .kopi--hero, .kopi--venstre, .kopi--hoyre, .kopi--portene, .kopi--bred {
    left: var(--sc-gutter); right: var(--sc-gutter); max-width: none;
    top: auto; bottom: calc(var(--mobil-bar) + var(--sc-5)); margin: 0;
  }
  .kopi--portene { top: 12vh; bottom: auto; }
  .kopi--midt { width: auto; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(var(--mobil-bar) + var(--sc-4)); top: auto; margin: 0; }
  .tittel--hero { font-size: clamp(2.3rem, 1.4rem + 5vw, 3.2rem); }
  .tittel { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.4rem); }
  .tittel--kort { font-size: var(--sc-t-lg); }
  .ingress { font-size: var(--sc-t-base); }
  .steg li { font-size: var(--sc-t-base); }
  .slor--hero, .slor--venstre, .slor--hoyre { background: linear-gradient(0deg, color-mix(in oklab, var(--abyss) 94%, transparent) 0%, color-mix(in oklab, var(--abyss) 82%, transparent) 30%, color-mix(in oklab, var(--abyss) 45%, transparent) 50%, transparent 68%); }
  .slor--kun-mobil { display: block; }

  /* Statuen på mobil: innhugget står på platen, setningen står stort under statuen. */
  .statue-setning {
    display: block; position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(var(--mobil-bar) + 6vh); margin: 0;
    font: 600 clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem)/1.04 var(--sc-font-display); letter-spacing: -0.02em;
    color: var(--pearl); text-shadow: 0 2px 18px hsl(205 80% 5% / 0.8);
  }

  .kopi--havbyen > .tittel { top: 11vh; right: var(--sc-gutter); max-width: none; font-size: var(--sc-t-lg); }
  /* Kortene ligger øverst på mobil, så treforken som flyr oppover gaten ikke skjules. */
  .prosjekt, .prosjekt--venstre, .prosjekt--hoyre { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(11vh + 4.5rem); bottom: auto; display: grid; grid-template-columns: 7.5rem 1fr; }
  .prosjekt__bygg { border-radius: var(--r-kort) 0 0 var(--r-kort); aspect-ratio: auto; min-height: 7.5rem; }
  .prosjekt__tekst { padding: var(--sc-4); }
  .prosjekt__navn { font-size: var(--sc-t-lg); margin-bottom: var(--sc-3); }

  .kopi--byen { width: auto; }
  .register { grid-template-columns: 1fr; gap: 0; margin-top: var(--sc-3); }
  .kunde { grid-template-columns: 3.75rem 1fr auto; gap: var(--sc-3); padding: 0.4rem 0; }
  .kunde__bilde { width: 3.75rem; }
  .kunde__merke { font-size: 0.5rem; left: 2px; top: 2px; padding: 0 0.2rem; }
  .kunde__navn { font-size: var(--sc-t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kunde__bransje { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.05rem; }
  .kunde { padding: 0.28rem 0; }
  .kunde__bilde { width: 3.25rem; }
  .kunde { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
  .byregister .tittel { font-size: var(--sc-t-base); }
  .byregister .brod { margin-top: var(--sc-2); line-height: 1.45; }
  .byregister__tall { margin-top: var(--sc-2); }
  .kunde__lenke { font-size: var(--sc-t-xs); }
  .byregister .brod { font-size: var(--sc-t-sm); }
  .logoer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-3) var(--sc-4); margin-top: var(--sc-5); }
  .logo-vegg__lenke img { max-height: 2.4rem; }
  .logo-tekst { font-size: 0.68rem; }
  .case__tall { grid-template-columns: 1fr 1fr; gap: var(--sc-4); margin-top: var(--sc-4); }
  .case__tall dd { font-size: 1.75rem; }
  .case__tall dt { font-size: var(--sc-t-xs); }
  .case__liste { font-size: var(--sc-t-xs); }

  .kort--lys { max-height: calc(100dvh - var(--mobil-bar) - 6.5rem); overflow: auto; overscroll-behavior: contain; }
  .pris { max-width: none; }
  .pris__tall { font-size: var(--sc-t-2xl); }
  .sammenligning thead { display: none; }
  .sammenligning, .sammenligning tbody, .sammenligning tr, .sammenligning th, .sammenligning td { display: block; }
  .sammenligning tr { padding: var(--sc-2) 0; border-top: 1px solid color-mix(in oklab, var(--deep) 14%, transparent); }
  .sammenligning tbody th { border: 0; padding: 0 0 var(--sc-1); font-family: var(--sc-font-display); }
  .sammenligning td { border: 0; padding: 0.15rem 0.4rem; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sc-2); font-size: var(--sc-t-xs); }
  .sammenligning td::before { content: attr(data-alt); font-weight: 600; color: var(--tide); }
  .sammenligning td.oss::before { color: var(--deep); }
  .sammenligning td.oss { border-radius: 6px; }
  .folk { gap: var(--sc-4); }
  .plassholder--portrett { aspect-ratio: 1; }
  .slutt { padding-top: var(--sc-8); }
  .slutt .tittel { font-size: clamp(1.7rem, 1.2rem + 3vw, 2.2rem); }
  .bunn { padding-bottom: calc(var(--mobil-bar) + var(--sc-3) + env(safe-area-inset-bottom)); gap: var(--sc-1) var(--sc-4); font-size: var(--sc-t-xs); }

  /* Dybdemåleren blir en tynn linje nederst. Trykk åpner listen. */
  .dybde { inset: auto 0 0 0; translate: none; width: auto; height: var(--mobil-bar); background: color-mix(in oklab, var(--abyss) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid color-mix(in oklab, var(--pearl) 12%, transparent); padding-bottom: env(safe-area-inset-bottom); height: calc(var(--mobil-bar) + env(safe-area-inset-bottom)); }
  .dybde__skala { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; background: color-mix(in oklab, var(--pearl) 14%, transparent); }
  .dybde__merke { top: 0; left: 0; width: 100%; height: 2px; border-radius: 0; background: var(--relic); box-shadow: none; translate: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .dybde__les { position: static; translate: none; transform: none; display: flex; align-items: baseline; gap: 0.35rem; width: 100%; height: var(--mobil-bar); padding: 0 var(--sc-gutter); }
  .dybde__les::after { content: ""; margin-left: auto; width: 0.5rem; height: 0.5rem; border: solid var(--pearl); border-width: 2px 0 0 2px; rotate: 45deg; translate: 0 0.2rem; transition: rotate 200ms var(--sc-ease-out); }
  .dybde__les[aria-expanded="true"]::after { rotate: 225deg; translate: 0 -0.1rem; }
  .dybde__navn { font-size: var(--sc-t-sm); margin-left: 0.4rem; }
  .dybde__liste { position: absolute; inset: auto 0 100% 0; display: none; background: color-mix(in oklab, var(--abyss) 96%, transparent); border-top: 1px solid color-mix(in oklab, var(--pearl) 12%, transparent); padding: var(--sc-2) 0; max-height: 70dvh; overflow: auto; }
  .dybde.er-apen .dybde__liste { display: block; }
  .dybde.er-apen .dybde__les, .dybde:has(a:hover) .dybde__les { opacity: 1; }
  .dybde__liste li { position: static; translate: none; }
  .dybde__liste a { justify-content: space-between; padding: 0.7rem var(--sc-gutter); font-size: var(--sc-t-base); color: var(--pearl); min-height: 44px; }
  .dybde__liste a::after { display: none; }
  .dybde__liste a > span { opacity: 1; translate: none; }
  .dybde__liste .dybde__m { display: inline; color: var(--relic); font-variant-numeric: tabular-nums; }
  .dybde__liste a[aria-current="true"] { background: color-mix(in oklab, var(--tide) 40%, transparent); }
  .boble { display: none; }
}

/* ------------------------------------------------------ redusert bevegelse -- */
@media (prefers-reduced-motion: reduce) {
  [data-hb-linjer] .linje > span { transform: none; transition: none; }
  .innhugg__stein b { opacity: 1; }
  .prosjekt__bygg img + img { clip-path: none; }
  .plantegning path { stroke-dashoffset: 0; }
  .partikler, .fx__kast, .fx__blink, .boble { display: none; }
  .dybde__merke, .dybde__les { transition: none; }
}