/* ==========================================================
   BETTERMINDS.AI — one-scroll "ingeniør-notesbog"
   Én konstant papirbaggrund. Scener skubber hinanden væk,
   og artefakter driver i parallax, mens man scroller.
   ========================================================== */

:root {
  --paper: #f5f1e8;
  --paper-deep: #ece6d8;
  --ink: #16130c;
  --ink-soft: #4a463c;
  --ultra: #2400ff;        /* signalfarve i typografi og UI */
  --ultra-soft: #9d8bff;   /* accent på mørk baggrund (footer) */

  /* Feltets skala: den organiske ende er dyb indigo, den kunstige
     ende er pink. Mærket, glyfferne og forløbslinjen bruger de samme
     to yderpunkter, så baggrund og UI taler samme sprog. */
  --organic: #2c2196;
  --synth: #e06cbe;
  --synth-soft: #f091d4;   /* pink der bærer på mørk baggrund */
  --line: rgba(22, 19, 12, 0.16);

  /* Roboto Condensed Light (300) er sitets grundvægt. Fremhævninger,
     der før var blå kursiv, er nu samme font i Bold (700) og i blæk. */
  --font-sans: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --w-light: 300;
  --w-bold: 700;

  /* ÉT grid for hele sitet: samme gutter og samme målebredde overalt.
     Ingen sektion må have sin egen max-width. */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 84rem;
  --pad-x: var(--gutter);   /* bagudkompatibelt alias */
  --nav-h: 4.25rem;

  /* fælles bevægelseskurver */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1.06, 0.32, 1);

  /* tre radier, tre stregtykkelser — ikke flere */
  --r-sm: 4px;
  --r-md: 12px;
  --r-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* alle ankermål stopper under den faste nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 2rem); }

/* fælles container — den eneste måde indhold får sin bredde på */
.wrap {
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Én typeskala for overskrifter. Vægten er lys som resten af sitet —
   den eneste fede tekst er de fremhævninger, der før var blå kursiv. */
h1, h2, h3, h4, h5, h6 { font-weight: var(--w-light); }
h1, h2 { line-height: 1.05; }
h3, h4 { line-height: 1.2; }

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--ultra); color: var(--paper); }

body.nav-open { overflow: hidden; }

/* kun for skærmlæsere */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* spring til indhold — første tabstop på siden */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }
main:focus { outline: none; }

/* ét synligt fokus-udtryk på hele sitet */
:where(a, button, [tabindex]):focus-visible {
  outline: 2.5px solid var(--ultra);
  outline-offset: 4px;
  border-radius: 4px;
}
.footer :where(a, button):focus-visible { outline-color: var(--ultra-soft); }

.mono   { font-family: var(--font-mono); }
/* fremhævet display-tekst: samme font, fed, ingen kursiv, ingen farve */
.serif {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--w-bold);
}
.accent { color: var(--ultra); }
.accent-soft { color: var(--ultra-soft); }

/* blinkende cursor */
.cursor {
  display: inline-block;
  width: 0.34em; height: 0.82em;
  background: var(--ultra);
  vertical-align: baseline;
  margin-left: 0.14em;
  animation: blink 1.05s steps(1) infinite;
}
.cursor--light { background: var(--ultra-soft); }
/* på 99 px display-type ville en terminal-blok blive en kæmpe klods —
   dér skal markøren være en tynd caret */
.hero-statement .cursor { width: 0.075em; margin-left: 0.1em; }
@keyframes blink { 50% { opacity: 0; } }

.section-label {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ultra);
  margin-bottom: 2rem;
}

/* Det neurale felt — biologiske og kunstige neuroner, der vokser med scroll.
   "Lysningen" (det bløde hul, hvor typografien står) er en CSS-maske og
   ikke et destination-out-fyld: den koster kompositoren nul pr. frame,
   hvor et fuldskærmsfyld i canvas kostede ~8 ms. */
.scroll-canvas {
  --clear-w: 45%;
  --clear-h: 30%;
  --clear-x: 50%;
  --clear-y: 50%;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(
    ellipse var(--clear-w) var(--clear-h) at var(--clear-x) var(--clear-y),
    rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 46%,
    rgba(0, 0, 0, 0.62) 78%, #000 100%);
  mask-image: radial-gradient(
    ellipse var(--clear-w) var(--clear-h) at var(--clear-x) var(--clear-y),
    rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 46%,
    rgba(0, 0, 0, 0.62) 78%, #000 100%);
}

/* tynd forløbslinje i toppen — viser hvor langt man er */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--organic), var(--synth));
}

/* Fælles reveal-animation (cases, logoer, underside).
   Alt der starter skjult er scopet til html.js, så indholdet står
   fuldt læsbart hvis JavaScript fejler eller blokeres. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  html.js .reveal.visible { opacity: 1; transform: translateY(0); }
}

/* kvadreret notesbogs-baggrund — driver langsomt med scroll */
.grid-bg {
  position: absolute;
  inset: -80px 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: 0 var(--grid-shift, 0px);
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 45%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 82% at 50% 45%, black 30%, transparent 100%);
  opacity: 0.26;
  pointer-events: none;
}

/* ==========================================================
   NAV
   ========================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  /* samme venstrekant som alt andet indhold, også på brede skærme */
  padding: 1.25rem max(var(--gutter), (100% - var(--measure)) / 2);
  background: rgba(245, 241, 232, 0.86);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: padding 0.4s var(--ease-out), background-color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* når man scroller bliver baren tættere, så scener kan glide rent ind under den */
.nav--scrolled {
  padding-block: 0.85rem;
  background: rgba(245, 241, 232, 0.97);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(22, 19, 12, 0.55);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: opacity 0.3s var(--ease-out);
}
.nav__logo img {
  display: block;
  height: 30px;
  width: auto;
}

.nav__links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}
.nav__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: var(--w-light);
  position: relative;
}
.nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 2px;
  background: var(--ultra);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}


/* blæk-fyld der stiger op nedefra ved hover */
.nav__cta {
  /* En pille må aldrig brække til to linjer: gør den det, vokser hele
     topbaren fra 75 til 100 px, og knappen kommer til at fylde halvdelen
     af en telefonskærm. */
  white-space: nowrap;
  /* Disse fire arvede den fra ".nav__links a", da knappen stod i menuen.
     Uden menuen stod den med browserens standard-understregning, så de
     hører nu på knappen selv — og gælder, uanset om menuen er der. */
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: var(--w-light);
  position: relative;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  color: var(--paper) !important;
  background-color: var(--ink);
  background-image: linear-gradient(var(--ultra), var(--ultra));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 0%;
  transition: background-size 0.42s var(--ease-out),
              transform 0.35s var(--ease-spring),
              box-shadow 0.35s var(--ease-out);
}
.nav__cta:active { transform: translateY(0); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

/* ==========================================================
   SCENE-SYSTEM — hver scene pinnes og skubbes væk af den næste
   ========================================================== */
/* Skal en scene fade og sløre, når den forlades? På desktop skubber
   scenerne hinanden væk, og udgangen er en del af den bevægelse. På
   smalle skærme sidder man derimod og LÆSER teksten, mens den fader —
   målt: opacitet 0,70 og 1,25 px slør på "Sådan gør vi", mens den stadig
   stod på skærmen. JS læser tallet én gang pr. måling, så CSS'en alene
   afgør hvornår. */
:root { --scene-exit: 1; }
@media (max-width: 900px) { :root { --scene-exit: 0; } }

.stage {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Grundtilstanden er en almindelig sektion i flow. Pinningen lægges
   ovenpå, og kun når JavaScript kører OG brugeren ikke har bedt om mindre
   bevægelse — ellers ville en pinnet 100svh-scene klippe indhold, der er
   højere end skærmen (fx kalenderens fem paneler). */
.scene-wrap { position: relative; }

.scene {
  position: relative;
  min-height: 88svh;
  padding: 2rem 0;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .scene-wrap {
    /* --len styrer hvor længe scenen bliver på skærmen (i viewporter) */
    height: calc(var(--len, 1.4) * 100vh);
    height: calc(var(--len, 1.4) * 100svh);
  }
  html.js .scene {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 0;
  }
}

.scene__inner {
  position: relative;
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: 6.5rem 0 3rem;
  will-change: transform, opacity;
  z-index: 2;
}
.scene__inner--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* almindelig flow-sektion (cases) — skubber den forrige pinnede scene væk */
.scene--flow {
  position: relative;
  z-index: 5;
  background: var(--paper);
}
/* blød overgang ud af det neurale felt i stedet for en hård kant */
.scene--flow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12svh;
  height: 12svh;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

/* ----------------------------------------------------------
   Artefakter — neuron-glyffer der driver i parallax
   ---------------------------------------------------------- */
/* Dekorationslaget klipper ved scenens kant. På desktop gjorde .scene det
   allerede (overflow: hidden), men under 900 px er den klipning slået fra,
   så indholdet ikke skæres af — og da stod et neuron-glyf med left: 88 %
   8 px uden for skærmen og gav siden vandret scroll ved 320 px bred.
   Kun dekoration bor her, så klipningen kan ikke røre indhold. */
.art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.art-item {
  position: absolute;
  user-select: none;
}

/* håndtegnede neuroner: rød pen = biologisk, blå pen = kunstig */
.art-neuron { overflow: visible; }
.art-neuron--bio  { width: 74px; height: 74px; opacity: 0.3; }
.art-neuron--bio.art-neuron--lg { width: 128px; height: 128px; opacity: 0.22; }
.art-neuron--ai   { width: 64px; height: 64px; opacity: 0.34; }
.art-neuron--ai.art-neuron--lg  { width: 108px; height: 108px; opacity: 0.24; }
.art-neuron--syn  { width: 92px; height: 46px; opacity: 0.4; }

.n-bio {
  fill: none; stroke: var(--organic); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.n-bio-thin { fill: none; stroke: var(--organic); stroke-width: 1.4; stroke-linecap: round; }
.n-bio-fill { fill: var(--organic); stroke: none; }
.n-ai {
  fill: none; stroke: var(--synth); stroke-width: 2;
  stroke-linecap: square; stroke-linejoin: miter;
}
.n-ai-thin { fill: none; stroke: var(--synth); stroke-width: 1.3; }
.n-ai-fill { fill: var(--synth); stroke: none; }
.n-gap { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 3 5; opacity: 0.6; }

.art-plus {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--ultra);
  opacity: 0.26;
}
.art-plus--sm { font-size: 1.4rem; }
.art-mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.3;
  white-space: nowrap;
}

/* ==========================================================
   SCENE 1 — HERO
   ========================================================== */
.hero-kicker {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.hero-statement {
  position: relative;
  font-size: clamp(2.5rem, 7.4vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  font-weight: var(--w-light);
  max-width: 32ch;
}
.hero-statement .lift > span { text-wrap: balance; }
.hero-statement em { letter-spacing: -0.014em; }

/* entré: linjerne løftes op bag en maske, når siden er klar */
.lift { display: block; overflow: hidden; padding-bottom: 0.12em; }
.lift > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .lift > span {
    transform: translateY(105%);
    transition: transform 1.05s var(--ease-out);
  }
  html.js .lift--2 > span { transition-delay: 0.11s; }
  html.ready .lift > span { transform: translateY(0); }

  html.js .fade-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s var(--ease-out) 0.5s, transform 0.9s var(--ease-out) 0.5s;
  }
  html.ready .fade-up { opacity: 1; transform: none; }
  html.js .fade-up--late { transition-delay: 0.8s; }
}

.scroll-hint {
  position: absolute;
  bottom: -15svh;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;   /* modvirker det efterhængende mellemrum */
  text-transform: uppercase;
  color: var(--ink-soft);
  transform: translateX(-50%);
  animation: bob 2.6s ease-in-out infinite;
}
.scroll-hint::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--ink-soft), transparent);
}
@keyframes bob { 50% { transform: translate(-50%, 7px); } }

/* Intro-scenen centreres i det synlige område UNDER den faste nav.
   .scene er flex-centreret, så forskellen mellem top- og bundpadding
   forskyder indholdet: (top − bund) / 2 nedad. Sat til nav-højden. */
#spor .scene__inner { padding: 6.5rem 0 2rem; }

/* ==========================================================
   INTRO — overskriften krymper og stiger op, sporene følger efter
   ==========================================================
   Hele koreografien er transforms og opacity, aldrig font-size eller
   margin: så bliver layoutet stående, hvor det skal ende, og der er
   ingen reflow pr. frame. Variablerne sættes af scene-motoren. */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Grundtilstanden er normalt flow: hero, så spor, så pille.
   Overlapningen nedenfor er en del af scroll-effekten og er derfor scopet
   til html.js + no-preference — ellers ville hero og spor blive tegnet
   oven i hinanden, hvis scriptet fejler. */
.intro__stack { width: 100%; }

.intro__head { text-align: center; }

/* Hero'en bliver stående i sin fulde størrelse — der er ingen krympning,
   så ÉN skala skal bære alle tre sætninger, fra tre ord til halvandet
   hundrede tegn. */
.intro__title {
  font-size: clamp(1.9rem, 5.4vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: var(--w-light);
  /* Under opløsningen står der lange kæder af glyffer uden mellemrum.
     Uden dette bliver de ét ubrydeligt "ord", og teksten løb 1200 px ud
     over skærmkanten. */
  overflow-wrap: anywhere;
}

/* "to spor" — de eneste ord effekten aldrig rører. De fylder ingen plads,
   før de skal bruges: ellers skubbede den usynlige bredde hero-linjen
   100 px til venstre for midten. */
/* "to spor" staar fed HELE vejen: i saetningen skiller de sig ud, saa
   oejet fanger dem, og naar resten oploeses, er det de samme to ord, der
   bliver staaende som overskrift. Det er sitets egne accent-greb —
   let skrift med en fremhaevet del, som i "Sadan gor vi." */
.tkeep { display: none; font-weight: var(--w-bold); }

/* Glitchen er en kromatisk spaltning i PRÆCIS de to sporfarver: det er
   de to spor, der river teksten fra hinanden, ikke en tilfældig effekt. */
.tpre, .tpost, .lmorph {
  text-shadow:
    calc(var(--glitch, 0) * -3px) 0 0 rgba(44, 33, 150, calc(var(--glitch, 0) * 0.5)),
    calc(var(--glitch, 0) *  3px) 0 0 rgba(224, 108, 190, calc(var(--glitch, 0) * 0.5));
}
.lmorph { display: inline-block; }

.intro__lede {
  max-width: 46rem;
  margin-inline: auto;
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  text-wrap: pretty;
}





/* FALLBACK — grundtilstanden er almindelig, læsbar tekst.
   Morfen lægges ovenpå og er scopet til html.js + no-preference, præcis
   som resten af sitets skjule-regler. Fejler scriptet, eller er bevægelse
   slået fra, står alle fire sætninger som normale afsnit. */
.intro__fallback p {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  text-wrap: pretty;
}
.intro__fallback p:last-child { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  html.js .intro__fallback { display: none; }

  /* Hero og spor deler ÉN celle: sporene fylder stadig i layoutet, selv om
     de er skubbet ned og usynlige, og ville ellers presse hero'en op under
     den faste nav, når den lange sætning fylder fem linjer. Afstanden er
     hero'ens FÆRDIGE højde — de to er aldrig synlige samtidig. */
  /* Højden reserveres på HOVEDET, ikke på titlen: gruppen indeni holdes
     tæt sammen og centreres som helhed, så der ikke opstår huller mellem
     kicker, titel og undertekst. Ét enkelt layout-skift, ikke ét pr. frame:
     når den sidste sætning er opløst, falder reservationen sammen, og
     "to spor" sætter sig til rette som overskrift. */
  html.js .intro__head {
    display: grid;
    align-items: center;
    min-height: var(--head-h, clamp(20rem, 70vh, 44rem));
    transition: min-height 0.55s var(--ease-out);
  }
  html.js .intro--settled .intro__head { --head-h: 0px; }
  /* vises først når sætningen er skrevet frem — og vokser til overskrift */
  html.js .intro--keep .tkeep {
    display: inline-block;
    opacity: var(--keep-o, 0);
    transform: scale(var(--keep-s, 1));
  }
  html.js .intro__stack { display: grid; }
  html.js .intro__stack > * { grid-area: 1 / 1; align-self: start; }
  html.js .split { margin-top: var(--split-top, 13rem); }
  html.js .intro__lede { opacity: var(--lede-o, 1); }
}

/* Under 900 px er scenen ikke pinnet, så der er intet forløb at spille.
   Reglerne skal gentages med html.js, ellers vinder blokken ovenfor. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  html.js .intro__fallback { display: block; }
  html.js .tkeep { display: none; }
  html.js .intro__lede { opacity: 1; }
  html.js .intro__head { min-height: 0; transition: none; }
  html.js .intro__stack { display: block; }
  html.js .split { margin-top: clamp(2rem, 5vh, 3.4rem); }
}

/* ==========================================================
   DE TO SPOR — siden deles på langs i mennesker og software
   ========================================================== */
/* De to spor deler ét rækkegitter, så udfaldene står over for hinanden,
   uanset om beskrivelserne bryder til én eller to linjer. Uden det drev
   rækkerne 24 og 47 px fra hinanden ned gennem spalterne. */
.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* mærkat, titel, tre udfald */
  grid-template-rows: auto auto auto auto auto;
  column-gap: clamp(2.5rem, 10vw, 8rem);
  row-gap: 0;
  width: 100%;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  transform: translate3d(0, var(--cols-y, 0px), 0);
  opacity: var(--cols-o, 1);
  will-change: transform, opacity;
}
/* Spalterne trækkes ind mod midten i stedet for ud til hver sin kant.
   Så står de to spor som ét par omkring sømmen, og feltets møde i
   midten bliver kompositionens centrum. */
/* Fast bredde, ikke max-width: med justify-self end/start sizes en
   grid-celle efter sit indhold, og de to spalter blev derfor 414 og
   480 px brede — synligt skævt. */
/* Bredden er MÅLT, ikke valgt frit. Kasserne er symmetriske ved enhver
   bredde, men ved 30rem brækkede venstre spalte sine linjer 66 px før
   kanten, mens højre fyldte helt ud — så blev den tomme kanal mellem
   sporene 32 px skæv i forhold til overskriften over dem. Ved 26rem
   fylder begge spalter lige meget (415 mod 410 px blæk), og kanalen
   lander præcis på midten. Ændres teksterne væsentligt, skal den måles
   igen — se sweep-scriptet i README. */
.split__col {
  width: min(26rem, 100%);
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}
.split__col--people   { justify-self: end; }
.split__col--software { justify-self: start; }


/* TRÅDEN — de to spor som to synlige skinner.
   Den løber ud fra overskriften, ned langs hvert spor med en knude ud for
   hvert udfald, og videre ned mod mødepunktet i næste scene. Skinnerne
   ligger UDEN FOR spalterne og krydser derfor ingen tekst; de er spejlet
   om midten, hvilket ikonerne i venstre side af begge spalter ikke er.
   Geometrien regnes i JS, fordi spalternes plads afhænger af skærmbredden. */
/* Eget lag uden for .scene__inner: scenens udgangs-effekt fader og
   skalerer indholdet, når den skubbes væk, og lå tråden derinde, forsvandt
   skinnerne og gled 24 px indad, netop som mødet-scenens kurver tog over. */
.thread-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.split__col { position: relative; }

.thread__line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.thread__line--people   { stroke: var(--organic); }
.thread__line--software { stroke: var(--synth); }

.thread__nodes circle { stroke: none; }
.thread__nodes .n--people   { fill: var(--organic); }
.thread__nodes .n--software { fill: var(--synth); }

.track__label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.split__col--people   .track__label { color: var(--organic); }
.split__col--software .track__label { color: var(--synth); }

.track__title {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: var(--w-light);
}
.track__x { font-weight: var(--w-light); }
.split__col--people   .track__x { color: var(--organic); }
.split__col--software .track__x { color: var(--synth); }

.track__lede {
  margin-top: clamp(0.6rem, 1.6vh, 1rem);
  max-width: 26rem;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  text-wrap: pretty;
}

/* de tre udfald pr. spor — selv en subgrid, så hver række får samme
   højde som sin makker i den anden spalte */
.outcomes {
  list-style: none;
  margin-top: clamp(1.2rem, 3.2vh, 2rem);
  display: grid;
  grid-row: 3 / -1;
  grid-template-rows: subgrid;
  row-gap: clamp(0.8rem, 2vh, 1.35rem);
}
.outcome {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  will-change: transform, opacity;
}
/* Ikonet sidder i en tonet skive i sporets egen farve. Formen bærer
   betydningen: menneske-sporet er organiske figurer, software-sporet
   er geometriske — de kan skelnes uden at læse farven. */
.outcome__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.outcome__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.split__col--people .outcome__icon {
  background: color-mix(in srgb, var(--organic) 17%, transparent);
}
.split__col--people .outcome__icon svg { stroke: var(--organic); }
.split__col--software .outcome__icon {
  background: color-mix(in srgb, var(--synth) 19%, transparent);
}
.split__col--software .outcome__icon svg { stroke: var(--synth); }

.outcome__body { padding-top: 0.28rem; }
.outcome h3 {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: var(--w-bold);
  line-height: 1.2;
}
.outcome p {
  margin-top: 0.12rem;
  color: var(--ink-soft);
  font-size: clamp(0.88rem, 1.2vw, 0.98rem);
  line-height: 1.5;
}



/* ==========================================================
   HVOR SPORENE MØDES — to linjer der løber sammen i ét punkt
   ========================================================== */
.converge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.cv-line, .cv-stem, .cv-halo {
  fill: none;
  stroke-linecap: round;
  /* uden dette ville preserveAspectRatio="none" strække stregtykkelsen
     til en kile, der er tyk i den ene ende og hårfin i den anden */
  vector-effect: non-scaling-stroke;
}
/* Samme tykkelse som skinnerne (.thread__line) og linjen gennem
   proces-trinene (.mstep-link path). Var 2,4 og gjorde tråden synligt
   tykkere, netop hvor den krydsede scenegrænsen. */
.cv-line, .cv-stem { stroke-width: 1.6; }
/* papir-glorie, så linjerne løfter sig fri af feltets egne farver */
.cv-halo, .thread__halo {
  fill: none;
  stroke: var(--paper);
  stroke-width: 9;
  opacity: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cv-line--bio { stroke: var(--organic); }
.cv-line--ai  { stroke: var(--synth); }
.cv-stem      { stroke: var(--ink); opacity: 0.5; }

/* mødepunktet — sidder præcis hvor de to kurver ender (500/1000, 340/1000) */
.converge__node {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--paper);
  z-index: 2;
  transform: scale(var(--node, 1));
  pointer-events: none;
}

/* små mærkater ved hver indløbende linje, så metaforen ikke skal gættes */
.converge__tag {
  position: absolute;
  /* helt oppe hvor linjerne krydser scenegrænsen og stadig løber lodret i
     skinnernes x — længere ned har kurven allerede svunget indad, og
     mærkaten stod da 90 px fra sin egen linje */
  top: 5%;
  z-index: 2;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: var(--tag, 1);
  pointer-events: none;
}
/* --rail-l/--rail-r sættes fra skinnernes målte x, så mærkaterne står på
   linjerne i stedet for på faste 20/80 %, som de gjorde, dengang linjerne
   selv lå fast */
.converge__tag--people   { left: var(--rail-l, 20%); transform: translateX(-50%); color: var(--organic); }
.converge__tag--software { left: var(--rail-r, 80%); transform: translateX(-50%); color: var(--synth); }

.converge__text {
  /* skubbet ned under mødepunktet, så knuden aldrig lander i teksten.
     Linjen har en åbning netop her (to stammer i stedet for én), så
     overskriften står i tråden i stedet for oven på den. */
  margin-top: clamp(2.5rem, 15vh, 9rem);
  will-change: transform, opacity;
}
.converge__title {
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Overskriften slår selv hullet i stregen. En blød papir-sky bag ordene
     i stedet for en pause i stien: hullet sidder derfor altid præcis om
     teksten — også mens scenen skalerer og fader på vej ud, hvor en målt
     åbning gled 82 px væk fra ordene. Samme papir-greb som .cv-halo. */
  display: inline-block;
  padding: 0.3em 0.85em;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 241, 232, 1) 0%,
    rgba(245, 241, 232, 1) 58%,
    rgba(245, 241, 232, 0) 100%);
}
.converge__lede {
  margin-top: clamp(1.2rem, 3vh, 1.9rem);
  margin-inline: auto;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  text-wrap: pretty;
}

/* ----------------------------------------------------------
   Startpunkter for scroll-koreografien.
   Kun når JS kører OG brugeren ikke har bedt om mindre bevægelse —
   fejler scriptet, fjerner vagthunden html.js, og alt står synligt.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero-tilstanden: overskriften stor og midt på skærmen, sporene
     nede under kanten. Scene-motoren tager over på foerste frame.
     Vaerdierne staar HER og ikke i JS, saa siden aldrig blinker i den
     forkerte tilstand, foer loekken naar at koere. */
  html.js .split       { --cols-y: 46vh; --cols-o: 0; }
  html.js .outcome,
  html.js .converge__text { opacity: 0; }
  html.js .converge__node { --node: 0; }
  html.js .converge__tag { --tag: 0; }
}

/* ==========================================================
   PROCESSEN — linjen fra mødepunktet fortsætter ned gennem
   fire trin. Afsnittet flyder (scene-wrap--flow), fordi det er
   for højt til en pinnet 100 svh-scene.
   ========================================================== */
.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* INGEN topluft: linjen kommer ind fra scenen ovenfor og skal fortsætte
     ubrudt ned i første trin. 32 px her skubbede det indledende led væk fra
     scenegrænsen, så stammen slap og leddet begyndte 24 px længere nede. */
  padding-block: 0 clamp(4rem, 10vh, 7rem);
}

/* Hvert trin er et kort, så de læses som fire objekter på tråden i
   stedet for fire tekstblokke. Baggrunden er kun delvist dækkende —
   feltet skal stadig anes bagved, ellers falder afsnittet ud af sitet. */
.mstep {
  width: min(34rem, 100%);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem)
           clamp(1.6rem, 3.2vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  box-shadow: 0 18px 40px -34px rgba(22, 19, 12, 0.6);
}

/* Ikonerne genbruger sporenes glyffer og sprog: samme 24×24-gitter,
   samme stregvægt, samme tonede skive. Trin 03 er selve gaflen mellem
   de to spor og viser derfor BEGGE — i hver sin farve. De øvrige er
   neutrale, fordi linjen dér er samlet. */
.mstep__icons {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: clamp(0.9rem, 2vh, 1.3rem);
}
.mstep__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.mstep__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mstep__icon--people {
  background: color-mix(in srgb, var(--organic) 15%, transparent);
}
.mstep__icon--people svg { stroke: var(--organic); }
.mstep__icon--software {
  background: color-mix(in srgb, var(--synth) 17%, transparent);
}
.mstep__icon--software svg { stroke: var(--synth); }

.mstep__num {
  font-size: 0.8rem;
  /* 0.2em delte "02" i "0 2" — to cifre tåler ikke sperring */
  letter-spacing: 0.06em;
  color: var(--ultra);
  margin-bottom: 0.5rem;
}
.mstep h3 {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  font-weight: var(--w-light);
}
.mstep__lead {
  margin-top: 0.7rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink);
  text-wrap: pretty;
}
.mstep p + p { margin-top: 0.5rem; }
.mstep p:not(.mstep__lead):not(.mstep__num) {
  color: var(--ink-soft);
  font-size: clamp(0.94rem, 1.25vw, 1.05rem);
  text-wrap: pretty;
}

/* forbindelsesleddet mellem to trin — samme tråd som mødepunktets */
.mstep-link {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.6rem, 2vh, 1.2rem);
}
/* det indledende led har ingen pil og INTET mellemrum i nogen ende — det ER
   linjen fra mødet-scenen, der fortsætter. Med luft over og under stod det
   som en løs stump streg mellem to huller (målt: 24 px over, 16 px under). */
.mstep-link--lead { padding-block: 0; }

.mstep-link--lead svg { height: clamp(38px, 6vh, 58px); }
.mstep-link svg {
  width: 14px;
  height: clamp(46px, 8vh, 72px);
  overflow: visible;
}
.mstep-link path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

/* Leddet vokser nedad i stedet for at tone ind som en blok — så læses
   det som den samme linje, der fortsætter, og ikke som et nyt element. */
@media (prefers-reduced-motion: no-preference) {
  html.js .mstep-link.reveal {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.7s var(--ease-out);
  }
  html.js .mstep-link.reveal.visible { transform: scaleY(1); }
}

/* ==========================================================
   SCENE 4 — PARTNERSKABER (centreret komposition)
   ========================================================== */
.partners__title {
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-weight: var(--w-light);
  text-wrap: balance;
}
.partners__title { text-wrap: balance; }
.partners__lede {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 36rem;
  /* Teksten er centreret, så ujævne linjelængder er synlige: uden dette
     stod sidste linje som det enkelte ord "jer.". Samme greb som de
     centrerede overskrifter på sitet. */
  text-wrap: balance;
}
.partners__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.partners__badges img {
  width: auto;
  transition: transform 0.45s var(--ease-spring), filter 0.45s var(--ease-out);
}
.partners__badges img[src*="openai"]    { height: 58px; }
.partners__badges img[src*="anthropic"] { height: 84px; }
.partners__badges img[src*="microsoft"] { height: 44px; }

/* ==========================================================
   SCENE 5 — KUNDECASES + KUNDELOGOER
   ========================================================== */
.cases {
  padding: 8rem 0;
}
.cases > * {
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.cases__title {
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  letter-spacing: -0.01em;
  font-weight: var(--w-light);
}


.cases__carousel {
  position: relative;
  margin-top: 3.5rem;
}

.cases__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.5rem 0.55rem 0.75rem 0;
}
.cases__viewport::-webkit-scrollbar { display: none; }
.cases__viewport:focus-visible {
  outline: 3px solid var(--ultra);
  outline-offset: 5px;
  border-radius: var(--r-md);
}
.cases__track {
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
}

.case-card {
  flex: 0 0 calc(28.5714% - 1.3714rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.case-card__img {
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-deep);
}
.case-card__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.case-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ultra);
  margin: 1.3rem 1.5rem 0.4rem;
}
.case-card h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 1.5rem 0.6rem;
}
.case-card p {
  flex: 1;
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0 1.5rem 1.2rem;
}
.case-card__link {
  display: block;
  width: max-content;
  max-width: calc(100% - 3rem);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid var(--ultra);
  margin: 0 1.5rem 1.5rem;
}

/* ==========================================================
   SCROLL-VISER
   ==========================================================
   Beholderen fylder hele bredden og centrerer med flexbox — den har
   BEVIDST ingen transform. Den gamle scroll-hint blev centreret med
   translate(-50%), og dens keyframes overskrev den, så den stod 63 px
   ved siden af midten: animationer slår almindelige erklæringer. Her
   kan prikken derfor animere frit uden at røre centreringen.
   ========================================================== */
.scrollcue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(1.1rem, 3.4vh, 2.1rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  opacity: var(--cue, 0);
  transition: opacity 0.5s var(--ease-out);
}
.scrollcue__word {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
}
/* samme streg som tråden: 1,6 px, blæk, tonet ned */
.scrollcue__rail {
  position: relative;
  width: 1.6px;
  height: 40px;
  background: linear-gradient(to bottom,
    rgba(22, 19, 12, 0.28), rgba(22, 19, 12, 0.05));
}
.scrollcue__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  /* centreres med margin og IKKE med transform — keyframen nedenfor
     ejer transform alene */
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--ink);
  animation: cue-fald 2.1s var(--ease-out) infinite;
}
@keyframes cue-fald {
  0%   { transform: translateY(0);    opacity: 0; }
  16%  { opacity: 0.85; }
  68%  { opacity: 0.85; }
  100% { transform: translateY(35px); opacity: 0; }
}

/* samtykke-boksen dækker bunden på smalle skærme — viseren viger */
body:has(#samtykke:not([hidden])) .scrollcue { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .scrollcue__dot { animation: none; opacity: 0.85; }
  .scrollcue { transition: none; }
}

/* ==========================================================
   SAMTYKKE — vises kun, hvis der er en måling at sige ja til
   ========================================================== */
.consent {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 200;
  width: min(27rem, calc(100% - 2rem));
  padding: 1.35rem 1.5rem 1.45rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(22, 19, 12, 0.14);
}
.consent__text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink);
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
/* De to valg har BEVIDST samme vægt. Datatilsynet ser på, om det er lige
   så let at sige nej som ja — en utydelig afvisning er et mørkt mønster
   og gør samtykket ugyldigt. */
.consent__btn {
  flex: 1 1 auto;
  padding: 0.58rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), opacity 0.3s var(--ease-out);
}
.consent__btn--ghost { background: transparent; color: var(--ink); }
.consent__btn:hover { transform: translateY(-1px); }
.consent__btn:active { transform: translateY(0); }


@media (max-width: 560px) {
  .consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .consent__btn { transition: none; }
  .consent__btn:hover { transform: none; }
}

/* ==========================================================
   KUNDECASE-SIDER — overskrift, citat og vejen tilbage
   ========================================================== */
.case__title {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--w-light);
  /* casernes overskrifter er hele sætninger og bryder derfor til flere
     linjer — de skal balanceres, ikke efterlade et enligt ord */
  text-wrap: balance;
}
/* citatet i SAGRO-casen. Blockquote har 40 px indrykning som standard i
   browseren; den nulstilles her, så teksten flugter med afsnittene. */
.case__quote {
  margin: clamp(0.4rem, 1.2vh, 1rem) 0;
  padding-left: clamp(1rem, 2.4vw, 1.8rem);
  border-left: 2px solid var(--ultra);
  color: var(--ink);
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
  line-height: 1.34;
}
.case__back {
  align-self: flex-start;
  margin-top: clamp(1.6rem, 4vh, 2.8rem);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid var(--ultra);
}

.cases__arrow {
  position: absolute;
  z-index: 3;
  top: clamp(5.5rem, 9vw, 8rem);
  display: none;
  place-items: center;
  width: 3.7rem;
  height: 3.7rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.8rem/1 var(--font-sans);
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ultra);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out), opacity 0.2s ease;
}
html.js .cases__arrow { display: grid; }
.cases__arrow--prev { left: -1.2rem; }
.cases__arrow--next { right: -1.2rem; }
.cases__arrow:focus-visible {
  outline: 3px solid var(--ultra);
  outline-offset: 4px;
}
html.js .cases__arrow[hidden] { display: none; }
.cases__status {
  display: none;
  margin-top: 0.7rem;
  text-align: right;
  color: var(--ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.js .cases__status { display: block; }

html:not(.js) .cases__track { flex-wrap: wrap; }
html:not(.js) .case-card { flex-basis: calc(33.3333% - 1.0667rem); }

.logos { margin-top: 6rem; }
/* Otte kundelogoer: 4 × 2 på desktop, 2 × 4 på mobil — aldrig
   en enlig rest på sidste række. Ret tallene, hvis antallet ændres. */
.logos__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
}
@media (max-width: 700px) { .logos__row { grid-template-columns: repeat(2, 1fr); } }

/* Én fælles celle for både rigtige logoer og placeholders, så de fylder
   nøjagtig det samme. Logoet skaleres til at passe i cellen uanset format. */
.logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 1rem;
}
.logos__item img {
  max-width: 100%;
  /* --logo-h sættes pr. logo i HTML: brede wordmarks skrues ned, så de
     otte mærker vejer optisk ens i stedet for at fylde lige meget i højden */
  max-height: var(--logo-h, 40px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.35s var(--ease-out);
}

.logos__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  border: 1.5px dashed rgba(22, 19, 12, 0.48);
  border-radius: var(--r-md);
  font-size: 0.8rem;
  color: var(--ink-soft);
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

/* ==========================================================
   OM OS — teksten der kommer frem, og afrivningskalenderen
   ========================================================== */
/* Én smal, centreret tekstspalte — teksten er venstrestillet inde i den.
   Åbningsafsnittet står midt på første skærm og er det eneste synlige,
   når man lander; resten kommer frem med scroll. */
.story {
  width: min(37rem, 100%);
  margin-inline: auto;
}

/* lille label over åbningsafsnittet */
.story__kicker {
  margin-bottom: 1.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cal__hint {
  display: none;
  margin-top: 2rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.story__lead {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* label OVER teksten — ikke ved siden af den. Gruppen centreres lodret. */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.story__rest {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.6vh, 2.2rem);
  padding-bottom: 4rem;
}
.story__p {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
}
/* åbningsafsnittet er sidens indgang — display-størrelse og fuld sværte */
.story__p--open {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -0.008em;
  max-width: none;
}
/* de korte afsnit er tekstens pointer — de skal veje mere */
.story__p--punch {
  color: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.36;
}

/* scene-wrap--flow: med i scene-motoren (så feltet bevæger sig), men
   ikke pinnet — teksten skal kunne være så lang, den vil */
@media (prefers-reduced-motion: no-preference) {
  html.js .scene-wrap--flow { height: auto; }
  html.js .scene-wrap--flow .scene {
    position: relative;
    height: auto;
    padding: 0 0 6rem;
    overflow: visible;
  }
  /* åbningsafsnittet skal stå midt i viewporten, ikke under scenens
     normale toppolstring */
  html.js .scene-wrap--flow .scene__inner { padding-top: 0; }
}

/* ---------- afrivningskalenderen ---------- */
.cal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* Papirblokken er ren dekoration — årene står i panelerne ved siden af,
   så indholdet også er der uden JavaScript og uden bevægelse. */
.cal__block {
  display: none;
  position: relative;
  width: clamp(13rem, 23vw, 20rem);
  aspect-ratio: 1 / 1.02;
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* spiralen i toppen */
.cal__wire {
  position: absolute;
  top: -13px; left: 0; right: 0;
  height: 13px;
  z-index: 40;
}
.cal__wire::before,
.cal__wire::after {
  content: "";
  position: absolute;
  top: 0;
  width: 11px; height: 23px;
  border: 1.8px solid var(--ink-soft);
  border-radius: 999px;
  opacity: 0.6;
}
.cal__wire::before { left: 22%; }
.cal__wire::after  { right: 22%; }

/* papirblokkens tykkelse — bliver tyndere år for år */
.cal__leaf {
  position: absolute;
  left: calc(1.3% * var(--d));
  right: calc(1.3% * var(--d));
  bottom: calc(-4px * var(--d));
  height: 10px;
  background: #f4efe6;
  border: 1px solid rgba(22, 19, 12, 0.34);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  z-index: 0;
}

.cal__sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3rem 1.5rem 1.5rem;
  /* blødere papir med et svagt fald i toppen — mere indbydende end en flad flade */
  background: linear-gradient(178deg, #fffdf9 0%, #faf6ef 58%, #f6f1e8 100%);
  border: 1.25px solid rgba(22, 19, 12, 0.82);
  border-radius: 22px;
  overflow: hidden;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 55px -32px rgba(22, 19, 12, 0.5),
    0 8px 18px -12px rgba(22, 19, 12, 0.22);
}
.cal__perf {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  border-bottom: 1.25px dashed rgba(22, 19, 12, 0.2);
}
.cal__perf::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 11px;
  height: 8px;
  background-image: radial-gradient(circle at 4px 4px,
    rgba(22, 19, 12, 0.15) 0 4px, transparent 4px);
  background-size: 28px 8px;
  background-repeat: repeat-x;
}

/* årstallet sidder højt på arket */
.cal__yr {
  font-size: clamp(2.4rem, 4.6vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

/* årets værktøjer: mærkerne holdes monokrome, så de fem ark læses som ét sæt */
.cal__marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.2rem;
  min-height: 34px;
}
.cal__marks img {
  width: auto;
  height: 34px;
  filter: brightness(0);
  opacity: 0.78;
}
.cal__tool {
  margin-top: 0.85rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-align: center;
}
.cal__note {
  margin-top: auto;
  width: 78%;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(22, 19, 12, 0.14);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}

/* uden JavaScript og uden bevægelse er panelerne en almindelig tidslinje */
.cal__stack {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.cal__panel { max-width: 36rem; }
.cal__arc {
  margin: -1.2rem 0 2rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.cal__year {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--ultra);
  margin-bottom: 0.5rem;
}
.cal__panel h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}
.cal__panel p {
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
}

@media (prefers-reduced-motion: no-preference) {
  html.js .cal__hint { display: block; }
  html.js .story__p { will-change: transform, opacity; }
  html.js .cal__block { display: block; }
  html.js .cal__sheet { will-change: transform, opacity; }
  /* panelerne lægges oven på hinanden og krydsfades af scriptet */
  html.js .cal__stack { display: grid; }
  html.js .cal__panel { grid-area: 1 / 1; will-change: transform, opacity; }
}

/* ==========================================================
   UNDERSIDE — statiske paneler (servicedesk.html)
   ========================================================== */
.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8rem max(var(--gutter), (100% - var(--measure)) / 2) 5rem;
}
.panel--subhero { min-height: 86svh; }
.hero-statement--sub { font-size: clamp(2.2rem, 5.5vw, 4.6rem); }
.subhero__lede {
  max-width: 40rem;
  margin-top: 1.8rem;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}
.panel .scroll-hint { bottom: 2rem; }

/* ==========================================================
   FORLØBET (underside) — legende rejsekort
   ========================================================== */
.journey {
  position: relative;
  padding: 7rem 0 8rem;
  overflow: hidden;
  background: var(--paper-deep);
}
/* blød papir-til-papir-overgang i stedet for en hård regnearkskant */
.journey::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10rem;
  background: linear-gradient(to bottom, var(--paper), transparent);
  pointer-events: none;
}
.journey__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, black 30%, transparent 100%);
  opacity: 0.45;
  pointer-events: none;
}
.journey__inner {
  position: relative;
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.journey__map {
  display: flex;
  flex-direction: column;
}

.phase {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .phase {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  html.js .phase.visible { opacity: 1; transform: translateY(0); }
}
.phase--flip .phase__illu { order: 2; }

.phase__illu { display: flex; justify-content: center; }
.illu {
  width: min(320px, 78vw);
  height: auto;
  overflow: visible;
}

.illu .i-ink        { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.illu .i-fill       { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.illu .i-ink-fill   { fill: var(--ink); }
.illu .i-ultra      { fill: none; stroke: var(--ultra); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.illu .i-ultra-dash { fill: none; stroke: var(--ultra); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 7; }
.illu .i-ultra-fill { fill: var(--ultra); stroke: none; }
.illu .i-ultra-fill-solid { fill: var(--ultra); }
.illu .i-ultra-badge { fill: var(--ultra); stroke: var(--paper-deep); stroke-width: 3; }
.illu .i-check      { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.illu .i-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--ink);
}

.phase__num {
  display: block;
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  font-weight: var(--w-light);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--ultra);
  margin-bottom: 0.8rem;
}
@supports not (-webkit-text-stroke: 2px black) {
  .phase__num { color: var(--ultra); }
}

.phase__tag {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 5px;
  rotate: -1.5deg;
  margin-bottom: 1.1rem;
}
.phase--flip .phase__tag { rotate: 1.5deg; }

.phase__content h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}
.phase__content p { color: var(--ink-soft); max-width: 34rem; }
.phase__content strong {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--synth);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.phase-arrow {
  display: flex;
  justify-content: center;
  padding: 1.2rem 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .phase-arrow { opacity: 0; transition: opacity 0.6s var(--ease-out) 0.15s; }
  html.js .phase-arrow.visible { opacity: 1; }
}
/* forbinderen skal spænde mellem de to spalter, ikke svæve i midten */
.phase-arrow svg { width: clamp(150px, 22vw, 260px); height: auto; overflow: visible; }
.phase-arrow:not(.phase-arrow--flip) { justify-content: flex-end; padding-right: 12%; }
.phase-arrow--flip { justify-content: flex-start; padding-left: 12%; }
.phase-arrow--flip svg { transform: scaleX(-1); }
.arrow-path {
  fill: none;
  stroke: var(--ultra);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
}
.arrow-head {
  fill: none;
  stroke: var(--ultra);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phase-arrow.visible .arrow-path {
  animation: dash-march 1.6s linear infinite;
}
@keyframes dash-march {
  to { stroke-dashoffset: -15; }
}

.journey__stamp {
  width: fit-content;
  margin: 3.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: center;
  padding: 1.3rem 2.4rem;
  border: 3px solid var(--ultra);
  border-radius: 12px;
  color: var(--ultra);
  rotate: -3deg;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  box-shadow: 4px 4px 0 rgba(36, 0, 255, 0.15);
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .journey__stamp {
    opacity: 0;
    transform: scale(1.15);   /* rotate: -3deg lever i sin egen property ovenfor */
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
  }
}
.journey__stamp strong { font-size: 1.05rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  html.js .journey__stamp.visible { opacity: 1; transform: scale(1); }
}

/* ==========================================================
   FOOTER — blæk-mørk afslutning med kontakt
   ========================================================== */
.footer {
  position: relative;
  z-index: 6;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding: 6rem 0 2.2rem;
}
/* mærket som stort, dæmpet vandmærke i højre side */
.footer__mark {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  top: 50%;
  width: clamp(15rem, 27vw, 26rem);
  height: auto;
  transform: translateY(-52%);
  opacity: 0.42;
  pointer-events: none;
}
.footer__mark .f-bio {
  fill: none; stroke: var(--ultra-soft); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.footer__mark .f-bio-fill { fill: var(--ultra-soft); }
.footer__mark .f-ai {
  fill: none; stroke: var(--synth-soft); stroke-width: 1.4;
}
.footer__mark .f-ai-fill { fill: var(--synth-soft); }
.footer__mark .f-gap {
  fill: none; stroke: rgba(245, 241, 232, 0.5);
  stroke-width: 1.2; stroke-dasharray: 3 6;
}
@media (max-width: 900px) { .footer__mark { display: none; } }

.footer__contact {
  position: relative;
  z-index: 1;
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin: 0 auto 5rem;
}
.footer__headline {
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -0.01em;
  line-height: 1.06;
  font-weight: var(--w-light);
}

.footer__prompt {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  padding: 1.15rem 1.7rem;
  border: 2px solid rgba(245, 241, 232, 0.85);
  border-radius: 12px;
  color: var(--paper);
  text-decoration: none;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* tre spalter, så midterelementet faktisk sidder i midten */
/* Kontaktoplysningerne. <address> saetter kursiv som standard i browseren,
   og det passer ikke til mono-skriften her. */
.footer__nap {
  /* Ligger INDE i .footer__contact, saa bredden og venstrekanten arves.
     Som soeskende med negativ margin lagde den sig oven paa mail-knappen. */
  margin-top: 2rem;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(245, 241, 232, 0.62);
}
.footer__nap a {
  color: rgba(245, 241, 232, 0.62);
  text-decoration: underline;
  text-decoration-color: rgba(245, 241, 232, 0.3);
}
.footer__nap a:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
}

.footer__inner {
  position: relative;
  z-index: 1;
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin: 0 auto;
  display: grid;
  /* to børn: logo til venstre, linjen til højre. Var 1fr auto 1fr til tre
     børn — med partner-linjen væk stod den tredje kolonne tom og trak
     teksten væk fra kanten. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  border-top: 1px solid rgba(245, 241, 232, 0.18);
  padding-top: 1.8rem;
}
.footer__inner > :first-child { justify-self: start; }
.footer__inner > :last-child  { justify-self: end; }

/* Vejen til at trække sit ja tilbage — indsættes af consent.js, og kun når
   der faktisk er en måling at sige nej til. Den er et TREDJE barn i et
   gitter med to kolonner, så den lander i næste række; uden denne regel
   arvede den ":last-child { justify-self: end }" og stod 1013 px inde
   under taglinen. Her får den sin egen fulde række til venstre. */
.footer__inner > .footer__cookies {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.2rem;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: rgba(245, 241, 232, 0.55);
  text-decoration: underline;
  cursor: pointer;
}
.footer__inner > .footer__cookies:hover { color: rgba(245, 241, 232, 0.9); }
.footer__logo {
  display: block;
  height: 26px;
  width: auto;
}
.footer__tag { color: rgba(245, 241, 232, 0.72); }
@media (max-width: 820px) {
  .footer__inner { grid-template-columns: 1fr; justify-items: start; gap: 0.6rem; }
  .footer__inner > :last-child { justify-self: start; }
}

/* ==========================================================
   RESPONSIVT
   ========================================================== */
@media (max-width: 900px) {
  .story__rest { padding-bottom: 2rem; }
  .cal { grid-template-columns: 1fr; gap: 2rem; justify-items: center; }
  .cal__block { width: min(80vw, 17rem); }
  .cal__side { width: 100%; }

  /* De to spor stables. En pinnet 100svh-scene ville klippe dem, så
     netop denne scene holder op med at være pinnet og flyder i stedet.
     JS opdager det selv (den læser position på .scene) og skifter til
     positionsbaseret afsløring i stedet for scene-progression. */
  /* Subgriddet skal ophæves her. Med grid-row: 1 / -1 på spalterne ville
     de ikke stable, men skabe en implicit anden spalte og stå side om side
     på en 390 px skærm. */
  .split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: clamp(3rem, 9vh, 4.5rem);
  }
  .split__col { display: block; grid-row: auto; grid-template-rows: none; }
  /* stablede spalter: to skinner giver ingen mening */
  .thread-layer { display: none; }
  .outcomes {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    gap: clamp(0.8rem, 2vh, 1.35rem);
  }
  html.js .scene-wrap#spor { height: auto; }
  html.js .scene-wrap#spor .scene {
    position: relative;
    height: auto;
    min-height: 0;
    padding: clamp(3.5rem, 11vh, 6rem) 0;
    overflow: visible;
  }
  .split__col { width: 100%; justify-self: stretch; }
  /* scenen er ikke pinnet her, så der er intet forløb at spille */
  .track__lede, .outcome p { max-width: 34rem; }

  .converge__text { margin-top: clamp(2rem, 9vh, 5rem); }

  .cases__track { gap: 1.4rem; }
  .case-card { flex-basis: calc(41.6667% - 1.1667rem); }
  .cases__arrow--prev { left: -0.45rem; }
  .cases__arrow--next { right: -0.45rem; }
  .art-plus { font-size: 1.7rem; }
  .art-neuron--bio.art-neuron--lg { width: 88px; height: 88px; }
  .art-neuron--ai.art-neuron--lg  { width: 74px; height: 74px; }
  .art-neuron--bio { width: 54px; height: 54px; }
  .art-neuron--ai  { width: 46px; height: 46px; }
  .art-neuron--syn { width: 66px; height: 33px; }
}

@media (max-width: 720px) {
  .cases__carousel { margin-top: 2.5rem; }
  .case-card { flex-basis: 82%; }
  .case-card h3 { font-size: 1.15rem; }
  .cases__arrow {
    top: clamp(4.75rem, 23vw, 6.5rem);
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.55rem;
  }
  .cases__arrow--prev { left: 0.25rem; }
  .cases__arrow--next { right: 0.25rem; }
  .nav { padding-block: 0.95rem; }
  .nav--scrolled { padding-block: 0.75rem; }
  .nav__logo img { height: 26px; }
  /* "Tal med et menneske" er 19 tegn. Ved 360 px og derunder er der ikke
     plads til logo + knap i fuld størrelse, og knappen brækkede. Målt: der
     var kun 16 px luft imellem dem. Begge dele skrumper en smule her. */
  .nav__cta { font-size: 0.82rem; padding: 0.52rem 1rem; }
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    /* lukket menu må ikke kunne tabbes ind i — den ligger uden for skærmen */
    visibility: hidden;
    transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
    height: 100vh;
    height: 100dvh;
    width: min(82vw, 21rem);
    padding: 5rem 2rem 2rem;
    background: #f6f2ea;
    background: color-mix(in srgb, var(--paper) 97%, #fff);
    border-left: 1.5px solid var(--ink);
    box-shadow: -30px 0 60px -30px rgba(22, 19, 12, 0.5);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    transform: translateX(100%);
    font-size: 1.25rem;
  }
  .nav__links.open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.5s var(--ease-out), visibility 0s;
  }
  /* linkene falder ind ét efter ét */
  .nav__links a {
    opacity: 0;
    transform: translateX(22px);
    transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .nav__links.open a { opacity: 1; transform: none; }
  .nav__links.open a:nth-child(1) { transition-delay: 0.08s; }
  .nav__links.open a:nth-child(2) { transition-delay: 0.13s; }
  .nav__links.open a:nth-child(3) { transition-delay: 0.18s; }
  .nav__links.open a:nth-child(4) { transition-delay: 0.23s; }
  .nav__links.open a:nth-child(5) { transition-delay: 0.28s; }
  /* gjaldt CTA'en INDE i menu-overlayet. Uden for det ville
     align-self: stretch straekke knappen ud i hele topbarens hoejde. */
  .nav__links .nav__cta { align-self: stretch; text-align: center; }

  .nav__burger { display: flex; z-index: 110; }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .scene__inner { padding-top: 5.5rem; }
  .cases { padding-top: 6rem; }

  /* Uden pinning er der ingen hero-fase på mobil, så åbningen ville
     møde læseren som en lille sektionsoverskrift. Titlen får sin vægt
     tilbage via ren typografi i stedet for scroll-koreografi. */
  #spor .scene__inner { padding: 5rem 0 2rem; }
  .intro__title { font-size: clamp(1.9rem, 7.4vw, 2.6rem); }
  .intro__lede { font-size: 1rem; }
  .intro__head { margin-bottom: 0.5rem; }
  .hero-statement { font-size: clamp(2.3rem, 10vw, 3.4rem); }

  /* artefakter der ellers ville løbe ud over kanten på små skærme */
  .art-mono, .art-neuron--syn { display: none; }

  /* partnere skal kunne være inde i én viewport-højde på mobil */
  .partners__lede { font-size: 0.95rem; }
  .partners__badges { gap: 1.5rem; margin-top: 2rem; }
  .partners__badges img[src*="openai"]    { height: 42px; }
  .partners__badges img[src*="anthropic"] { height: 62px; }
  .partners__badges img[src*="microsoft"] { height: 32px; }

  .journey { padding: 4.5rem 0 6rem; }
  .phase {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: start;
    text-align: left;
  }
  .phase__illu, .phase--flip .phase__illu { order: 0; justify-content: flex-start; }
  .illu { width: min(240px, 70vw); }
  .phase-arrow { padding: 2rem 0; }
  .journey__stamp { margin-top: 2.5rem; }

  .scroll-canvas { opacity: 0.88; }
}

/* lave skærme (bærbare i 720p, landskab på telefon):
   hver scene skal stadig kunne være inde i én viewport-højde */
@media (max-height: 780px) and (min-width: 721px) {
  .scene__inner { padding-top: 5.25rem; padding-bottom: 2rem; }
  .hero-statement { font-size: clamp(2.2rem, 5.4vw, 4rem); }
  /* #spor .scene__inner har id-specificitet og slaar .scene__inner
     ovenfor — den skal derfor gentages her, ellers bliver intro-scenen
     for hoej og pillen klippet af scenens overflow: hidden. */
  #spor .scene__inner { padding: 5rem 0 0.5rem; }
  /* må IKKE nulstille afstanden: sporene deler celle med hero'en og
     ville lægge sig oven i "to spor" */
  #spor .split { margin-top: var(--split-top, 8rem); }
  #spor { --split-top: 8rem; }
  #spor .outcomes { margin-top: 0.75rem; gap: 0.45rem; }
  #spor .outcome p { font-size: 0.9rem; line-height: 1.42; }
  #spor .outcome h3 { line-height: 1.15; }
  #spor .intro__lede { margin-top: 0.45rem; }
  #spor .intro__head { --head-h: clamp(16rem, 64vh, 30rem); }
  /* id-selektoren ovenfor slår klasse-reglen for den satte tilstand,
     så den skal gentages med samme vægt her */
  #spor .intro--settled .intro__head { --head-h: 0px; }
  .intro__title { font-size: clamp(1.6rem, 3.8vw, 3rem); }
  .track__title { font-size: clamp(1.5rem, 3vw, 2.3rem); }
  .outcome h3 { font-size: clamp(0.98rem, 1.4vw, 1.1rem); }
  .outcome__icon { width: 33px; height: 33px; }
  .outcome__icon svg { width: 18px; height: 18px; }
  .converge__title { font-size: clamp(1.8rem, 4.4vw, 3.4rem); }
  .converge__text { margin-top: clamp(2rem, 10vh, 5rem); }
  .partners__title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
  .partners__lede { font-size: 1rem; }
  .partners__badges { margin-top: 2rem; }
  .partners__badges img[src*="openai"]    { height: 46px; }
  .partners__badges img[src*="anthropic"] { height: 66px; }
  .partners__badges img[src*="microsoft"] { height: 35px; }
  .section-label { margin-bottom: 1.2rem; }
  .scroll-hint { bottom: -12svh; }
  .story__p { font-size: 1rem; }
  .story__p--open { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
  .cal__block { width: clamp(13rem, 21vw, 17rem); }
  .cal__panel h2 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
}

/* Hover-effekter gælder kun rigtige pegeredskaber. På touch hænger
   :hover ellers ved efter et tap, så kort bliver stående zoomede. */
@media (hover: hover) and (pointer: fine) {
  .nav__logo:hover { opacity: 0.72; }
  .nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); transform-origin: left; }
  .nav__cta:hover {
    background-size: 100% 100%;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(36, 0, 255, 0.9);
  }
  .case-card:hover { transform: translate(-5px, -5px); box-shadow: 7px 7px 0 var(--ultra); }
  .case-card:hover .case-card__img img { transform: scale(1.04); }
  .case-card:hover .case-card__link { border-bottom-color: var(--synth); }
  .cases__arrow:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ultra);
  }
  .partners__badges img:hover {
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 12px 18px rgba(22, 19, 12, 0.18));
  }
  .logos__ph:hover { border-color: var(--ultra); color: var(--ultra); }
  .logos__item:hover img { filter: none; opacity: 1; }
  .footer__prompt:hover {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0 var(--ultra-soft);
    border-color: var(--ultra-soft);
  }
}

/* ==========================================================
   REDUCERET BEVÆGELSE — alt vises statisk, ingen pinning
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor, .scroll-hint { animation: none; }
  .cursor { opacity: 0.4; }
  .reveal, .phase, .phase-arrow, .journey__stamp {
    opacity: 1; transform: none; transition: none;
  }
  .journey__stamp { transform: scale(1); }
  .phase-arrow.visible .arrow-path { animation: none; }

  .lift > span { transform: none; transition: none; }
  .fade-up { opacity: 1; transform: none; transition: none; }

  .scene-wrap { height: auto; }
  .scene { position: relative; height: auto; min-height: 88svh; padding: 2rem 0; }
  .scene__inner { transform: none !important; opacity: 1 !important; filter: none !important; }
  .art-item { transform: none !important; }
  .scroll-hint { position: static; transform: none; margin-top: 3rem; }
  .scroll-hint::after { display: none; }

  /* de to spor stables og står stille — ingen indglidning, ingen søm-tegning */
  .split { grid-template-columns: 1fr; gap: 3rem; }
  .thread-layer { display: none; }
  .split { --cols-y: 0px; --cols-o: 1; }
  /* morfen kan ikke spilles uden bevægelse: lagene ville ligge oven i
     hinanden. De bliver derfor tre almindelige afsnit. */
  .split__col, .outcome, .converge__text {
    opacity: 1 !important;
    transform: none !important;
  }
  .converge__node { transform: scale(1); }
  .cv-line, .cv-stem { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

  /* feltet bliver stående som ét stille billede i stedet for at forsvinde */
  .scroll-canvas { opacity: 0.55; }
  .progress { display: none; }
  .cases__viewport { scroll-behavior: auto; }
  .case-card, .case-card__img img, .cases__arrow, .nav__cta, .partners__badges img, .footer__prompt { transition: none; }
}