/* ==========================================================================
   YRD Business AB — designsystem

   Sidan öppnar mörkt med ett levande nätverk i bakgrunden, andas ut i varm
   sten på mitten och stänger mörkt igen. Ingen del av sidan är vit.

   Innehåll
   00  Typsnitt (egna filer, ingen tredje part)
   01  Variabler
   02  Grund och typografi
   03  Ytor, textur, sektioner
   04  Knappar
   05  Header och navigering
   06  Hero — det mörka öppningsblocket
   07  Kort och rutnät
   08  Listor, paneler, dragspel
   09  Mörka band
   10  Formulär
   11  Sidfot
   12  Rörelse
   13  Responsivt
   16  Förlopp, datablad, tjänstesidor
   17  Rörelse som ska märkas
   18  Rörelse på kompositorn
   19  Vyövergångar mellan sidor
   20  Ordtändning
   21  Navdiagram
   ========================================================================== */

/* ---------------------------------------------- 00  Typsnitt ------------- */

/* Typsnitten ligger på egen server i stället för att hämtas från Google.
   Tre skäl, i den ordningen:
     1. GDPR. Ett anrop till fonts.gstatic.com skickar besökarens IP till
        Google. Tysk domstol har dömt det som personuppgiftsöverföring utan
        rättslig grund (LG München I, 2022). Med egna filer finns ingen
        tredje part att beskriva i integritetspolicyn.
     2. Fart. Den externa stilmallen blockerade renderingen och krävde två
        extra anslutningar (preconnect till två domäner). Nu är det sex
        filer från samma server som redan är uppkopplad.
     3. Kontroll. Filerna kan inte ändras eller försvinna under fötterna.

   Bara latinsk delmängd och rak stil — svenska tecken (å ä ö) ligger i
   latin. Ingen kursiv, för sajten använder ingen. Sex filer, 98 kB totalt.

   font-display: swap — texten visas direkt i reservtypsnittet och byts när
   filen kommit. Aldrig osynlig text. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("typsnitt/instrument-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("typsnitt/instrument-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("typsnitt/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("typsnitt/instrument-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("typsnitt/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("typsnitt/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------- 01  Variabler ------ */

:root {
  /* Ljusa ytor — varm sten. Medvetet en bra bit från vitt. */
  --bg:            #e8e3d9;
  --bg-alt:        #dcd6c9;
  --surface:       #f5f2ec;
  --surface-hi:    #fbf9f5;

  /* Mörka ytor */
  --ink:           #0a1018;
  --ink-2:         #0e1622;
  --ink-line:      rgba(255, 255, 255, .10);

  /* Linjer */
  --line:          rgba(26, 24, 18, .13);
  --line-soft:     rgba(26, 24, 18, .08);
  --line-strong:   rgba(26, 24, 18, .22);

  /* Text */
  --text:          #14161a;
  --text-soft:     #3b3e45;
  --text-muted:    #595d65;
  --on-ink:        #ffffff;
  --on-ink-soft:   rgba(255, 255, 255, .74);
  --on-ink-muted:  rgba(255, 255, 255, .52);

  /* Accent — en enda mättad färg, med en ljusare variant för mörk botten */
  --accent:        #1b4dff;
  --accent-ink:    #1a3ec4;
  --accent-lite:   #7ea0ff;
  --accent-wash:   rgba(27, 77, 255, .08);
  --accent-line:   rgba(27, 77, 255, .24);

  /* Mått */
  --maxw:          1160px;
  --prose:         66ch;
  --radius:        12px;
  --radius-sm:     9px;

  /* Typografi */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Skuggor */
  --ring:         0 0 0 1px rgba(26, 24, 18, .09);
  --ring-strong:  0 0 0 1px rgba(26, 24, 18, .14);
  --shadow-1:     0 1px 2px rgba(26, 24, 18, .05),
                  0 3px 8px -3px rgba(26, 24, 18, .06);
  --shadow-2:     0 2px 4px rgba(26, 24, 18, .04),
                  0 10px 24px -10px rgba(26, 24, 18, .15),
                  0 24px 48px -28px rgba(26, 24, 18, .18);

  /* Rörelse */
  --ease:         cubic-bezier(.16, 1, .3, 1);
  --ease-short:   cubic-bezier(.2, 0, 0, 1);
  --t-fast:       .18s;
  --t-base:       .32s;
  --t-slow:       .7s;

  /* Växlar mellan ljus och mörk text i sidhuvudet */
  --header-fg:      var(--text);
  --header-fg-soft: var(--text-soft);
}

/* ---------------------------------------------------------------------------
   Registrerade egenskaper

   Varje custom property som ändras under rörelse deklareras med @property och
   inherits: false. Utan det räknas den som ärvd, och en enda skrivning tvingar
   om stilen för hela underträdet varje bildruta. Med inherits: false stannar
   invalideringen på elementet självt. Typen (<length>, <angle>) gör dessutom
   att värdet kan interpoleras, vilket krävs för att animera det.
   --------------------------------------------------------------------------- */

@property --mx  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --my  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --kx  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ky  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mgx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mgy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --rx  { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --ry  { syntax: "<angle>";  inherits: false; initial-value: 0deg; }

/* ------------------------------------------ 02  Grund och typografi ------ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* På mörk botten räcker inte den mättade accentfärgen. #1b4dff mot #0a1018 ger
   2,3:1, och WCAG 1.4.11 kräver 3:1 för en fokusmarkering. Den ljusare
   varianten ger 6,9:1. */
.hero :focus-visible,
.on-ink :focus-visible,
.process--ink :focus-visible,
.navband :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible,
.site-header:not(.is-solid) :focus-visible { outline-color: var(--accent-lite); }

::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  /* Golvet är satt så att sajtens längsta enskilda ord ("Ledarskapscoaching,")
     får plats på 320 px utan att sticka ut. Avstavning som andra försvar. */
  font-size: clamp(1.95rem, 5.3vw, 4rem);
  letter-spacing: -.034em;
  line-height: 1.04;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Samma två försvar som h1. Utan dem klipptes långa svenska sammansättningar
   ("leverantörsoberoende systemval", "Personuppgiftsansvarig") av vid
   skärmkanten på 320 och 390 px — ordet gick helt enkelt inte att bryta och
   stack ut ur sin spalt. */
h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em;
  hyphens: auto;
  overflow-wrap: break-word;
}
h3 {
  font-size: 1.18rem;
  letter-spacing: -.018em;
  hyphens: auto;
  overflow-wrap: break-word;
}

p { margin: 0 0 1.1em; color: var(--text-soft); text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 28px;
}

.narrow { max-width: 780px; }

/* -------------------------------- 03  Ytor, textur, sektioner ----------- */

/* Nästan osynlig kornighet. Tar bort det platt digitala ur färgen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

.site-header, main, .site-footer { position: relative; z-index: 2; }

.section {
  position: relative;
  padding: clamp(56px, 8.5vw, 104px) 0;
  overflow: hidden;
}
.section--alt { background: var(--bg-alt); }
.section > .container { position: relative; z-index: 1; }

/* Liggarrutnät: fina linjer med var fjärde något starkare. Driver med scroll. */
.section--grid::before {
  content: "";
  position: absolute;
  inset: -30% 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(26,24,18,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,24,18,.10) 1px, transparent 1px),
    linear-gradient(to right, rgba(26,24,18,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,24,18,.05) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 45%, #000 22%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 45%, #000 22%, transparent 74%);
  /* Driften ligger i sektion 18 och drivs av sektionens egen vytidslinje.
     Tidigare skrev skriptet en ärvd variabel på :root varje bildruta, vilket
     tvingade om stilen för hela dokumentet. Nu rör detta lager sig helt på
     kompositorn utan att huvudtråden är inblandad. */
}

.section-head { max-width: 700px; margin-bottom: 52px; }
.section-head p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .5;
}

.lead {
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--text-soft);
  max-width: var(--prose);
}

/* -------------------------------------------------- 04  Knappar --------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.45em;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: -.008em;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t-fast) var(--ease-short),
              border-color var(--t-fast) var(--ease-short),
              color var(--t-fast) var(--ease-short),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27,77,255,.24), 0 8px 20px -10px rgba(27,77,255,.7);
}
.btn--primary:hover {
  background: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(27,77,255,.24), 0 14px 30px -12px rgba(27,77,255,.75);
}

/* Ljusstrimma som sveper förbi vid hover */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.24) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.btn--ghost:hover { border-color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-2); }

.btn__arrow { display: inline-block; transition: transform var(--t-base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Knappar på mörk botten */
.on-ink .btn--primary { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 14px 30px -14px rgba(0,0,0,.7); }
.on-ink .btn--primary:hover { background: #eeece7; }
.on-ink .btn--primary::after { background: linear-gradient(100deg, transparent 30%, rgba(27,77,255,.18) 50%, transparent 70%); }
.on-ink .btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; box-shadow: none; }
.on-ink .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.13); }

/* ---------------------------------- 05  Header och navigering ----------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  z-index: 60;
  will-change: transform;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease-short),
              border-color var(--t-base) var(--ease-short),
              box-shadow var(--t-base) var(--ease-short);
}

/* Överst ligger headern ovanpå det mörka heroblocket och är genomskinlig */
.site-header:not(.is-solid) {
  background: transparent;
  --header-fg: #ffffff;
  --header-fg-soft: rgba(255,255,255,.74);
}

.site-header.is-solid {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 26px -14px rgba(26,24,18,.5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
  transition: height var(--t-base) var(--ease-short);
}
.site-header.is-solid .site-header__inner { height: 66px; }

.logo { display: inline-flex !important; align-items: center; gap: 11px; flex-wrap: nowrap; }
.logo__mark { flex: none; transition: transform .5s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.05); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--header-fg);
  transition: color var(--t-base) var(--ease-short);
}
.logo__sub {
  font-family: var(--mono);
  font-size: .55rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--header-fg-soft);
  opacity: .8;
  margin-top: 5px;
  transition: color var(--t-base) var(--ease-short);
}

.nav { display: flex; align-items: center; gap: 28px; }

.nav__link {
  position: relative;
  font-size: .93rem;
  color: var(--header-fg-soft);
  padding-block: 4px;
  transition: color var(--t-fast) var(--ease-short);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease);
}
.site-header:not(.is-solid) .nav__link::after { background: #fff; }
.nav__link:hover { color: var(--header-fg); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--header-fg); font-weight: 550; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--header-fg);
  opacity: .55;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  cursor: pointer;
}
.site-header.is-solid .nav-toggle { opacity: .35; }
.nav-toggle span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--header-fg);
  margin: 3.6px 0;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast), background var(--t-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); }

/* ------------------------------------------------------ 06  Hero -------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(120px, 17vw, 210px) 0 clamp(72px, 9vw, 116px);
  margin-top: -80px;           /* heroblocket börjar bakom den genomskinliga headern */
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Svag ljuskälla uppe till höger + avtoning mot sidans stenfärg nedtill */
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 460px at 78% 18%, rgba(27,77,255,.22), transparent 66%),
    radial-gradient(560px 380px at 12% 92%, rgba(27,77,255,.10), transparent 68%);
}
.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to bottom, transparent, var(--ink));
}

.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 15ch; color: #fff; }
.hero .lead { font-size: 1.2rem; color: var(--on-ink-soft); }
.hero .eyebrow { color: var(--accent-lite); }
.hero p { color: var(--on-ink-soft); }

.hero--page { padding: clamp(112px, 14vw, 168px) 0 clamp(56px, 7vw, 88px); }
.hero--page h1 { max-width: 19ch; }

.crumb {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--on-ink-muted);
  margin-bottom: 22px;
}
.crumb a {
  display: inline-block;
  padding-block: 5px;          /* träffytan minst 24 px — WCAG 2.5.8 */
  transition: color var(--t-fast);
}
.crumb a:hover { color: #fff; }
.crumb span { margin-inline: .55em; opacity: .45; }

.hero-meta {
  list-style: none;
  margin: 56px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--on-ink-muted);
}
.hero-meta li { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-lite);
  flex: none;
}

/* ------------------------------------------- 07  Kort och rutnät -------- */

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease-short);
}

/* Ljuskägla som följer muspekaren */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-short);
  /* Käglan låg tidigare som en gradientposition (var(--mx) inne i
     radial-gradient). Att flytta en gradient är ommålning av hela ytan varje
     pekarrörelse. Nu är den ett lager med fast storlek som förskjuts — se
     sektion 18. */
}

/* Accentlinje som växer fram längs överkanten */
.card::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}

a.card:hover, .card--hover:hover {
  transform: translateY(-3px);
  background: var(--surface-hi);
  box-shadow: var(--ring-strong), var(--shadow-2);
}
a.card:hover::before, .card--hover:hover::before { opacity: 1; }
a.card:hover::after { transform: scaleX(1); }

.card__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  margin-bottom: 20px;
  transition: transform var(--t-base) var(--ease);
}
a.card:hover .card__icon { transform: translateY(-2px) scale(1.06); }

.card h3 { margin-bottom: .4em; }
.card p { font-size: .95rem; margin-bottom: 0; }

.card__more {
  margin-top: 22px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
a.card:hover .card__more .btn__arrow { transform: translateX(4px); }

.card--accent {
  background: linear-gradient(0deg, var(--accent-wash), var(--accent-wash)), var(--surface);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-1);
}
.card--accent:hover { box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2); }

.step {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--ring), var(--shadow-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.step:hover { transform: translateY(-2px); box-shadow: var(--ring-strong), var(--shadow-2); }
.step__num {
  font-family: var(--mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .1em;
  color: var(--accent-ink);
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.step h3 { margin-bottom: .4em; }
.step p { font-size: .95rem; margin-bottom: 0; }

/* ------------------------- 08  Listor, paneler, dragspel ---------------- */

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li {
  position: relative;
  padding-left: 27px;
  color: var(--text-soft);
  font-size: .97rem;
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.check-list strong { color: var(--text); font-weight: 600; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.panel {
  padding: 32px 30px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow-1);
}
.panel h3 { font-size: 1.02rem; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }

.value-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--ring), var(--shadow-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.value:hover { transform: translateY(-2px); box-shadow: var(--ring-strong), var(--shadow-2); }
.value h3 { font-size: 1.02rem; margin-bottom: .35em; }
.value p { font-size: .93rem; margin-bottom: 0; }

.faq { display: grid; gap: 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 550;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast);
}
.faq__q:hover { color: var(--accent-ink); }

.faq__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--t-base), transform var(--t-base) var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto 5px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon { box-shadow: inset 0 0 0 1px var(--accent-line); transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { font-size: .96rem; margin: 0; padding-bottom: 22px; max-width: var(--prose); }

/* ------------------------------------------------ 09  Mörka band -------- */

.cta {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(64px, 9vw, 116px) 0 clamp(52px, 6vw, 80px);
  overflow: hidden;
}

/* Rutnät med fallande ljuspulser — samma språk som i hero, billigare gjort */
.cta__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cta__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 76% 70% at 50% 40%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 76% 70% at 50% 40%, #000 18%, transparent 76%);
}
.cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 400px at 50% 108%, rgba(27,77,255,.24), transparent 64%);
}
.pulse {
  position: absolute;
  top: -160px;
  width: 1px; height: 140px;
  background: linear-gradient(to bottom, transparent, var(--accent-lite), transparent);
  opacity: 0;
  animation: falla var(--dur, 9s) linear var(--delay, 0s) infinite backwards;
}
@keyframes falla {
  0%   { transform: translateY(0);            opacity: 0; }
  8%   {                                       opacity: .85; }
  92%  {                                       opacity: .85; }
  100% { transform: translateY(calc(100% + 900px)); opacity: 0; }
}

.cta > .container { position: relative; z-index: 1; text-align: center; }
.cta h2 { color: #fff; max-width: 19ch; margin-inline: auto; }
.cta p, .cta .lead { color: var(--on-ink-soft); }
.cta .lead { margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* -------------------------------------------------- 10  Formulär -------- */

.form { display: grid; gap: 16px; }

.field { display: grid; gap: 6px; }
.field label { font-size: .87rem; font-weight: 550; color: var(--text); }
.field .hint { font-size: .8rem; color: var(--text-muted); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: .96rem;
  color: var(--text);
  background: var(--surface-hi);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease-short),
              box-shadow var(--t-fast) var(--ease-short);
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23595d65' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.field--check { display: flex; align-items: flex-start; gap: 10px; }
.field--check input {
  /* 13 px som webbläsaren ger som standard är för litet att träffa.
     24 px är golvet i WCAG 2.5.8. */
  width: 24px;
  height: 24px;
  margin-top: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.field--check label { font-size: .86rem; font-weight: 400; color: var(--text-muted); line-height: 1.55; }
.field--check a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.contact-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-item:first-child { padding-top: 0; }
.contact-item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-item__label {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.contact-item__value { font-size: 1rem; color: var(--text); }
.contact-item__value a { transition: color var(--t-fast); }
.contact-item__value a:hover { color: var(--accent-ink); }

/* --------------------------------------------------- 11  Sidfot --------- */

.site-footer {
  position: relative;
  /* Käglan som tänds vid pekaren är en cirkel på 1040 px. Utan klippning
     sträcker den ut dokumentets bredd till 520 px på en 390 px skärm — osynligt
     eftersom body döljer sidledsscroll, men sidan blir beroende av just den
     spärren. Samma regel finns redan på .cta och .process--ink, som har samma
     kägla. */
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink-soft);
  padding: 0 0 34px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 58px 0 42px;
  border-top: 1px solid var(--ink-line);
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  font-weight: 500;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a:not(.logo), .footer-col li { font-size: .92rem; color: var(--on-ink-soft); }

.footer-col a:not(.logo) {
  position: relative;
  display: inline-block;
  padding-block: 3px;          /* träffytan minst 24 px — WCAG 2.5.8 */
  transition: color var(--t-fast);
}
.footer-col a:not(.logo)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease);
}
.footer-col a:not(.logo):hover { color: #fff; }
.footer-col a:not(.logo):hover::after { transform: scaleX(1); }

.site-footer .logo__name { color: #fff; }
.site-footer .logo__sub { color: var(--on-ink-muted); }
.footer-about p { font-size: .92rem; max-width: 34ch; margin: 18px 0 0; color: var(--on-ink-soft); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-line);
  font-size: .84rem;
  color: var(--on-ink-muted);
}
/* -------------------------------------------------- 12  Rörelse --------- */

/* VIKTIGT: `.reveal` döljer innehåll, och det får bara ske när något garanterat
   visar det igen. Därför är regeln låst till `html[data-reveal]`, som sätts av
   inline-skriptet i <head> — men bara när webbläsaren har IntersectionObserver
   och rörelse är tillåten.

   Bakgrund: den publicerade sajten visade ett tomt heroblock vid första
   inladdningen. Orsaken var att IntersectionObserver aldrig anropades — sidans
   ritning var upphållen — och då satte ingenting `is-visible`. Innehållet låg
   kvar på opacity 0. Ett dolt tillstånd som kräver att JavaScript lyckas är
   fel konstruktion; nu är synligt grundläget och animationen påbyggnaden. */
html[data-reveal] .reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.reveal {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
/* Prefixet är inte kosmetiskt. Det dolda läget står på `html[data-reveal]
   .reveal` och väger (0,2,1). Utan samma prefix väger den här regeln (0,2,0)
   och förlorar — då blir innehållet aldrig synligt. */
html[data-reveal] .reveal.is-visible,
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

html[data-reveal] .card.reveal, html[data-reveal] .step.reveal,
html[data-reveal] .value.reveal, html[data-reveal] .panel.reveal { transform: translateY(24px) scale(.985); }
html[data-reveal] .card.reveal.is-visible,
html[data-reveal] .step.reveal.is-visible,
html[data-reveal] .value.reveal.is-visible,
html[data-reveal] .panel.reveal.is-visible { transform: none; }

html[data-reveal] h1.reveal, html[data-reveal] h2.reveal { transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .card.reveal, .step.reveal, .value.reveal, .panel.reveal,
  h1.reveal, h2.reveal { opacity: 1; transform: none; transition: none; }
  .progress { display: none; }
  .pulse { animation: none !important; opacity: .35; }
  .section--grid::before { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (hover: none) {
  .card::before { display: none; }
  a.card:hover { transform: none; }
}

/* ----------------------------------------------- 13  Responsivt --------- */

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 66px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 28px 24px;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 40px -24px rgba(26,24,18,.55);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    transition: clip-path .42s var(--ease), opacity .25s var(--ease-short), visibility .42s;
  }
  .nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; }
  /* Menyn ligger på ljus botten även när headern är genomskinlig */
  .nav.is-open .nav__link { color: var(--text-soft); }
  .nav.is-open .nav__link[aria-current="page"] { color: var(--text); }
  .nav__link { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 18px; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding-inline: 20px; }
  .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .hero-meta { gap: 9px 18px; font-size: .69rem; margin-top: 40px; }
}

/* ==========================================================================
   14  Nya komponenter — rullande band, nyckeltal, taggar, avdelare,
       lutande rutnät och 3D-lutning på kort
   ========================================================================== */

/* ---------- Rullande produktband i heroblocket ---------- */

.ticker {
  position: relative;
  z-index: 1;
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--ink-line);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.ticker__spar {
  display: flex;
  width: max-content;
  animation: rulla 64s linear infinite;
}
.ticker:hover .ticker__spar { animation-play-state: paused; }

.ticker__rad { display: flex; flex: none; }

.ticker__rad span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 30px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--on-ink-muted);
}
.ticker__rad span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-lite);
  flex: none;
  opacity: .8;
}

/* Tre identiska spår, så ett helt spår kan rulla ut utan att sömmen syns.
   Slacket behövs för skjutlagret nedan. */
@keyframes rulla {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* Bandet skjuts dessutom i sidled av sidans scroll.

   Tidigare drev ett JavaScript bandet helt själv, bildruta för bildruta, för
   att kunna koppla farten till scrollhastigheten. Det kostade en transform-
   skrivning per ruta och en rAF-slinga som aldrig sov.

   Nu gör CSS bägge sakerna: grundrullningen är en vanlig tidsanimation, och
   scrollen lägger på en förskjutning ovanpå. Kopplingen till handen finns
   kvar — den följer scrollens läge i stället för dess hastighet — och
   huvudtråden är helt utanför. */
@keyframes yrd-band-skjut {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-160px, 0, 0); }
}

.ticker__skjut { display: flex; width: max-content; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not([data-motion="off"]) .ticker__skjut {
      animation: yrd-band-skjut linear both;
      animation-timeline: scroll(root block);
      will-change: transform;
    }
  }
}

/* ---------- Nyckeltal ---------- */

.stats {
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding: clamp(36px, 5vw, 56px) 0;
}
.stats__rad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  /* Ingen radlucka. Raderna här är rutans tre delar — tal, rubrik, text — och
     avståndet mellan dem sätts av marginalerna på .stat__rubrik. En gap här
     hade lagts ovanpå dem och slitit isär rutan. */
  row-gap: 0;
}

/* Rutorna delar radindelning med varandra i stället för att var och en räkna
   sin egen. Utan detta hamnar rubriken under ett tvåradigt tal (t.ex. "Hela
   Sverige" på smal skärm) lägre än rubrikerna bredvid, och raden ser skev ut.
   Webbläsare utan subgrid får den gamla uppställningen, vilket är oförändrat
   läge och inte trasigt. */
.stat {
  padding-left: 18px;
  border-left: 1px solid var(--ink-line);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
.stat__tal {
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Rutor med ord i stället för siffror. Mindre grad, för "Hela Sverige" är
   fyra gånger så långt som "500+" och skulle spränga spalten i talens grad. */
.stat__tal--ord {
  font-size: clamp(1.55rem, 2.3vw, 1.95rem);
  letter-spacing: -.02em;
}
.stat__ord { white-space: nowrap; }
.stat__bokstav {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--kd, 0s);
}
.stat__tal--igang .stat__bokstav { opacity: 1; transform: none; }

/* Är rörelse avstängd ska bokstäverna bara stå där. */
@media (prefers-reduced-motion: reduce) {
  .stat__bokstav { opacity: 1; transform: none; transition: none; }
}
html[data-motion="off"] .stat__bokstav {
  opacity: 1;
  transform: none;
  transition: none;
}
.stat__rubrik {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-lite);
  margin: 12px 0 8px;
}
.stat p { font-size: .88rem; color: var(--on-ink-muted); margin: 0; }

/* ---------- Taggar i korten ---------- */

.taggar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
}
.taggar li {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(26, 24, 18, .05);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: background var(--t-base) var(--ease-short), color var(--t-base);
}
a.card:hover .taggar li { background: var(--accent-wash); color: var(--accent-ink); }

.card__intro { margin-bottom: 18px !important; }

/* ---------- Liten finstilt rad ---------- */

.fin {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 18px 0 0;
}

/* ---------- Flödesavdelare med puls ---------- */

.flode {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: var(--bg);
}
.flode svg { width: 100%; height: 2px; display: block; }
.flode__bas { stroke: rgba(26,24,18,.13); stroke-width: 2; }
.flode__puls {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 130 1070;
  stroke-dashoffset: 130;
  animation: floda 6.5s linear infinite;
}
@keyframes floda {
  from { stroke-dashoffset: 130; }
  to   { stroke-dashoffset: -1070; }
}

/* ---------- 3D-lutning på kort ---------- */

.card--tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
@media (hover: hover) {
  .card--tilt:hover {
    transform:
      perspective(900px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translateY(-3px);
  }
}

/* ---------- Responsivt för de nya delarna ---------- */

@media (max-width: 900px) {
  /* Under 900 px ligger rutorna i två spalter eller staplade. Då behövs ingen
     gemensam radindelning — rutorna står inte längre bredvid varandra på ett
     sätt där rubrikerna kan hamna i otakt — och subgrid skulle i stället göra
     luckan mellan rutorna omöjlig att sätta utan att också slita isär deras
     insida. Här faller de tillbaka till vanliga block. */
  .stats__rad {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    gap: 26px 18px;
  }
  .stat {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
  }
}
@media (max-width: 520px) {
  .stats__rad { grid-template-columns: 1fr; }
  .ticker__rad span { font-size: .7rem; padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__spar { animation: none !important; }
  .flode__puls { animation: none !important; stroke-dashoffset: 0; stroke-dasharray: none; opacity: .5; }
  .card--tilt:hover { transform: none !important; }
}

/* ==========================================================================
   15  Finjustering för telefon

   Sajten hade inget överflöd i någon bredd, men heroblocket tog för mycket
   höjd och tumtryckytorna var i underkant på de minsta skärmarna.
   ========================================================================== */

@media (max-width: 820px), (hover: none) {
  /* Logotypen och menyknappen är länkar man trycker på — minst 44 px */
  .logo { min-height: 44px; padding-right: 8px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  /* Vid liggande tablet visas menyn vågrätt men fingret är lika brett */
  .nav__link { display: flex; align-items: center; min-height: 44px; }
  .contact-item__value a {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
  }
  a, button { -webkit-tap-highlight-color: rgba(27, 77, 255, .12); }
}

@media (max-width: 640px) {
  /* Mindre luft under hero så nyckeltalen kommer närmare vikningen */
  .hero { padding-bottom: 34px; }
  .hero--page { padding-bottom: 34px; }
  .ticker { margin-top: 34px; padding-top: 18px; }

  /* Kortare rader läser bättre på en smal skärm */
  .hero .lead { font-size: 1.06rem; line-height: 1.55; }
  .lead { font-size: 1.05rem; }

  /* Sektionerna behöver inte lika mycket luft när de ändå är staplade */
  .section { padding: 46px 0; }
  .section-head { margin-bottom: 32px; }

  /* Tumtryckyta: minst 44 px höjd på allt som går att trycka på */
  .btn { min-height: 48px; }
  .nav__link { min-height: 48px; display: flex; align-items: center; }
  .faq__q { min-height: 52px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }

  /* Ingen blå blinkning vid tryck i iOS */
  a, button { -webkit-tap-highlight-color: rgba(27, 77, 255, .12); }

  /* Logotypen är också en länk hem — den behöver en riktig tryckyta */
  .logo { min-height: 44px; padding-right: 8px; }

  /* E-post och telefon på kontaktsidan är de viktigaste knapparna på mobil */
  .contact-item__value a {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
  }

  /* Bandet börjar en bit in så första prickens inte klipps av masken */
  .ticker { mask-image: linear-gradient(to right, #000 0, #000 92%, transparent);
            -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent); }

  /* Kornigheten är dyrare än den är värd på telefon */
  body::after { display: none; }
}

/* På telefon är en fast bakgrund med suddning ofta det som gör scrollen ryckig.
   Headern behåller sin läsbarhet med en tätare färg istället. */
@media (max-width: 640px) and (hover: none) {
  .site-header.is-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
  }
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
}

/* ==========================================================================
   16  Processtidslinje, datablad, ministeg och tjänsterader

   Sidan handlar om tjänster och hur de fungerar. Det kräver komponenter för
   förlopp och fakta, inte för produktkort.
   ========================================================================== */

/* ---------- Tidslinje: numrerade steg som tänds vid scroll ---------- */

.tidslinje {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 46px;
  display: grid;
  gap: 4px;
}

/* Linjen mellan stegen, med en puls som löper nedåt */
.tidslinje__linje {
  position: absolute;
  left: 15px; top: 14px; bottom: 32px;
  width: 2px;
  background: var(--line);
  overflow: hidden;
  border-radius: 2px;
}
.process--ink .tidslinje__linje { background: rgba(255,255,255,.12); }

.tidslinje__puls {
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 90px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  animation: strom 5.5s linear infinite;
}
.process--ink .tidslinje__puls {
  background: linear-gradient(to bottom, transparent, var(--accent-lite), transparent);
}
@keyframes strom {
  from { transform: translateY(-100px); }
  to   { transform: translateY(calc(100% + 1400px)); }
}

.steg { position: relative; padding: 0 0 30px; }
.steg:last-child { padding-bottom: 0; }

/* Markören på linjen. Fylls när steget kommit in i vy. */
.steg__markor {
  position: absolute;
  left: -46px; top: 6px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow .5s var(--ease), background .5s var(--ease);
}
.process--ink .steg__markor { background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.section--alt .steg__markor { background: var(--bg-alt); }

.steg__markor span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.process--ink .steg__markor span { background: rgba(255,255,255,.28); }

.steg.is-visible .steg__markor {
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.process--ink .steg.is-visible .steg__markor {
  box-shadow: inset 0 0 0 1px rgba(126,160,255,.4);
}
.steg.is-visible .steg__markor span {
  background: var(--accent);
  transform: scale(1.25);
  box-shadow: 0 0 0 5px var(--accent-wash);
}
.process--ink .steg.is-visible .steg__markor span {
  background: var(--accent-lite);
  box-shadow: 0 0 0 5px rgba(126,160,255,.14);
}

.steg__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.steg__nr {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--accent-ink);
}
.process--ink .steg__nr { color: var(--accent-lite); }

.steg__topp h3 { margin: 0; font-size: 1.14rem; }
.process--ink .steg__topp h3 { color: #fff; }

.steg__tid {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(26,24,18,.055);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.process--ink .steg__tid {
  color: var(--on-ink-muted);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.steg p { margin: 0; max-width: 64ch; font-size: .97rem; }
.process--ink .steg p { color: var(--on-ink-soft); }

/* Det mörka processblocket */
.process--ink {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}
.process--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 400px at 88% 0%, rgba(27,77,255,.18), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 36%);
}
.process--ink > .container { position: relative; z-index: 1; }
.process--ink h2, .process--ink .section-head h2 { color: #fff; }
.process--ink .eyebrow { color: var(--accent-lite); }
.process--ink .lead { color: var(--on-ink-soft); }

/* ---------- Datablad ---------- */

.spec dl {
  margin: 0;
  border-top: 1px solid var(--line);
}
.spec__rad {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-base) var(--ease-short);
}
.spec__rad:hover { background: rgba(26,24,18,.03); }
.spec dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.spec dd {
  margin: 0;
  font-size: .97rem;
  color: var(--text);
}

/* ---------- Ministeg i kort och paneler ---------- */

.ministeg {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.ministeg li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: .88rem;
  color: var(--text-soft);
}
.ministeg li span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--accent-ink);
  flex: none;
}
.ministeg li em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
}
.ministeg--bred { display: grid; gap: 10px; }
.ministeg--panel { margin-top: 4px; padding-top: 0; border-top: 0; }

/* ---------- Tjänsterad på översiktssidan ---------- */

.tjanst {
  display: block;
  padding: 30px 32px;
  margin-bottom: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow-1);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.tjanst:last-of-type { margin-bottom: 0; }
.tjanst:hover {
  transform: translateY(-2px);
  box-shadow: var(--ring-strong), var(--shadow-2);
}

.tjanst__huvud {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.tjanst__huvud .card__icon { margin-bottom: 0; }
.tjanst__huvud h3 { margin-bottom: .35em; }
.tjanst__huvud p { margin: 0; font-size: .96rem; max-width: 62ch; }

.tjanst .ministeg {
  grid-template-columns: repeat(2, 1fr);
  gap: 9px 32px;
}
.tjanst .card__more { margin-top: 20px; }
.tjanst:hover .card__more .btn__arrow { transform: translateX(4px); }

.footer-col--bred ul { gap: 10px; }

/* ---------- Responsivt ---------- */

@media (max-width: 820px) {
  .spec__rad { grid-template-columns: 1fr; gap: 4px; }
  .tjanst .ministeg { grid-template-columns: 1fr; }
  .tjanst { padding: 26px 22px; }
  .tjanst__huvud { flex-direction: column; gap: 14px; }
}

@media (max-width: 560px) {
  .tidslinje { padding-left: 38px; }
  .steg__markor { left: -38px; width: 28px; height: 28px; }
  .tidslinje__linje { left: 13px; }
  .steg__topp h3 { font-size: 1.06rem; }
  .ministeg li em { margin-left: 0; padding-left: 0; width: 100%; }
  .ministeg li { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tidslinje__puls { animation: none !important; opacity: .4; }
  .steg__markor, .steg__markor span { transition: none !important; }
}

/* ==========================================================================
   17  Rörelse som ska märkas

   Skillnaden mot lager 12 och 16: de effekterna var subliminala. Dessa är
   avsedda att synas. Reglerna som håller dem från att bli stökiga:
   · Ingen effekt varar längre än 1,2 sekunder
   · Bara transform och opacitet animeras
   · Allt utlöses en gång, aldrig i loop, utom bakgrundsrörelsen
   ========================================================================== */

/* ---------- Rubriker som reser sig ord för ord ---------- */

.ord {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Utrymme för underhäng i g, j, å — annars klipps de av maskkanten */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.ord > span {
  display: inline-block;
  transform-origin: 0 100%;
  transition: transform .95s cubic-bezier(.16, 1, .3, 1),
              opacity .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--fd, 0ms);
}
/* Samma regel som för .reveal: orden döljs bara när skriptet lovat att tända
   dem igen. Utan attributet står rubriken läsbar från början. */
html[data-reveal] .ord > span {
  transform: translateY(105%) rotate(2.5deg);
  opacity: 0;
}
html[data-reveal] h1.ord-klar .ord > span,
html[data-reveal] h2.ord-klar .ord > span,
h1.ord-klar .ord > span,
h2.ord-klar .ord > span {
  transform: none;
  opacity: 1;
}

/* ---------- Sifferrullar i nyckeltalen ---------- */

.rulle {
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: top;
}
.rulle__kolumn {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(.22, 1, .28, 1);
  transition-delay: var(--kd, 0ms);
  will-change: transform;
}
.rulle__kolumn span {
  height: 1em;
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__suffix { margin-left: .18em; }

/* Suffix som står direkt efter siffran utan mellanslag i källtexten, till
   exempel plustecknet i "500+". Luften i regeln ovan är till för enheter som
   "h" och "%", där texten har ett hårt mellanslag. Här skulle den bryta isär
   talet. */
.stat__suffix--tatt { margin-left: 0; }

/* ---------- Ljus som löper runt kortets kant ---------- */

.kantljus {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-short);
  z-index: 2;
}
.card:hover .kantljus, .tjanst:hover .kantljus { opacity: 1; }

.kantljus::before {
  content: "";
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,77,255,.85), rgba(27,77,255,0) 62%);
  offset-path: rect(0 auto auto 0 round 12px);
  offset-distance: 0%;
  offset-anchor: 50% 50%;
  animation: runt 2.6s linear infinite;
  animation-play-state: paused;
}
.card:hover .kantljus::before, .tjanst:hover .kantljus::before {
  animation-play-state: running;
}
@keyframes runt { to { offset-distance: 100%; } }

/* Ljuset ska bara synas på kanten, inte inuti kortet */
.kantljus {
  mask: linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000, #000) content-box,
                linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  padding: 1.6px;
}

/* ---------- Magnetiska knappar ---------- */

.btn--magnet {
  transform: translate3d(var(--mgx, 0px), var(--mgy, 0px), 0);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              background var(--t-fast) var(--ease-short),
              box-shadow var(--t-base) var(--ease);
}
.btn--magnet:hover { transition-duration: .12s, .18s, .32s; }

/* ---------- Tidslinjen fylls med scrollen ---------- */

.tidslinje__fyll {
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent), var(--accent));
  transform-origin: 50% 0;
  transform: scaleY(var(--fyll, 0));
  /* Ingen transition: fyllningen ska följa handen exakt, inte halka efter.
     Vid stöd för scroll-driven animation tar sektion 18 över helt och
     var(--fyll) används inte. Skriptet skriver den bara som reservväg. */
}
.process--ink .tidslinje__fyll {
  background: linear-gradient(to bottom, var(--accent-lite), var(--accent-lite));
}

/* Markören får ett slag utåt när steget tänds */
.steg.is-visible .steg__markor { animation: slag .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes slag {
  0%   { transform: scale(.82); }
  55%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

.steg__markor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--accent-line);
  opacity: 0;
}
.steg.is-visible .steg__markor::after {
  animation: ringut 1s cubic-bezier(.16,1,.3,1) .1s both;
}
@keyframes ringut {
  0%   { box-shadow: 0 0 0 0 rgba(27,77,255,.5);  opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(27,77,255,0); opacity: 0; }
}
.process--ink .steg.is-visible .steg__markor::after {
  animation-name: ringut-morkt;
}
@keyframes ringut-morkt {
  0%   { box-shadow: 0 0 0 0 rgba(126,160,255,.55); opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(126,160,255,0); opacity: 0; }
}

/* Texten i steget glider in från vänster i takt med markören */
.steg .steg__inne {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.steg.is-visible .steg__inne { opacity: 1; transform: none; }

/* ---------- Stor mjuk ljuskägla i de mörka blocken ---------- */

.kagla {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s var(--ease-short);
  /* Samma sak som kortens kägla: fast lager som förskjuts, inte en
     gradientposition som ritas om. Se sektion 18. */
}
.cta:hover .kagla,
.process--ink:hover .kagla,
.site-footer:hover .kagla { opacity: 1; }

/* Sidfotens innehåll måste ligga över käglan */
.site-footer > .container { position: relative; z-index: 1; }

/* ---------- Sektionsrubriker markeras med en linje som växer ---------- */

.section-head .eyebrow::before { transition: width .8s cubic-bezier(.16,1,.3,1) .1s; }
html[data-reveal] .section-head.reveal .eyebrow::before { width: 0; }
html[data-reveal] .section-head.reveal.is-visible .eyebrow::before,
.section-head.reveal.is-visible .eyebrow::before { width: 22px; }

/* ---------- Kort som fälls upp när de kommer in i vy ---------- */

html[data-reveal] .card.reveal,
html[data-reveal] .step.reveal,
html[data-reveal] .value.reveal {
  transform: translateY(30px) scale(.97) rotateX(6deg);
  transform-origin: 50% 0;
}
html[data-reveal] .card.reveal.is-visible,
html[data-reveal] .step.reveal.is-visible,
html[data-reveal] .value.reveal.is-visible {
  transform: none;
}

/* ---------- Avstängt vid minskad rörelse ---------- */

@media (prefers-reduced-motion: reduce) {
  .ord > span { transform: none !important; opacity: 1 !important; transition: none !important; }
  .rulle__kolumn { transition: none !important; }
  .kantljus { display: none !important; }
  .btn--magnet { transform: none !important; }
  .tidslinje__fyll { transform: scaleY(1) !important; transition: none !important; }
  .steg.is-visible .steg__markor,
  .steg.is-visible .steg__markor::after { animation: none !important; }
  .steg .steg__inne { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kagla { display: none !important; }
  .card.reveal, .step.reveal, .value.reveal { transform: none !important; }
  .section-head.reveal .eyebrow::before { width: 22px !important; }
}

/* Ordmasken klipper varje ord i en egen låda, och en låda kan inte radbryta
   inuti sig. På riktigt smala skärmar kan ett enda långt ord därför bli bredare
   än skärmen. Där stängs masken av och rubriken faller tillbaka på vanlig
   radbrytning med avstavning. Rörelsen försvinner, texten går alltid att läsa. */
@media (max-width: 420px) {
  h1 .ord, h1 .ord > span,
  .cta h2 .ord, .cta h2 .ord > span {
    display: inline;
    overflow: visible;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Ingen kantljus eller magnetism på pekskärm — inget att följa */
@media (hover: none) {
  .kantljus { display: none; }
  .btn--magnet { transform: none !important; }
  .kagla { display: none; }
}


/* ==========================================================================
   18  Rörelse på kompositorn

   Allt i den här sektionen drivs av webbläsaren själv — antingen av en
   scroll-driven tidslinje (`animation-timeline`) eller av ett förskjutet
   lager. Huvudtråden är inte inblandad i någon bildruta.

   Bakgrunden: tidigare räknade skriptet ut varje rörelse i en rAF-slinga och
   skrev resultatet som custom properties. Det kostade ~15 ms per bildruta,
   vilket mättar en 60 Hz-tråd. Nu är samma rörelser uttryckta som CSS-
   animationer med scrollen som tidslinje. Skriptet behåller enbart en
   reservväg för webbläsare utan stöd, och den slås av när stöd finns.

   Uppbyggnaden är progressiv förbättring genomgående: sluttillståndet är
   standard, rörelsen läggs på ovanpå inuti
   `@supports (animation-timeline: view())`. Saknas stöd ser besökaren en
   färdig sida utan rörelse — aldrig en tom sida.

   Två villkor gäller överallt:
     - `@media (prefers-reduced-motion: no-preference)` — systeminställningen
     - `html:not([data-motion="off"])` — reglaget i sidfoten (WCAG 2.2.2)
   ========================================================================== */

/* ---------- 18.1  Läsindikatorn följer dokumentets scroll ---------- */

@keyframes yrd-las {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  html:not([data-motion="off"]) .progress {
    animation: yrd-las linear forwards;
    animation-timeline: scroll(root block);
  }
}

/* ---------- 18.2  Liggarrutnätet parallaxar mot sin egen sektion ----------

   Tidigare: `--ledger-y` skrevs på :root varje bildruta. En ärvd variabel på
   rotelementet invaliderar hela dokumentets stil, vilket är det dyraste man
   kan göra i en scroll-slinga.

   Nu: varje sektion är sin egen vytidslinje, så rutnätet driver i förhållande
   till sektionens passage genom fönstret. Det är dessutom mer korrekt
   parallax — driften blir densamma oavsett hur lång sidan är.
   `inset: -30% 0` ger redan överhäng nog för rörelsen.                      */

@keyframes yrd-liggardrift {
  from { transform: translate3d(0, -54px, 0); }
  to   { transform: translate3d(0,  54px, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="off"]) .section--grid::before {
      animation: yrd-liggardrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
  }
}

/* ---------- 18.3  Tidslinjen fylls med scrollen ----------

   `.tidslinje` blir en namngiven vytidslinje som fyllningen läser. Namnet
   löses upp mot närmaste förälder, så flera tidslinjer på samma sida får var
   sin — utan att skriptet behöver hålla reda på dem.

   Intervallet: fyllningen börjar när listan är en bit in i fönstret och är
   full när den är på väg ut. Det motsvarar den gamla JS-beräkningen
   (0 vid 70 % ned i fönstret, 1 när botten nått 30 %).                      */

.tidslinje { view-timeline-name: --yrd-tl; view-timeline-axis: block; }

@keyframes yrd-fyll {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="off"]) .tidslinje__fyll {
      animation: yrd-fyll linear both;
      animation-timeline: --yrd-tl;
      animation-range: entry 62% exit 38%;
      will-change: transform;
    }
  }
}

/* ---------- 18.4  Käglorna som förskjutna lager ----------

   En radial-gradient vars position ändras måste målas om över hela ytan.
   Ett lager med fast gradient som flyttas med transform hamnar däremot på
   kompositorn. Skriptet skriver numera pixlar, inte procent.

   Lagren är större än de behöver vara och centreras med negativ marginal, så
   att translate(0,0) betyder "kägla i elementets övre vänstra hörn". Både
   `.card` och `.cta` klipper redan sitt innehåll, så inget spiller ut.      */

.card::before {
  inset: auto auto auto 0;
  top: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(closest-side circle,
              var(--accent-wash) 0%, rgba(27, 77, 255, .05) 46%, transparent 72%);
  transform: translate3d(var(--mx), var(--my), 0);
}
.card:hover::before { will-change: transform; }

.kagla {
  --kx: 50%;
  --ky: 50%;
}
.kagla::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1040px;
  height: 1040px;
  margin: -520px 0 0 -520px;
  border-radius: 50%;
  background: radial-gradient(closest-side circle,
              rgba(126, 160, 255, .15) 0%, rgba(126, 160, 255, .06) 44%, transparent 70%);
  transform: translate3d(var(--kx), var(--ky), 0);
}
.cta:hover .kagla::before,
.process--ink:hover .kagla::before,
.site-footer:hover .kagla::before { will-change: transform; }

/* ---------- 18.5  Rörelsereglaget i sidfoten ----------

   WCAG 2.2.2 Pause, Stop, Hide: rörelse som startar av sig själv och pågår
   längre än fem sekunder måste gå att stänga av. Nätverksbakgrunden och
   bandet gör bägge det, så reglaget är ett krav — inte en artighet.

   Attributet sitter på <html> och sparas i localStorage. Både CSS och
   canvas-slingan läser det.                                                 */

/* Nedtonat med flit. Det här är ett tillgänglighetsreglage, inte en funktion
   att skylta med — det ska gå att hitta för den som behöver det och annars
   smälta in bland sidfotens finstilta. Samma storlek och ton som texten intill,
   ingen strömbrytargrafik. Träffytan är fortfarande 44 px hög. */
.motorreglage {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-ink-muted);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .22);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-short),
              text-decoration-color var(--t-fast) var(--ease-short);
}
.motorreglage:hover {
  color: var(--on-ink-soft);
  text-decoration-color: rgba(255, 255, 255, .5);
}
.motorreglage:focus-visible {
  outline: 2px solid var(--accent-lite);
  outline-offset: 3px;
  border-radius: 4px;
}



/* Rörelse av: samma sluttillstånd som vid minskad rörelse, inget hoppar */
html[data-motion="off"] .ord > span { transform: none !important; opacity: 1 !important; transition: none !important; }
html[data-motion="off"] .rulle__kolumn { transition: none !important; }
html[data-motion="off"] .kantljus,
html[data-motion="off"] .kagla { display: none !important; }
html[data-motion="off"] .btn--magnet { transform: none !important; }
html[data-motion="off"] .tidslinje__fyll { transform: scaleY(1) !important; }
html[data-motion="off"] .card.reveal,
html[data-motion="off"] .step.reveal,
html[data-motion="off"] .value.reveal { transform: none !important; }
html[data-motion="off"] .card,
html[data-motion="off"] .tjanst { transition: none !important; }
html[data-motion="off"] .ticker__spar { animation: none !important; transform: none !important; }
html[data-motion="off"] .steg.is-visible .steg__markor,
html[data-motion="off"] .steg.is-visible .steg__markor::after { animation: none !important; }
html[data-motion="off"] .steg .steg__inne { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .section-head.reveal .eyebrow::before { width: 22px !important; }
html[data-motion="off"] { scroll-behavior: auto; }

/* Reglaget syns bara när skriptet kopplat in det */
.motorreglage[hidden] { display: none; }


/* ---------- 18.6  Oändlig rörelse som reglaget måste kunna stänga ----------

   WCAG 2.2.2 gäller all rörelse som startar av sig själv och pågår längre än
   fem sekunder. Utöver nätverksbakgrunden och bandet finns tre sådana:
   pulserna som faller genom heroblocket, pulsen som löper genom flödeslinjen
   och strömmen längs tidslinjen. De stängs av här — och göms, eftersom en
   stillastående puls mitt i luften bara ser ut som ett fel.               */

html[data-motion="off"] .pulse,
html[data-motion="off"] .flode__puls,
html[data-motion="off"] .tidslinje__puls {
  animation: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pulse,
  .flode__puls,
  .tidslinje__puls { animation: none !important; display: none !important; }
}


/* ==========================================================================
   19  Vyövergångar mellan sidor

   Cross-document view transitions: webbläsaren tar en bild av sidan man
   lämnar, en av sidan man kommer till, och tonar mellan dem. Sidhuvudet,
   logotypen och läsindikatorn får namn och ligger därför still medan
   innehållet byts — sajten känns som en app istället för elva separata
   dokument.

   Inget JavaScript. Webbläsare utan stöd laddar om som vanligt.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Delade element mellan sidor. Namnen måste vara unika per sida — därav bara
   de element som faktiskt finns exakt en gång. */
.site-header { view-transition-name: yrd-huvud; }
/* Bara sidhuvudets logotyp. `.logo` finns två gånger per sida — en i
   huvudet och en i sidfoten — och två element med samma namn är ogiltigt:
   Chrome loggade "Unexpected duplicate view-transition-name: yrd-logo" vid
   varje sidbyte och hoppade över hela övergången. */
.site-header .logo { view-transition-name: yrd-logo; }
main         { view-transition-name: yrd-innehall; }
/* Läsindikatorn får medvetet inget namn — den ligger i rotbilden, och en 2 px
   remsa som tonar över märks inte. Ett eget namn hade krävt egna regler för
   både gammal och ny bild utan att synas. */

/* Sidhuvudet ska inte tona, bara stå still */
::view-transition-old(yrd-huvud),
::view-transition-new(yrd-huvud),
::view-transition-old(yrd-logo),
::view-transition-new(yrd-logo) { animation: none; mix-blend-mode: normal; }

/* Innehållet: den gamla sidan tonar ut, den nya svepas in underifrån med en
   clip-path. clip-path går på kompositorn, så svepet kostar ingenting. */
@keyframes yrd-ut {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes yrd-in {
  from { opacity: 0; clip-path: inset(24% 0 0 0); transform: translateY(14px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   transform: translateY(0); }
}

::view-transition-old(yrd-innehall) {
  animation: yrd-ut .22s cubic-bezier(.2, 0, 0, 1) both;
}
::view-transition-new(yrd-innehall) {
  animation: yrd-in .42s cubic-bezier(.16, 1, .3, 1) both;
}

/* Rörelsereglaget kan inte stänga av en at-regel, så övergången kortas i
   stället till noll. Attributet sätts av ett litet inline-skript i <head>
   innan första ritningen, så det gäller redan när övergången startar. */
html[data-motion="off"]::view-transition-group(*),
html[data-motion="off"]::view-transition-old(*),
html[data-motion="off"]::view-transition-new(*) {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
}


/* ==========================================================================
   20  Ordtändning

   Ett påstående per sida tänds ord för ord när det skrollas förbi. Två
   kopior av texten ligger ovanpå varandra: den undre i vanlig textfärg, den
   övre i accentfärg och klippt med clip-path. Klippet öppnas av scrollen.

   Varför två kopior och clip-path i stället för en animerad gradient:
   en gradient som flyttas målas om varje bildruta, medan clip-path
   kompositeras. Effekten är densamma, kostnaden är noll.

   Orden delas i byggskriptet, inte av JavaScript — texten står färdig i
   HTML:en och är läsbar även om ingenting laddas.
   ========================================================================== */

.tand {
  position: relative;
  display: block;
}

.tand__ord {
  position: relative;
  display: inline-block;
  white-space: pre;
}

/* Den tända kopian ligger exakt över originalet */
.tand__ljus {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.on-ink .tand__ljus,
.cta .tand__ljus,
.process--ink .tand__ljus { color: var(--accent-lite); }

@keyframes yrd-tandning {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="off"]) .tand { view-timeline-name: --yrd-tand; }
    html:not([data-motion="off"]) .tand__ljus {
      animation-name: yrd-tandning;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --yrd-tand;
      /* animation-range sätts per ord i HTML:en så orden tänds i följd.
         Longhands här — kortformen animation nollställer animation-range. */
    }
  }
}

/* Utan stöd, med minskad rörelse eller med rörelsen av: hela satsen tänd.
   Sluttillståndet är det som ska synas, aldrig ett tomt fält. */
@supports not (animation-timeline: view()) {
  .tand__ljus { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tand__ljus { clip-path: inset(0 0 0 0); }
}
html[data-motion="off"] .tand__ljus { clip-path: inset(0 0 0 0); }



/* Bandet med diagrammet.

   Diagrammet har egen luft i sin viewBox, så sektionen behöver inte lika
   mycket botten som en textsektion. Hårfin linje mot nyckeltalen ovanför —
   bägge banden är mörka, och utan linjen läser tonskillnaden som ett fel
   snarare än som en avdelning. */
.navband {
  padding-bottom: clamp(24px, 3vw, 46px);
  border-top: 1px solid var(--ink-line);
}
.navband .section-head { margin-bottom: 34px; }
.navband .section-head p { color: var(--on-ink-soft); }

/* == 21 ==================================================================
   (Komponenten nedan är byggd fristående och klistrad in oförändrad.)
   ====================================================================== */

/* ==========================================================================
   Navdiagram — en kontaktväg in, hela verksamheten ut

   Ett självritande SVG-diagram för ett mörkt band. Sex områdesnoder i en
   cirkel runt en mittnod; linjerna ritar sig utåt när blocket skrollas in,
   noderna tonar in när linjen når fram, sedan vandrar pulser utåt i loop.

   Tre saker att veta innan du rör den:
   · Sluttillståndet är standard. Animationen läggs på ovanpå, inuti
     @supports + @media. Utan stöd, med reducerad rörelse eller med
     html[data-motion="off"] står diagrammet färdigritat och stilla.
   · Bara transform, opacity, stroke-dashoffset och offset-distance rör sig.
     Ingen layoutegenskap, inget filter, ingen gradientposition.
   · Pulsernas paus styrs av en registrerad egenskap på roten som läses med
     en style-container-fråga. animation-play-state kan inte läsa animerade
     var() — animationsegenskaper beräknas före animationerna appliceras.
   ========================================================================== */

/* ---------- Registrerade egenskaper. inherits: false är inte kosmetiskt:
   ärvda registrerade egenskaper invaliderar hela subträdets stil per ruta. */

@property --nd-grind {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---------- Förutsättning: ingen skrollbehållare mellan roten och
   diagrammet ----------
   overflow: hidden gör ett element till skrollbehållare. Då blir det
   view()-tidslinjens skrollport i stället för sidan, och eftersom det
   elementet inte skrollar fastnar hela förloppet på ett fast värde.
   overflow: clip klipper exakt likadant men skapar ingen behållare. */

section:has(.nav-diagram),
div:has(> .nav-diagram) {
  overflow: clip;
}

/* ---------- Rot ---------- */

.nav-diagram {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;

  /* Tidslinjen som allt hänger på, plus behållaren som grindar pulserna */
  view-timeline-name: --nd-vy;
  view-timeline-axis: block;
  container-name: nd-diagram;
  container-type: normal;
}

.nav-diagram__vy {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Två uppställningar, en synlig i taget. Den dolda är borta ur
   tillgänglighetsträdet eftersom display: none tar den ur trädet. */
.nav-diagram__vy--smal { display: none; }

/* ---------- Stödring och linjer ---------- */

.nav-diagram__ring {
  fill: none;
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 1;
}

.nav-diagram__linje {
  fill: none;
  stroke: var(--accent-lite);
  stroke-opacity: .42;
  stroke-width: 1;
  stroke-linecap: round;

  /* pathLength="1" i markupen gör banlängden till 1 användarenhet, så
     dasharray och dashoffset blir enhetslösa andelar av linjen. */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;   /* sluttillstånd: färdigritad */
}

/* I den smala vyn svänger linjerna in i noden — runt hörn läser bättre. */
.nav-diagram__vy--smal .nav-diagram__linje { stroke-linejoin: round; }

/* ---------- Mittnoden ---------- */

.nav-diagram__mitt-yta {
  fill: rgba(255, 255, 255, .035);
}
.nav-diagram__mitt-ring {
  fill: none;
  stroke: var(--accent-lite);
  stroke-opacity: .3;
  stroke-width: 1;
}
.nav-diagram__mitt-over,
.nav-diagram__mitt-text {
  font-family: var(--mono);
  font-weight: 500;
}
.nav-diagram__mitt-over {
  font-size: 11px;
  letter-spacing: .22em;
  fill: var(--on-ink-muted);
}
.nav-diagram__mitt-text {
  font-size: 14px;
  letter-spacing: .04em;
  fill: #fff;
}
/* Mittnoden är mindre i den smala vyn — egna mått, samma språk. */
.nav-diagram__vy--smal .nav-diagram__mitt-over { font-size: 9.5px; letter-spacing: .2em; }
.nav-diagram__vy--smal .nav-diagram__mitt-text { font-size: 11.5px; }

/* ---------- Områdesnoder ---------- */

.nav-diagram__markor {
  fill: var(--ink);
  stroke: var(--accent-lite);
  stroke-opacity: .6;
  stroke-width: 1.2;
}
.nav-diagram__karna {
  fill: var(--accent-lite);
}

.nav-diagram__etikett {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -.012em;
  fill: var(--on-ink);
}
.nav-diagram__nr {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  fill: var(--accent-lite);
}

/* ---------- Pulser ----------
   Banan är samma som linjens d-attribut. Pulsen är en cirkel i origo som
   flyttas av offset-path; transform-box: fill-box gör att banans koordinater
   läses i användarenheter och att cirkelns egen mittpunkt hamnar på banan. */

/* Glöden är en radial gradient i fyllningen, inte ett filter. Den flyttas
   med elementet — gradientens egna stopp rör sig aldrig. */
.nav-diagram__stop-1 { stop-color: var(--accent-lite); stop-opacity: .95; }
.nav-diagram__stop-2 { stop-color: var(--accent-lite); stop-opacity: .58; }
.nav-diagram__stop-3 { stop-color: var(--accent-lite); stop-opacity: 0; }

.nav-diagram__puls {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;             /* sluttillstånd utan rörelse: ingen puls syns */
}

.nav-diagram__vy--bred .nav-diagram__puls--1 { offset-path: path("M 385.52 205 L 298.92 155"); }
.nav-diagram__vy--bred .nav-diagram__puls--2 { offset-path: path("M 460 162 L 460 62"); }
.nav-diagram__vy--bred .nav-diagram__puls--3 { offset-path: path("M 534.48 205 L 621.08 155"); }
.nav-diagram__vy--bred .nav-diagram__puls--4 { offset-path: path("M 534.48 291 L 621.08 341"); }
.nav-diagram__vy--bred .nav-diagram__puls--5 { offset-path: path("M 460 334 L 460 434"); }
.nav-diagram__vy--bred .nav-diagram__puls--6 { offset-path: path("M 385.52 291 L 298.92 341"); }

.nav-diagram__vy--smal .nav-diagram__puls--1 { offset-path: path("M 46 102.95 L 46 152 Q 46 160 54 160 L 58 160"); }
.nav-diagram__vy--smal .nav-diagram__puls--2 { offset-path: path("M 40 101.25 L 40 226 Q 40 234 48 234 L 58 234"); }
.nav-diagram__vy--smal .nav-diagram__puls--3 { offset-path: path("M 34 98.66 L 34 300 Q 34 308 42 308 L 58 308"); }
.nav-diagram__vy--smal .nav-diagram__puls--4 { offset-path: path("M 28 94.99 L 28 374 Q 28 382 36 382 L 58 382"); }
.nav-diagram__vy--smal .nav-diagram__puls--5 { offset-path: path("M 22 89.88 L 22 448 Q 22 456 30 456 L 58 456"); }
.nav-diagram__vy--smal .nav-diagram__puls--6 { offset-path: path("M 16 82.53 L 16 522 Q 16 530 24 530 L 58 530"); }

/* ---------- Responsivt ----------
   Under 640 px får en cirkel med sex etiketter inte plats. Då byter vi till
   en egen SVG med eget viewBox: mitten till vänster, etiketterna i en
   kolumn. Inget skalas ner till oläsligt, inget klipps. */

@media (max-width: 640px) {
  /* Taket hindrar att etiketterna blir orimligt stora på breda telefoner —
     hela SVG:n skalar, text som allt annat. */
  .nav-diagram { max-width: 360px; }
  .nav-diagram__vy--bred { display: none; }
  .nav-diagram__vy--smal { display: block; }
}

@media (min-width: 641px) and (max-width: 900px) {
  /* Etiketterna skulle bli små vid ren nedskalning — höj dem lite igen. */
  .nav-diagram__etikett { font-size: 19px; }
  .nav-diagram__nr { font-size: 12.5px; }
}

/* ==========================================================================
   Rörelsen — progressiv förbättring, aldrig en förutsättning

   Allt nedan är ett tillägg. Faller @supports bort (Safari i dag), eller
   ber användaren om mindre rörelse, eller står rörelsereglaget på av, så
   gäller reglerna ovan och diagrammet är färdigritat och stilla.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---------- Grinden ----------
       En registrerad egenskap på roten som slår om till exakt 1 när linjerna
       är ritade och tillbaka till 0 när diagrammet lämnar vyn. Pulserna läser
       den med en style-container-fråga. Omslagen ligger i de yttersta
       procenten av intervallet: däremellan är värdet oförändrat 1, så det
       kostar inga omräkningar mitt i skrollen. */

    html:not([data-motion="off"]) .nav-diagram {
      animation: nd-grind 1ms linear forwards;
      animation-timeline: --nd-vy;
      animation-range: entry 88% exit 15%;
    }

    /* ---------- Linjerna ritar sig utåt, en efter en ---------- */

    html:not([data-motion="off"]) .nav-diagram__linje {
      stroke-dashoffset: 1;
      animation: nd-rita 1ms linear forwards;
      animation-timeline: --nd-vy;
    }
    html:not([data-motion="off"]) .nav-diagram__linje--1 { animation-range: entry 14% entry 46%; }
    html:not([data-motion="off"]) .nav-diagram__linje--2 { animation-range: entry 23% entry 55%; }
    html:not([data-motion="off"]) .nav-diagram__linje--3 { animation-range: entry 32% entry 64%; }
    html:not([data-motion="off"]) .nav-diagram__linje--4 { animation-range: entry 41% entry 73%; }
    html:not([data-motion="off"]) .nav-diagram__linje--5 { animation-range: entry 50% entry 82%; }
    html:not([data-motion="off"]) .nav-diagram__linje--6 { animation-range: entry 59% entry 91%; }

    /* ---------- Ringen och mittnoden går först ---------- */

    html:not([data-motion="off"]) .nav-diagram__ring {
      opacity: 0;
      animation: nd-tona 1ms linear forwards;
      animation-timeline: --nd-vy;
      animation-range: entry 8% entry 32%;
    }

    html:not([data-motion="off"]) .nav-diagram__mitt {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: 50% 50%;
      animation: nd-mitt-in 1ms linear forwards;
      animation-timeline: --nd-vy;
      animation-range: entry 4% entry 26%;
    }

    /* ---------- Noderna tonar och skalar in när linjen når fram ---------- */

    html:not([data-motion="off"]) .nav-diagram__nod {
      opacity: 0;
      animation: nd-tona 1ms linear forwards;
      animation-timeline: --nd-vy;
    }
    html:not([data-motion="off"]) .nav-diagram__nod--1 { animation-range: entry 38% entry 52%; }
    html:not([data-motion="off"]) .nav-diagram__nod--2 { animation-range: entry 47% entry 61%; }
    html:not([data-motion="off"]) .nav-diagram__nod--3 { animation-range: entry 56% entry 70%; }
    html:not([data-motion="off"]) .nav-diagram__nod--4 { animation-range: entry 65% entry 79%; }
    html:not([data-motion="off"]) .nav-diagram__nod--5 { animation-range: entry 74% entry 88%; }
    html:not([data-motion="off"]) .nav-diagram__nod--6 { animation-range: entry 83% entry 97%; }

    html:not([data-motion="off"]) .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__karna {
      transform-box: fill-box;
      transform-origin: 50% 50%;
      animation: nd-poppa 1ms var(--ease-short, ease-out) forwards;
      animation-timeline: --nd-vy;
    }
    html:not([data-motion="off"]) .nav-diagram__nod--1 .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__nod--1 .nav-diagram__karna { animation-range: entry 38% entry 54%; }
    html:not([data-motion="off"]) .nav-diagram__nod--2 .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__nod--2 .nav-diagram__karna { animation-range: entry 47% entry 63%; }
    html:not([data-motion="off"]) .nav-diagram__nod--3 .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__nod--3 .nav-diagram__karna { animation-range: entry 56% entry 72%; }
    html:not([data-motion="off"]) .nav-diagram__nod--4 .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__nod--4 .nav-diagram__karna { animation-range: entry 65% entry 81%; }
    html:not([data-motion="off"]) .nav-diagram__nod--5 .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__nod--5 .nav-diagram__karna { animation-range: entry 74% entry 90%; }
    html:not([data-motion="off"]) .nav-diagram__nod--6 .nav-diagram__markor,
    html:not([data-motion="off"]) .nav-diagram__nod--6 .nav-diagram__karna { animation-range: entry 83% entry 99%; }

    /* ---------- Pulserna ----------
       Egen tidslinje (klocktid, oändlig loop), men pausade tills grinden
       öppnar. Egen längd och fördröjning per linje så de aldrig går i takt.
       Fördröjningarna är positiva: en pausad animation med positiv
       fördröjning står kvar på 0 % — mitt i mittnoden, med opacitet 0. */

    html:not([data-motion="off"]) .nav-diagram__puls {
      animation-name: nd-puls;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-fill-mode: backwards;
      animation-play-state: paused;
    }
    html:not([data-motion="off"]) .nav-diagram__puls--1 { animation-duration: 3.4s; animation-delay: 0.2s; }
    html:not([data-motion="off"]) .nav-diagram__puls--2 { animation-duration: 4.1s; animation-delay: 1.1s; }
    html:not([data-motion="off"]) .nav-diagram__puls--3 { animation-duration: 3.7s; animation-delay: 0.55s; }
    html:not([data-motion="off"]) .nav-diagram__puls--4 { animation-duration: 4.4s; animation-delay: 1.7s; }
    html:not([data-motion="off"]) .nav-diagram__puls--5 { animation-duration: 3.2s; animation-delay: 2.3s; }
    html:not([data-motion="off"]) .nav-diagram__puls--6 { animation-duration: 3.9s; animation-delay: 0.85s; }

    @container nd-diagram style(--nd-grind: 1) {
      html:not([data-motion="off"]) .nav-diagram__puls {
        animation-play-state: running;
      }
    }

    /* ---------- Nycklar ---------- */

    @keyframes nd-grind {
      0%   { --nd-grind: 0; }
      3%   { --nd-grind: 1; }
      97%  { --nd-grind: 1; }
      100% { --nd-grind: 0; }
    }

    @keyframes nd-rita {
      from { stroke-dashoffset: 1; }
      to   { stroke-dashoffset: 0; }
    }

    @keyframes nd-tona {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes nd-mitt-in {
      from { opacity: 0; transform: scale(.86); }
      to   { opacity: 1; transform: scale(1); }
    }

    @keyframes nd-poppa {
      from { transform: scale(.3); }
      to   { transform: scale(1); }
    }

    @keyframes nd-puls {
      0%   { offset-distance: 0%;   opacity: 0; }
      14%  {                        opacity: 1; }
      82%  {                        opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }
  }
}


/* ==========================================================================
   22  Radbrytning

   Tre saker som gör att text ser slarvig ut, och hur de åtgärdas här.

   1. En rubrik som slutar med ett ensamt ord på sista raden. Ser ut som ett
      misstag även för den som inte kan sätta text. `text-wrap: balance` låter
      webbläsaren fördela raderna jämnt i stället för att fylla varje rad
      maximalt. Gäller bara upp till några rader, vilket är precis vad rubriker
      är.

   2. Ett ensamt ord sist i ett stycke. `text-wrap: pretty` flyttar ett ord
      ned från näst sista raden för att undvika det.

   3. Uttryck som aldrig får delas: "24 h", "100 %", organisationsnummer,
      e-postadressen, tidsangivelser som "1–2 veckor". Bryts de mitt itu
      läser de som två saker i stället för en. Hårda mellanslag i texten,
      plus `nowrap` på de fält där det gäller hela värdet.
   ========================================================================== */

/* ---------- Rubriker: jämnt fördelade rader ---------- */

h1, h2, h3, h4,
.stat__rubrik,
.eyebrow { text-wrap: balance; }

/* ---------- Löptext: inget ensamt slutord ---------- */

p, li,
.lead,
.fin,
.steg__text,
.card p,
.spec__vard,
.faq__a p,
.tand { text-wrap: pretty; }

/* ---------- Värden som aldrig får delas ---------- */

.contact-item__value,
.spec__namn,
.steg__tid,
.stat__tal,
.ministeg span,
.crumb { white-space: nowrap; }

/* Databladets värdekolumn måste kunna radbryta — den innehåller hela
   meningar — men inte mitt i ett organisationsnummer eller en adress. */
.spec__vard { overflow-wrap: break-word; }

/* Sidfotens nedre rad: bolagsnamn, org.nr och ort ska hålla ihop parvis.
   Hårda mellanslag sköter det i texten; här hindras bara att raden blir
   trängd på små skärmar. */
.footer-bottom > span:first-child { max-width: 62ch; }

/* ---------- Rubriker på smala skärmar ----------

   Under 640 px är raderna så korta att `balance` kan ge en rubrik med två
   ord på första raden och sex på andra. Där är vanlig fyllning bättre. */
@media (max-width: 640px) {
  h1, h2 { text-wrap: pretty; }
}

/* ---------- Reserv för webbläsare utan text-wrap ----------

   Safari fick `balance` sent och `pretty` ännu senare. Utan stöd blir det
   vanlig radfyllning, vilket är exakt hur sajten såg ut innan. Inget går
   sönder — det här avsnittet är enbart förbättring. */


/* ==========================================================================
   23  Heroblockets entré

   Innehållet högst upp på varje sida får INTE vara beroende av JavaScript.

   Bakgrund, och det här är värt att komma ihåg: heroblocket var först byggt med
   samma `.reveal` som resten av sidan, alltså dolt i CSS och synliggjort av en
   IntersectionObserver. På den publicerade sajten visade det sig att observern
   ibland aldrig anropades — webbläsaren höll uppe sidans ritning en stund efter
   inladdning, och observer-anrop levereras som en del av ritningen. Resultatet
   var ett heroblock som stod tomt. Rubriken, ledtexten och knapparna syntes
   inte alls.

   Lösningen är att inte fråga JavaScript om lov. Det här är en vanlig
   tidsbaserad CSS-animation med `both` som fyllnadsläge: den slutar i synligt
   läge, och även om ritningen hålls uppe en stund är animationen förbi sin
   sluttid när den släpps och innehållet står där det ska.

   Resten av sidan behåller scroll-avslöjningen. Där är den rätt verktyg —
   innehållet ligger under sidbrytet, och ett säkerhetsnät i main.js släpper
   fram allt efter två sekunder om observern skulle svika.
   ========================================================================== */

@keyframes yrd-hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero-in {
  animation: yrd-hero-in .85s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--hd, 0s);
}

/* Utan rörelse: stå still och synligt. Inte dolt — synligt. */
@media (prefers-reduced-motion: reduce) {
  .hero-in { animation: none; }
}
html[data-motion="off"] .hero-in { animation: none; }

/* ==========================================================================
   24  Kvitto efter skickad förfrågan
   ==========================================================================

   Ersätter formuläret när förfrågan gått iväg. Tidigare stod en rad grön text
   under Skicka-knappen, och den som just tryckt tittar på knappen — inte under
   den. Nu byts hela formuläret ut, vilket är den enda förändring som är
   omöjlig att missa.

   `hidden` på elementet räcker inte som dolt läge här: `display:flex` nedan
   skulle annars vinna över webbläsarens `display:none` för hidden-attributet,
   och rutan syntes hela tiden. Därför den uttryckliga regeln först. */

.kvitto[hidden] { display: none; }

/* Samma fälla på formuläret: `.form` sätter display:grid, vilket vinner över
   webbläsarens display:none för hidden-attributet. Utan den här raden låg
   formuläret kvar under kvittot efter att förfrågan skickats. */
.form[hidden] { display: none; }

.kvitto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-2);
  animation: yrd-kvitto-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

.kvitto:focus { outline: none; }
.kvitto:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes yrd-kvitto-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Bocken. Grön, inte blå: blått är sajtens vanliga accentfärg och säger
   ingenting särskilt, grönt läser som "klart" utan att man behöver texten. */
.kvitto__ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(13, 107, 72, .10);
  color: #0d6b48;
  margin-bottom: 20px;
}

.kvitto__rubrik {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: -.025em;
  margin: 0 0 10px;
}

.kvitto__lead {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin: 0 0 22px;
  max-width: 46ch;
}

.kvitto__steg {
  list-style: none;
  counter-reset: kvitto;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 52ch;
}

.kvitto__steg li {
  counter-increment: kvitto;
  position: relative;
  padding-left: 38px;
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.kvitto__steg li::before {
  content: counter(kvitto, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--accent);
}

.kvitto__steg strong { color: var(--text); font-weight: 600; }

.kvitto__fin {
  font-size: .88rem;
  color: var(--text-muted);
  margin: 0 0 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .kvitto { animation: none; }
}


/* Rubrik som bara finns för strukturen. Skärmläsare läser den, ögat ser den
   inte. `display:none` duger inte — då försvinner den ur uppläsningen också.
   Elementet krymps i stället till en pixel och klipps bort. */
.endast-uppläst {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}