/* Landningssidan följer site/DESIGN.md, inte appens regler.
   Mörk yta som i Pontus referens, men utan dess dekor: typografin och
   avstånden ska bära sidan, orange används bara för handling och varumärke. */

:root {
  /* Färg — regelbokens mörka palett plus loggans två dekorfärger */
  --bg: #000000;
  --bg-2: #1C1C1E;
  --text: #F5F5F7;
  --text-2: #98989D;
  --linje: #38383A;
  --orange: #F38C00;          /* loggans orange, 8,6:1 mot svart */
  --pa-orange: #000000;       /* text på orange yta, 8,6:1 */
  --gra: #AAAAAA;             /* loggans grå */
  --orange-text: var(--orange); /* orange som text eller kontur */

  color-scheme: dark;

  /* Avstånd — 4-punktsskalan, inga andra värden */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-knapp: 10px;
  --bredd: 1120px;
  --sida: var(--s5);

  --typsnitt: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--typsnitt);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 4px; border-radius: 4px; }

.ram {
  max-width: calc(var(--bredd) + 2 * var(--sida));
  margin: 0 auto;
  padding: 0 max(var(--sida), env(safe-area-inset-left)) 0 max(var(--sida), env(safe-area-inset-right));
}

/* Topp */

.topp { border-bottom: 1px solid var(--linje); }
.topp-rad {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: var(--s8);
}
.logga { display: block; flex: none; }
.logga svg { display: block; height: 28px; width: auto; }

.meny { display: none; gap: var(--s6); margin-left: auto; }
.meny a, .logga-in {
  font-size: 14px;
  color: var(--text-2);
  transition: color 150ms;
}
.meny a:hover, .logga-in:hover, .meny a[aria-current] { color: var(--text); }
.logga-in { margin-left: auto; padding: var(--s3) 0; }

/* Hero */

/* Bilden är svartvit utom loggorna på centralen (Pontus önskemål), så
   orange på sidan och orange i bilden är samma sak: varumärket.
   Toningen är funktionell, inte dekor: bilden tonar ut i sidans svarta
   botten där texten står, så texten aldrig hamnar på bildens ljusa partier
   och centralen aldrig skyms av text.
   Mobil: bilden i överkant, texten börjar där bilden tonat ut. */
.hero {
  --bildhojd: 400px;
  position: relative;
  padding: calc(var(--bildhojd) - var(--s6)) 0 var(--s7);
  overflow: hidden;
}
.hero-bild {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: var(--bildhojd);
  object-fit: cover;
  object-position: 62% 30%;
  /* Mjuk kurva (smoothstep) i stället för rak övergång, annars syns var
     toningen börjar och slutar. */
  --toning-ned: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.957) 51.9%, rgba(0,0,0,.844) 58.8%, rgba(0,0,0,.684) 65.6%, rgba(0,0,0,.5) 72.5%, rgba(0,0,0,.316) 79.4%, rgba(0,0,0,.156) 86.3%, rgba(0,0,0,.043) 93.1%, transparent 100%);
  -webkit-mask-image: var(--toning-ned);
  mask-image: var(--toning-ned);
}
.hero-innehall { position: relative; width: 100%; }
.overrad {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: var(--s4);
}
.hero h1 {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 600;
  max-width: 14ch;
  text-wrap: balance;
}
.ingress {
  margin-top: var(--s5);
  font-size: 18px;
  color: var(--text-2);
  max-width: 56ch;
}
.hero-handling {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s6);
}

.knapp {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s5);
  border-radius: var(--r-knapp);
  background: var(--orange);
  color: var(--pa-orange);
  font-weight: 600;
  transition: background-color 150ms;
}
.knapp:hover { background: #FF9F26; }
.lank {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--text);
  font-weight: 500;
}
.lank::after { content: "→"; margin-left: var(--s2); color: var(--text-2); transition: transform 150ms; }
.lank:hover::after { transform: translateX(2px); }

.fakta-rad { padding-bottom: var(--s8); }
.fakta {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linje);
}
.fakta > div {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linje);
}
.fakta dt { font-weight: 500; }
.fakta dd { color: var(--text-2); font-size: 14px; margin-top: var(--s1); }

/* Avsnitt */

.avsnitt { padding: var(--s8) 0; border-top: 1px solid var(--linje); }
.delad { display: grid; gap: var(--s6); }
.avsnitt-huvud h2 { font-size: 28px; line-height: 1.2; font-weight: 600; }
.avsnitt-huvud p { margin-top: var(--s3); color: var(--text-2); max-width: 36ch; }

.tjanstlista { counter-reset: tjanst; }
.tjanstlista li {
  counter-increment: tjanst;
  display: grid;
  grid-template-columns: var(--s6) 1fr;
  column-gap: var(--s4);
  padding: var(--s5) 0;
  border-top: 1px solid var(--linje);
}
.tjanstlista li:first-child { border-top: 0; padding-top: 0; }
.tjanstlista li::before {
  content: counter(tjanst, decimal-leading-zero);
  grid-row: 1 / 3;
  align-self: baseline;
  color: var(--orange-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
/* Numret och rubriken delar baslinje, annars ser numret ut att sitta för högt. */
.tjanstlista h3 { align-self: baseline; font-size: 18px; line-height: 1.4; font-weight: 600; }
.tjanstlista p { margin-top: var(--s2); color: var(--text-2); max-width: 60ch; }

/* Knappen till tjänstens egen sida. Sekundär: kontur, inte orange yta, så
   att den inte tävlar med Ring-knappen. Halvgenomskinlig mörk botten,
   eftersom den står på månen. Ingen oskärpa bakom: Safari räknar om den
   varje bildruta när månen rör sig. Pilen visar att den leder vidare. */
.las-mer {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin-top: var(--s4);
  padding: 0 var(--s4);
  border: 1px solid var(--linje);
  border-radius: var(--r-knapp);
  background: rgba(0, 0, 0, .6);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 200ms, background-color 200ms;
}
.las-mer svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--orange-text);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.las-mer:hover { border-color: var(--orange-text); background: rgba(243, 140, 0, .08); }
.las-mer:hover svg { transform: translateX(3px); }

/* Text bara för skärmläsare: "Läs mer" räcker för ögat, men en uppläst
   lista med fem "Läs mer" säger ingenting. */
.dold {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.brodtext p { max-width: 60ch; font-size: 18px; }
.brodtext p + p { margin-top: var(--s4); color: var(--text-2); font-size: 16px; }

.referenser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--linje);
}
.referenser li {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linje);
  color: var(--text-2);
}
.referenser span { display: block; color: var(--text); font-weight: 500; }

/* Förstasidans nedre avsnitt (Pontus 2026-11-03: för rörigt). Färre
   linjer, tydligare storlekar, och orange bara som små markörer: bockar,
   pilar och en kort strimma. Varje avsnitt har en sak som är störst. */

.etikett { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); }


.pil-lank svg, .kontaktlista svg {
  flex: none;
  fill: none;
  stroke: var(--orange-text);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pil-lank {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin-top: var(--s5);
  font-weight: 500;
  color: var(--orange-text);
}
.pil-lank svg { width: 16px; height: 16px; transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.pil-lank:hover svg { transform: translateX(3px); }

/* Uthyrningen: samma mönster som Tjänster och Referenser, rubriken till
   vänster och produkterna två och två till höger. Produktbilderna står på
   svart, samma svart som sidan. */
.sortiment-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s7) var(--s6);
}
/* Produkten står överst, sedan samma korta orange strimma som
   behörigheterna. Bilderna är lika stora, så att linjen hamnar i samma
   höjd i varje rad. */
.produkt {
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
  margin: 0 auto var(--s4);
}
.sortiment-lista h3 {
  position: relative;
  padding-top: var(--s4);
  border-top: 1px solid var(--linje);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.sortiment-lista h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--s5);
  height: 2px;
  background: var(--orange-text);
}
.sortiment-lista p { margin-top: var(--s2); color: var(--text-2); }
.sortiment .pil-lank { margin-top: var(--s6); }
@media (max-width: 479px) { .produkt { max-width: 220px; } }
@media (min-width: 480px) { .sortiment-lista { grid-template-columns: 1fr 1fr; } }

/* Referenserna utan rutnät av linjer: namnet bär, projektet under. */
#referenser .referenser { gap: var(--s6); border-top: 0; }
#referenser .referenser li { padding: 0; border: 0; font-size: 15px; }
#referenser .referenser span { font-size: 20px; line-height: 1.3; font-weight: 600; margin-bottom: var(--s1); }

/* Behörigheterna står för sig, under en egen etikett. Varje punkt börjar
   med en kort orange strimma på linjen. */
#referenser .etikett { margin: var(--s8) 0 var(--s5); }
#referenser .fakta { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); border: 0; }
#referenser .fakta > div {
  position: relative;
  padding: var(--s4) 0 0;
  border: 0;
  border-top: 1px solid var(--linje);
}
#referenser .fakta > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--s5);
  height: 2px;
  background: var(--orange-text);
}
#referenser .fakta dt { font-weight: 600; line-height: 1.4; }

/* Kontakt som rader: etikett och stort värde, pilen till höger visar att
   raden går att trycka på. */
.kontaktlista { border-bottom: 1px solid var(--linje); }
.kontaktlista li { border-top: 1px solid var(--linje); }
.kontaktlista li > a, .kontaktlista li > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
}
.kontaktlista .varde {
  display: block;
  margin-top: var(--s1);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
  transition: color 150ms;
}
.kontaktlista li > span { display: block; }
.kontaktlista address { margin-top: var(--s1); font-style: normal; font-size: 17px; }
.kontaktlista svg { width: 24px; height: 24px; transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.kontaktlista a:hover svg { transform: translateX(4px); }
.kontaktlista a:hover .varde { color: var(--orange-text); }

.kontakt { display: grid; gap: var(--s2); }
.kontakt-stor {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  justify-self: start;
  transition: color 150ms;
}
.kontakt-stor:hover { color: var(--orange-text); }
.kontakt address {
  margin-top: var(--s5);
  font-style: normal;
  color: var(--text-2);
}

/* Fot */

.fot { border-top: 1px solid var(--linje); }
.fot-rad {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s6);
  padding-bottom: max(var(--s6), env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--text-2);
}
.fot nav { display: flex; gap: var(--s5); }
.fot a:hover { color: var(--text); }

/* Platta */

@media (min-width: 768px) {
  :root { --sida: var(--s6); }
  .meny { display: flex; }
  .logga-in { margin-left: 0; }
  .hero { --bildhojd: 560px; padding-bottom: var(--s8); }
  .hero h1 { font-size: 56px; }
  .fakta { grid-template-columns: repeat(2, 1fr); column-gap: var(--s6); }
  .referenser { grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); }
  .kontakt-stor { font-size: 32px; }
  #referenser .referenser { grid-template-columns: repeat(3, 1fr); row-gap: var(--s7); }
  .kontaktlista .varde { font-size: 32px; }
}

/* Dator: rubriken till vänster, innehållet till höger, samma kolumnkant
   genom hela sidan så att allt linjerar mot samma axel. */

@media (min-width: 1024px) {
  .hero h1 { font-size: 64px; }
  .fakta { grid-template-columns: repeat(4, 1fr); }
  #referenser .fakta { grid-template-columns: repeat(4, 1fr); column-gap: var(--s6); }
  .fakta > div { border-bottom: 0; }
  .fakta { border-bottom: 1px solid var(--linje); }
  .delad { grid-template-columns: 4fr 8fr; gap: var(--s6); }
  .avsnitt { padding: var(--s9) 0; }
}

/* Bred skärm: texten står på svart till vänster, bilden tar högra delen och
   tonar in. Under 1280 px räcker bredden inte till både text och en bred
   toning — då hamnar texten över bildens ljusa himmel eller toningen över
   centralen — så där ligger bilden överst som på plattan. */

@media (min-width: 1280px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 720px;
    padding: var(--s9) 0;
  }
  /* Bilden är bredare än det som syns och fortsätter förbi högerkanten
     (där fotot bara är vägg). Då får toningen mer än halva bildens bredd
     utan att lägga sig över centralen. */
  .hero-bild {
    left: 35%;
    right: auto;
    width: 75%;
    height: 100%;
    object-position: 70% 40%;
    --toning-in: linear-gradient(to right, transparent 0%, rgba(0,0,0,.043) 6.9%, rgba(0,0,0,.156) 13.8%, rgba(0,0,0,.316) 20.6%, rgba(0,0,0,.5) 27.5%, rgba(0,0,0,.684) 34.4%, rgba(0,0,0,.844) 41.3%, rgba(0,0,0,.957) 48.1%, #000 55%);
    --toning-ned: linear-gradient(to bottom, #000 75%, transparent 100%);
    -webkit-mask-image: var(--toning-in), var(--toning-ned);
    -webkit-mask-composite: source-in;
    mask-image: var(--toning-in), var(--toning-ned);
    mask-composite: intersect;
  }
  .ingress { max-width: 44ch; }
}

/* ------------------------------------------------------------------
   Månscenen (index.html). Månen fyller nederkanten och loggan står bakom
   den. Scenen står kvar på skärmen medan man rullar: månen roterar och
   stiger, täcker loggan och fyller till sist hela bilden, som tonar över i
   sidans bakgrund där innehållet tar vid. Reglerna nedan med --p och --e
   är startläget; under rullningen skriver skriptet samma värden direkt på
   de delar som rör sig (se kommentaren i rita()), och --ram-h och --stig
   en gång per mätning. Utan skript eller med minskad rörelse är scenen en
   stillbild.
   ------------------------------------------------------------------ */

.rymd .topp { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.rymd [id] { scroll-margin-top: var(--s8); }

.scen {
  --ljus-1: #fff;
  --ljus-2: #7a7a7a;
  --ljus-3: #141414;
  --logga-styrka: .62;
  position: relative;
  background: #000;
}
/* Rullsträckan: scenen står kvar i 1,4 skärmhöjder (Pontus ville ha
   den lugnare, 2026-11-03). Månen har täckt loggan efter knappt halva
   vägen; då kommer Tjänster fram på den. */
/* --kort sätts av skriptet: är Tjänster lägre än vad som står kvar av
   scenen kortas scenen, så att den släpper precis där Tjänster slutar och
   nästa avsnitt kommer på vanligt avstånd. */
.js .scen { height: calc(240svh - var(--s8) - var(--kort, 0px)); }

.scen-ram {
  --p: 0;
  --ram-h: calc(100svh - var(--s8));
  --e: 0;      /* stigningen, mjuk start och landning; sätts av skriptet */
  --stig: 0px; /* hur långt månen stiger; sätts av skriptet */
  /* Horisonten är månens topp. Under den måste startvyns text få plats,
     så på låga skärmar flyttas den upp. */
  --horisont: min(var(--ram-h) * .6, var(--ram-h) - 370px);
  --mane: max(160vw, 1200px, 140svh);
  /* Loggan sticker upp 40 % av sin bredd över horisonten och får inte nå
     toppen på låga skärmar. */
  --logga: min(92vw, 1000px, (100svh - 450px) * 2.5);
  position: sticky;
  top: var(--s8);
  height: calc(100svh - var(--s8));
  overflow: hidden;
}

.stjarnor {
  position: absolute;
  inset: -60px 0 0;
  width: 100%;
  height: calc(100% + 60px);
  color: #fff;
  opacity: .45;  /* nedtonade: de ska ge djup, inte ta blicken */
  translate: 0 calc(var(--p) * -60px);
  will-change: translate;
}

/* Loggan står bakom månen; nedersta sjättedelen är gömd under horisonten.
   Den lyfter lite när månen stiger, men långsammare, så att månen hinner
   ikapp och täcker den. */
.mane-logga {
  position: absolute;
  left: 50%;
  top: var(--horisont);
  width: var(--logga);
  height: auto;
  translate: -50% calc(-84% - var(--e) * 14%);
  scale: calc(1 - var(--e) * .05);
  /* Eget lager: annars ritar Safari om masken och gradienten varje
     bildruta när loggan skalas. */
  will-change: translate, scale;
}
.logga-farg { opacity: var(--logga-styrka); }
.ljus-1 { stop-color: var(--ljus-1); }
.ljus-2 { stop-color: var(--ljus-2); }
.ljus-3 { stop-color: var(--ljus-3); }

/* Månen: hela klotet. Den stiger tills den täcker hela scenen. Själva
   rotationen — ytan som rullar upp mot loggan — ritas i duken nedan; den
   här bilden ger bara läge och storlek (och syns om WebGL saknas). */
.mane {
  position: absolute;
  left: 50%;
  top: var(--horisont);
  width: var(--mane);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% calc(var(--e) * var(--stig));
  will-change: translate;
}
.mane-duk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scen.webgl .mane { visibility: hidden; will-change: auto; }

/* Startvyns text står på månen, centrerad under loggan. Den tonar bort och
   lyfter i början av rullningen. Månens ljuskant böjer nedåt mot sidorna;
   texten står så långt ner att rubrikens ändar hamnar på mörk mark. */
.scen-text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horisont) + var(--s8) + var(--s5));
  text-align: center;
  opacity: calc(1 - var(--p) * 3.7);
  translate: 0 calc(var(--p) * -290px);
  will-change: opacity, translate;
}
.scen-text h1 {
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  text-wrap: balance;
}
.scen-text .overrad { margin-bottom: var(--s3); color: var(--text-2); }
.scen-text .ingress { margin: var(--s4) auto 0; max-width: 46ch; font-size: 17px; color: var(--text-2); }
.scen-text .hero-handling { justify-content: center; margin-top: var(--s5); }

/* Mot slutet mörknar scenens nedre del till svart, så att den släpper
   taget utan kant (--slut sätts av skriptet efter var scenen släpper). */
.scen-slut {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, #000 100%);
  opacity: var(--slut, 0);
  pointer-events: none;
}

/* Tjänster på månen: avsnittet skjuts upp över scenens sista 1,44
   skärmhöjder (minus --kort), så att rubriken står mitt på månens mörka
   yta i samma stund som loggan försvinner. */
.js .pa-manen {
  margin-top: calc(var(--kort, 0px) - 144svh);
  border-top: 0;
  position: relative;
  background: linear-gradient(to bottom, transparent 0, transparent 144svh, #000 144svh);
}
/* Avsnittet visas en gång, när rubriken kommit upp (klassen sätts av
   skriptet): delarna stiger fram ur en lätt oskärpa, en i taget uppifrån,
   och linjerna mellan tjänsterna dras ut från vänster. Rörelsen går på
   tid, inte på rullning, så den blir lika lugn hur fort man än rullar. */
.js .pa-manen .avsnitt-huvud > *,
.js .pa-manen .tjanstlista li > * {
  opacity: 0;
  translate: 0 18px;
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .pa-manen .tjanstlista li::before {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.js .pa-manen .tjanstlista li { border-top-color: transparent; position: relative; }
.js .pa-manen .tjanstlista li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--linje);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.6,0,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .pa-manen .tjanstlista li:first-child::after { display: none; }
.js .pa-manen.syns .avsnitt-huvud > *,
.js .pa-manen.syns .tjanstlista li > * { opacity: 1; translate: 0 0; filter: none; }
.js .pa-manen.syns .tjanstlista li::before { opacity: 1; }
.js .pa-manen.syns .tjanstlista li::after { transform: none; }
/* Loggan stiger upp bakom månen när sidan laddats. Rörelsen ligger i
   transform, rullningens i translate, så de inte tar ut varandra. */
.js .scen:not(.tand) .mane-logga { opacity: 0; }
.js .scen.tand .mane-logga { animation: stig 2.2s cubic-bezier(.2,.7,.2,1) .3s both; }
@keyframes stig {
  from { opacity: 0; transform: translateY(45%); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .scen { height: auto; }
  .js .pa-manen { margin-top: 0; background: #000; }
  .js .pa-manen .avsnitt-huvud > *,
  .js .pa-manen .tjanstlista li > *,
  .js .pa-manen .tjanstlista li::before { opacity: 1; translate: 0 0; filter: none; transition: none; }
  .js .pa-manen .tjanstlista li { border-top-color: var(--linje); }
  .js .pa-manen .tjanstlista li::after { display: none; }
  .scen-ram { position: relative; top: 0; }
  .js .scen.tand .mane-logga { animation: none; }
}

/* Mobil: högre horisont lämnar plats för texten på månen; månen är
   mindre så att dess rundning syns. Menyn ligger bakom en knapp i högra
   hörnet (se Menyknappen nedan). */
@media (max-width: 767px) {
  .scen-ram {
    top: var(--s8);
    height: calc(100svh - var(--s8));
    --ram-h: calc(100svh - var(--s8));
    --horisont: min(var(--ram-h) * .52, var(--ram-h) - 300px);
    --mane: 300vw;
    --logga: 78vw;  /* hela bredden var för stort (Pontus 2026-11-03) */
  }
  /* Raden ovanför rubriken är borta på telefon (Pontus 2026-11-03), så
     rubriken flyttas ner lite, bort från månens ljusa kant. */
  .scen-text { top: calc(var(--horisont) + var(--s7)); }
  .scen-text .overrad { display: none; }
  .stjarnor, .mane, .mane-logga, .scen-text { will-change: auto; }
  /* Tjänster stiger fram utan oskärpa: femton element med oskärpa som
     tonar samtidigt ovanpå månen är för tungt för en telefon. */
  .js .pa-manen .avsnitt-huvud > *,
  .js .pa-manen .tjanstlista li > * { filter: none; transition-property: opacity, translate; }
  .scen-text .ingress { font-size: 16px; }
  .scen-text .hero-handling { flex-wrap: nowrap; gap: var(--s4); }
  .scen-text .knapp { padding: 0 var(--s4); white-space: nowrap; }
}
/* Telefonen: samma scen som på datorn, men rörelsen drivs av
   webbläsarens egen rullningsanimering (animation-timeline) i stället för
   av skriptet. Den räknas fram vid sidan av sidans skript, i samma takt
   som fingret, så den hackar inte; skriptsättet laggade ända tills
   Tjänster kom fram (Pontus 2026-11-03). Månen snurrar inte här, den
   stiger. Förloppet är detsamma som skriptets: tidslinjen är scenens väg
   under toppen, månen och loggan rör sig under första 80 % med mjuk start
   och landning, texten tonar bort under första 27 %. --stig mäts av
   skriptet en gång. */
@supports (animation-timeline: view()) {
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .js .scen { view-timeline: --scen block; view-timeline-inset: var(--s8) 0; }
    .js .stjarnor { animation: rull-stjarnor linear both; animation-timeline: --scen; animation-range: contain 0% contain 100%; }
    .js .mane { animation: rull-mane cubic-bezier(.45,0,.55,1) both; animation-timeline: --scen; animation-range: contain 0% contain 80%; }
    .js .scen.tand .mane-logga {
      animation: stig 2.2s cubic-bezier(.2,.7,.2,1) .3s both, rull-logga cubic-bezier(.45,0,.55,1) both;
      animation-timeline: auto, --scen;
      animation-range: normal, contain 0% contain 80%;
    }
    .js .scen-text {
      animation: rull-text-ton linear both, rull-text-lyft linear both;
      animation-timeline: --scen, --scen;
      animation-range: contain 0% contain 27%, contain 0% contain 100%;
    }
    .js .scen-slut { animation: rull-slut linear both; animation-timeline: --scen; animation-range: contain 75% contain 100%; }
  }
}
@keyframes rull-stjarnor { from { translate: 0 0; } to { translate: 0 -60px; } }
@keyframes rull-mane { from { translate: -50% 0; } to { translate: -50% var(--stig); } }
@keyframes rull-logga { from { translate: -50% -84%; } to { translate: -50% -98%; } }
@keyframes rull-text-ton { from { opacity: 1; } to { opacity: 0; } }
@keyframes rull-text-lyft { from { translate: 0 0; } to { translate: 0 -290px; } }
@keyframes rull-slut { from { opacity: 0; } to { opacity: 1; } }

/* Telefoner som saknar rullningsanimering får en stillastående startbild,
   som vid minskad rörelse, och Tjänster direkt under. */
@supports not (animation-timeline: view()) {
  @media (max-width: 767px) {
    .js .scen { height: auto; }
    .js .pa-manen { margin-top: 0; background: #000; }
    .js .pa-manen .avsnitt-huvud > *,
    .js .pa-manen .tjanstlista li > *,
    .js .pa-manen .tjanstlista li::before { opacity: 1; translate: 0 0; filter: none; transition: none; }
    .js .pa-manen .tjanstlista li { border-top-color: var(--linje); }
    .js .pa-manen .tjanstlista li::after { display: none; }
    .scen-ram { position: relative; top: 0; }
    /* Månens nederkant tonar ut i Tjänsters svart i stället för att skäras. */
    .scen-slut { opacity: 1; background: linear-gradient(to bottom, transparent 90%, #000); }
    .scen-text { z-index: 1; }
  }
}

/* Liten telefon: ingressen får ge plats åt loggan; den står i Tjänster. */
@media (max-width: 767px) and (max-height: 720px) {
  .scen-ram { --horisont: min(var(--ram-h) * .52, var(--ram-h) - 215px); }
  .scen-text .ingress { display: none; }
}

/* ------------------------------------------------------------------
   Sidbytet. Den gamla sidan tonar ut och den nya tonar in med en kort
   lyftning; toppen står still. Inget annat rör sig (Pontus 2026-11-03:
   rubrik som flyttade, oskärpa och måne var för rörigt). Webbläsare utan
   stöd för sidövergångar får samma toning via sida.js.
   ------------------------------------------------------------------ */

@view-transition { navigation: auto; }

.topp { view-transition-name: topp; }

::view-transition-old(root) { animation: sida-ut .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: sida-in .45s cubic-bezier(.2,.7,.2,1) .1s both; }

@keyframes sida-ut { to { opacity: 0; } }
@keyframes sida-in { from { opacity: 0; translate: 0 12px; } }

.lamnar body { opacity: 0; transition: opacity .2s cubic-bezier(.4,0,1,1); }
.kommer body { animation: sida-in .45s cubic-bezier(.2,.7,.2,1) backwards; }

/* Kommer man tillbaka till förstasidan redan nedrullad står Tjänster där
   direkt, utan sin egen effekt. */
.js .pa-manen.direkt *,
.js .pa-manen.direkt *::before,
.js .pa-manen.direkt *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .kommer body { animation: none; }
}

/* ------------------------------------------------------------------
   Tjänstsidorna (mappen tjanster). Överst rubriken, sedan förstasidans
   avsnitt: rubrik till vänster, innehåll till höger. Följer valt läge.
   ------------------------------------------------------------------ */

.tjanst-topp { padding: var(--s6) 0 var(--s8); }
.tillbaka {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin-bottom: var(--s7);
  font-size: 14px;
  color: var(--text-2);
  transition: color 150ms;
}
.tillbaka::before { content: "←"; transition: transform 150ms; }
.tillbaka:hover { color: var(--text); }
.tillbaka:hover::before { transform: translateX(-2px); }
.tjanst-topp .overrad { color: var(--orange-text); font-variant-numeric: tabular-nums; }
.tjanst-topp h1 {
  width: fit-content;
  max-width: 15ch;
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.04;
  font-weight: 600;
  text-wrap: balance;
}
.tjanst-topp .ingress { max-width: 52ch; color: var(--text-2); }
.tjanstlista.utan-nummer li { grid-template-columns: 1fr; }
.tjanstlista.utan-nummer li::before { display: none; }

/* Nästa tjänst: hela raden är länken, så man kan bläddra genom tjänsterna
   utan att gå tillbaka. */
.nasta { border-top: 1px solid var(--linje); }
.nasta a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s7) 0;
}
.nasta .overrad { margin-bottom: var(--s2); }
.nasta-titel { display: block; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15; font-weight: 600; }
.nasta svg {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--orange-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.nasta a:hover svg { transform: translateX(4px); }
@media (min-width: 1024px) { .nasta a { padding: var(--s8) 0; } }

/* ------------------------------------------------------------------
   Referenssidan (mappen referenser). Kartan visar Mälardalen och kusten
   från Gävle till Nyköping, bara land och sjöar i sidans egna grå, utan
   texter (Pontus 2026-11-03). Den tonar ut mot kanterna i stället för att
   ligga i en ruta. Orange används bara för projekten; namnen står i
   listan bredvid.
   ------------------------------------------------------------------ */

.kartavsnitt { --land: var(--bg-2); }

.karta-rad { display: grid; gap: var(--s7); align-items: center; }
.karta {
  position: relative;
  --ut: linear-gradient(to right, transparent, #000 30%, #000 92%, transparent),
        linear-gradient(to bottom, transparent, #000 18%, #000 85%, transparent);
  -webkit-mask-image: var(--ut);
  -webkit-mask-composite: source-in;
  mask-image: var(--ut);
  mask-composite: intersect;
}
.karta svg { display: block; width: 100%; height: 100%; }
.karta-land { fill: var(--land); fill-rule: evenodd; }
.karta-lager { position: absolute; inset: 0; }

/* Projektet: en orange prick med en svag ring. */
.plats {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 140, 0, .22);
  translate: -50% -50%;
  transition: scale 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms;
}
.plats.aktiv { scale: 1.5; box-shadow: 0 0 0 4px rgba(243, 140, 0, .3); z-index: 1; }

/* Prickarna kommer fram en i taget när sidan visats. */
.js .plats { animation: plats-in .6s cubic-bezier(.2,.7,.2,1) .35s backwards; }
.js .plats + .plats { animation-delay: .5s; }
.js .plats + .plats + .plats { animation-delay: .65s; }
@keyframes plats-in { from { opacity: 0; scale: .4; } }
@media (prefers-reduced-motion: reduce) { .js .plats { animation: none; } }

.karta-rad .referenslista { margin-top: var(--s6); }
.referenslista { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--linje); }
.referenslista li {
  display: grid;
  grid-template-columns: var(--s5) 1fr;
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linje);
}
.referenslista strong { display: block; font-size: 18px; font-weight: 600; }
.referenslista li span span { display: block; color: var(--text-2); }
.lista-prick {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  translate: 0 -2px;
}
.lista-prick[hidden] { display: block; visibility: hidden; }

/* På telefon ligger Stockholmsprickarna bara några pixlar isär. */
@media (max-width: 767px) {
  .plats { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(243, 140, 0, .22); }
}
@media (min-width: 768px) {
  .referenslista { grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
}
@media (min-width: 1024px) {
  .karta-rad { grid-template-columns: 7fr 5fr; gap: var(--s8); }
  .karta-rad .referenslista { grid-template-columns: 1fr; }
}

/* Se mer under referenserna på förstasidan: sekundär knapp med kontur. */
.knapp-kontur {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--linje);
  border-radius: var(--r-knapp);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 200ms;
}
.knapp-kontur svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--orange-text);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.knapp-kontur:hover { border-color: var(--orange-text); }
.knapp-kontur:hover svg { transform: translateX(3px); }
#referenser .knapp-kontur { margin-top: var(--s6); }

/* ------------------------------------------------------------------
   Menyknappen (telefon). Flikraden i nederkant är borta (Pontus
   2026-11-03); i stället en knapp i högra hörnet som fäller ner menyn
   under toppen. Knappen läggs in av sida.js, så utan skript finns varken
   knapp eller meny på telefon, som förut. Ikonen är två streck som vrider
   sig till ett kryss. Logga in flyttar in i menyn som sista rad.
   ------------------------------------------------------------------ */

.menyknapp, .meny .meny-logga-in, .meny-tacke { display: none; }

@media (max-width: 767px) {
  .js .menyknapp {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 auto;  /* ikonens högerkant i linje med innehållet */
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menyknapp span {
    grid-area: 1 / 1;
    width: 22px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: translate .3s cubic-bezier(.2,.7,.2,1), rotate .3s cubic-bezier(.2,.7,.2,1);
  }
  .menyknapp span:first-child { translate: 0 -4px; }
  .menyknapp span:last-child { translate: 0 4px; }
  .meny-oppen .menyknapp span:first-child { translate: 0 0; rotate: 45deg; }
  .meny-oppen .menyknapp span:last-child { translate: 0 0; rotate: -45deg; }

  .js .topp-rad > .logga-in { display: none; }

  /* Menyn fälls ner under toppen och täcker sidan med ett mörkt lager. */
  .js .rymd .meny {
    display: block;
    position: fixed;
    top: var(--s8);
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--s3) max(var(--sida), env(safe-area-inset-left)) var(--s6) max(var(--sida), env(safe-area-inset-right));
    background: var(--bg);
    border-bottom: 1px solid var(--linje);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .4s cubic-bezier(.6,0,.2,1), visibility 0s .4s;
  }
  .js .rymd .meny a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--linje);
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .3s, translate .3s;
  }
  .js .rymd .meny a::after {
    content: "";
    width: 9px;
    height: 9px;
    border: solid var(--orange-text);
    border-width: 1.5px 1.5px 0 0;
    rotate: 45deg;
    margin-right: 4px;
  }
  .js .rymd .meny .meny-logga-in { color: var(--text-2); border-bottom: 0; }
  .meny-tacke {
    position: fixed;
    inset: var(--s8) 0 0;
    z-index: 4;  /* över allt på sidan, under toppen (5) */
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s;
  }
  .js .meny-tacke { display: block; }

  .meny-oppen .rymd .meny {
    clip-path: inset(0 0 -1px 0);
    visibility: visible;
    transition: clip-path .45s cubic-bezier(.2,.7,.2,1);
  }
  .meny-oppen .rymd .meny a {
    opacity: 1;
    translate: 0 0;
    transition: opacity .4s cubic-bezier(.2,.7,.2,1), translate .4s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(80ms + var(--i, 0) * 40ms);
  }
  .meny-oppen .meny-tacke { opacity: 1; visibility: visible; transition: opacity .4s; }
  .meny-oppen, .meny-oppen body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .menyknapp span, .js .rymd .meny, .js .rymd .meny a, .meny-tacke { transition: none !important; }
}