/* =========================================================================
   Proal — v2, ljust tema
   01 · Reset, tokens, typografi, layout

   Utgångspunkten är omvänd mot v1: vitt papper som grundton, mörka sektioner
   som accent i stället för tvärtom. Referens är ages.se, som kör vit botten,
   mörkgrå text i stället för svart, lätta stora rubriker och mycket luft.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li, dd, figcaption { overflow-wrap: break-word; }
/* Rubriker delas aldrig mitt i ett ord. De bryter vid mellanrum, och vid
   mjukt bindestreck (­) där sammansättningar har en naturlig fog. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: normal; word-break: normal; }
ul[class], ol[class] { list-style: none; padding: 0; }
:where(a) { color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
/* Klassregler med display: grid/flex vinner annars över UA:ns [hidden]. */
[hidden] { display: none !important; }

/* ---------- Tokens ----------
   Paletten kommer ur Proal Varumärkesmanual 1.0. Tre färger, inget mer:
   Grafit #14181A, Salvia #9AA8A6, Papper #E8ECEA.

   Fördelningen 70/20/10 gäller: grafit bär, papper andas, salvia pekar.
   I den ljusa versionen är papper arbetsytan – "ytor där innehållet ska
   läsas, inte imponera" – medan grafit bär header, sektionsband och CTA.

   Salvia har 2,07:1 mot papper och kan därför aldrig bära text mot ljust.
   Den lever som hårlinjer och markeringar, precis som manualen säger, och
   används som sekundär text bara mot grafit där den ligger på 7,25:1.
   ---------- */
:root {
  /* Paletten, oblandad */
  --grafit: #14181a;
  --salvia: #9aa8a6;
  --papper: #e8ecea;

  /* Blandningar av just dessa tre. Inga nya kulörer införs. */
  --papper-lo: #dde3e1;   /* 20 % salvia i papper – tonade band och ytor */
  --grafit-72: #4f5354;   /* 72 % grafit mot papper – dämpad brödtext, 6,0:1 */
  --grafit-65: #5e6263;   /* 65 % grafit mot papper – meta och etiketter, 5,1:1 */
  --salvia-45: #c5cdcb;   /* 45 % salvia mot papper – hårlinjer */
  --grafit-lift: #1b2022; /* grafit lyft – ytor i mörka sektioner */
  --grafit-hi: #25292b;   /* grafit lyft mer – ytor ovanpå ytor */
  --salvia-65: #6b7675;   /* salvia mot grafit – hårlinjer i mörkt */
  --salvia-80: #7f8b8a;   /* salvia mot grafit – dämpad text i mörkt, 5,2:1 */
  --grafit-line: #323637; /* hårlinje i mörka sektioner */

  /* Semantiska färger – ljust läge */
  --bg: var(--papper);
  --surface: var(--papper);
  --surface-2: var(--papper-lo);
  --fg: var(--grafit);
  --fg-strong: var(--grafit);
  --fg-dim: var(--grafit-72);
  --fg-mute: var(--grafit-65);
  --line: var(--salvia-45);
  --line-strong: var(--salvia);
  --accent: var(--grafit);
  --accent-fill: var(--grafit);
  --accent-fill-fg: var(--papper);
  --rule: var(--salvia);

  /* Enda färgen utanför manualens palett, och medvetet så: ett valideringsfel
     får inte signaleras med samma tre gråtoner som allt annat. Den används
     bara i formulär och aldrig som varumärkesuttryck. 5,6:1 mot papper. */
  --error: #a32c1f;

  /* Typsnitt enligt manualen. Barlow Condensed 600 bär rubriker, siffror,
     etiketter och all versal text. Barlow bär löptext och gränssnitt. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-label: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;

  /* Typskala. Barlow Condensed är smal, så rubrikerna tål mer storlek
     än den tidigare grotesken utan att bli skrikiga. */
  /* Spaltstyrd rubrikgrad. 12.5cqi är taket som gör att sajtens längsta
     sammansatta ord får plats utan att brytas; vw-fallbacken gäller bara
     utanför en container. */
  --fs-display: clamp(2.6rem, 6.4vw, 6rem);
  --fs-display-fluid: clamp(2.35rem, 12.5cqi, 6rem);
  --fs-h1-fluid: clamp(2.1rem, 10.5cqi, 4.4rem);
  --fs-h1: clamp(2.4rem, 5vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 3.4vw, 3rem);
  --fs-h3: clamp(1.3rem, 1.9vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 1.4vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 1.25vw, 1.3rem);
  --fs-body: clamp(1rem, 1vw, 1.0625rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  /* Rytm */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-y: clamp(4rem, 8vw, 8rem);

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 90rem;
  --maxw-text: 44rem;
  --maxw-wide: 76rem;

  /* Form. Raka hörn – manualens formspråk är rätvinkligt. */
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-pill: 999px;

  --shadow-s: none;
  --shadow-m: none;
  --shadow-l: 0 12px 40px -16px rgba(20, 24, 26, 0.28);

  /* Rörelse */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;

  --header-h: 5rem;

  color-scheme: light;
}

@media (max-width: 48rem) {
  :root { --header-h: 4.25rem; }
}

/* Grafitsektioner. Manualen ger grafit 70 % av ytan, så de är vanliga –
   header, CTA-band och ungefär var tredje sektion. */
.tone-dark {
  --bg: var(--grafit);
  --surface: var(--grafit-lift);
  --surface-2: var(--grafit-hi);
  --fg: var(--papper);
  --fg-strong: var(--papper);
  --fg-dim: var(--salvia);
  --fg-mute: var(--salvia-80);
  --line: var(--grafit-line);
  --line-strong: var(--salvia-65);
  --accent: var(--salvia);
  --accent-fill: var(--papper);
  --accent-fill-fg: var(--grafit);
  --rule: var(--salvia);
  --shadow-s: none;
  --shadow-m: none;
  --shadow-l: none;
  color-scheme: dark;
}

/* Speglar .tone-dark fullt ut. Sätter man bara --bg kan en ljus yta inne i en
   grafitsektion inte bryta tonen, och texten ärver mörkt lägets färger rakt in
   på en ljus botten. */
.tone-light {
  --bg: var(--papper);
  --surface: var(--papper);
  --surface-2: var(--papper-lo);
  --fg: var(--grafit);
  --fg-strong: var(--grafit);
  --fg-dim: var(--grafit-72);
  --fg-mute: var(--grafit-65);
  --line: var(--salvia-45);
  --line-strong: var(--salvia);
  --accent: var(--grafit);
  --accent-fill: var(--grafit);
  --accent-fill-fg: var(--papper);
  --rule: var(--salvia);
  --error: #a32c1f;
  color-scheme: light;
}
.tone-tint { --bg: var(--papper-lo); }
.tone-tint-2 { --bg: var(--papper); }

/* ---------- Bas ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--papper);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  overflow-x: clip;
}

::selection { background: var(--salvia); color: var(--grafit); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.tone-dark :focus-visible { outline-color: var(--salvia); }

/* ---------- Typografi ----------
   Manualen: Barlow Condensed 600 bär rubriker, siffror, etiketter och all
   versal text. Barlow bär löptext. Rubrikerna sätts versalgement som i
   manualen – versaler är reserverade för etiketter och små markeringar.
   ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-strong);
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.25; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-dim);
  text-wrap: pretty;
  max-width: 44ch;
}

.prose p { max-width: var(--maxw-text); color: var(--fg-dim); text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--fg-strong); font-weight: 700; }

/* Etikett. Manualens "salvia pekar" – linjen är salvia, texten grafit mot
   ljust och salvia mot grafit, eftersom salvia inte bär text mot papper. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--rule);
  flex: none;
}
.tone-dark .eyebrow { color: var(--salvia); }
.eyebrow--plain::before { display: none; }

/* Siffror och tekniska etiketter går i Barlow Condensed enligt manualen,
   inte i ett separat monospace-snitt. */
.mono {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-wide); }
.wrap--text { max-width: calc(var(--maxw-text) + var(--gutter) * 2); }

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
}
.section--flush { padding-block: 0; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-m) var(--gutter);
}
@media (max-width: 60rem) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-l) var(--gutter);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--line);
}
.section-head__title { margin-top: var(--space-s); }
.section-head .lead { max-width: 44ch; margin-bottom: 0.35rem; }
@media (max-width: 60rem) {
  .section-head { grid-template-columns: 1fr; align-items: start; gap: var(--space-m); }
}

/* ---------- Knappar ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.95em 1.6em;
  border-radius: 0;
  background: var(--accent-fill);
  color: var(--accent-fill-fg);
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover, .btn:focus-visible {
  background: var(--accent);
  color: var(--papper);
  transform: translateY(-1px);
  box-shadow: var(--shadow-m);
}
.btn:active { transform: translateY(0); }
.tone-dark .btn:hover, .tone-dark .btn:focus-visible { background: var(--salvia); color: var(--grafit); }

.btn__arrow { flex: none; width: 1em; height: 1em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(0.25em); }

.btn--ghost {
  background: transparent;
  color: var(--fg-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--fg-strong);
  color: var(--bg);
  box-shadow: none;
}

.btn--outline-accent {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn--outline-accent:hover, .btn--outline-accent:focus-visible {
  background: var(--accent);
  color: var(--papper);
  box-shadow: none;
}

.btn--lg { padding: 1.05em 1.9em; font-size: 1rem; }
.btn--sm { padding: 0.65em 1.1em; font-size: var(--fs-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* Textlänk med animerad underlinje */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 2px;
}
.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.link:hover::after, .link:focus-visible::after { transform-origin: left; transform: scaleX(1); }
.link--plain { color: var(--fg-strong); }
.link svg { width: 0.85em; height: 0.85em; transition: transform var(--dur) var(--ease-out); }
.link:hover svg { transform: translateX(0.2em); }

/* ---------- Hjälpklasser ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 1000;
  padding: 0.9rem 1.4rem;
  background: var(--grafit);
  color: var(--papper);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.text-accent { color: var(--accent); }
.text-dim { color: var(--fg-dim); }
.text-mute { color: var(--fg-mute); }
.hairline { height: 1px; background: var(--line); border: 0; }
.no-scroll { overflow: hidden; }

/* ---------- Bilder ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--papper);
  border-radius: var(--radius-l);
}
.media picture { display: block; width: 100%; height: 100%; }
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.media img.is-loaded { opacity: 1; }
.media__lqip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(1.1);
  transform: scale(1.08);
  transition: opacity 0.45s var(--ease-out) 0.1s;
}
.media.is-ready .media__lqip { opacity: 0; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--fill { position: absolute; inset: 0; border-radius: 0; }

/* ---------- Scroll-avslöjning ---------- */
/* Utgångslägena gäller bara med .js på <html>. Utan JavaScript visas allt. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 1.25rem), 0);
  transition:
    opacity 0.45s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.55s var(--ease-out) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal='fade'] { --reveal-y: 0; }
.js [data-reveal='left'] { transform: translate3d(-1.5rem, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(1.5rem, 0, 0); }
.js [data-reveal='scale'] { transform: scale(0.97); }
.js [data-reveal='scale'].is-in { transform: none; }

/* Maskerad radvis rubrikanimation */
.split { display: block; }
.split .line {
  display: block;
  overflow: hidden;
  padding: 0.2em 0 0.18em;
  margin: -0.2em 0 -0.18em;
}
.split .line > span {
  display: block;
  transform: translate3d(0, 130%, 0);
  transition: transform 0.62s var(--ease-out);
  transition-delay: calc(var(--line-i, 0) * 55ms);
  will-change: transform;
}
.split.is-in .line > span { transform: none; }

/* Bildmask som öppnas när elementet kommer in */
.js .clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--ease-out); }
.js .clip-reveal.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .split .line > span,
  .js .clip-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ---------- Sidövergångar ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.16s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 0.24s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(0.75rem); } }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0.01s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cursor, .consent { display: none !important; }
  [data-reveal], .split .line > span { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   Proal — v2, ljust tema
   02 · Komponenter
   ========================================================================= */

/* ---------------------------------------------------------------
   Header — vit och alltid synlig, till skillnad från v1 som gömde sig
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--papper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 16px -6px rgba(20, 24, 26, 0.18);
}

.site-header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* Logotyp. Låset är originalfilens vektorer; enda friheten som tas är
   färgen, som ärvs via currentColor. Ingen skugga, ingen kontur, ingen
   omritning – manualens felanvändningssida är tydlig med det.

   Märket är streckat, inte fyllt, så strecktjockleken skalar med höjden.
   Under omkring 26 px börjar de fyra koncentriska linjerna smälta ihop;
   headern ligger därför på 34 px och aldrig under 28. */
.logo {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  text-decoration: none;
  flex: none;
}
.logo__lockup {
  height: 2.125rem;
  width: auto;
  flex: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.logo:hover .logo__lockup { opacity: 0.68; }
@media (max-width: 40rem) { .logo__lockup { height: 1.85rem; } }

/* Hela låset med taglinjen. 5,5 rem ger CASTING SYSTEM SUPPLIER omkring 6 px,
   vilket är gränsen för läsbarhet. Gå inte under. */
.logo--full .logo__lockup { height: 5.5rem; }

/* Huvudmeny */
.nav { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1.5rem); }
@media (max-width: 68rem) { .nav--main { display: none; } }

.nav__link {
  position: relative;
  padding: 0.45rem 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--salvia);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--fg-strong); }
.nav__link:hover::after { transform-origin: left; transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--fg-strong); font-weight: 700; }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--space-s); }
@media (max-width: 40rem) { .header__cta { display: none; } }

/* Språkväljare */
.lang {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--line);
}
.lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.28rem 0.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.lang__item:hover { color: var(--fg-strong); }
.lang__item[aria-current='true'] { background: var(--grafit); color: var(--papper); }
.tone-dark .lang__item[aria-current='true'] { background: var(--papper); color: var(--grafit); }

/* Hamburgare */
.burger {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
@media (max-width: 68rem) { .burger { display: inline-flex; } }
.burger__lines { position: relative; width: 1.1rem; height: 0.55rem; }
.burger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--grafit);
  transition: transform var(--dur) var(--ease-out);
}
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 100%; }
.site-header.is-open .burger__lines span:nth-child(1) { transform: translateY(0.275rem) rotate(45deg); }
.site-header.is-open .burger__lines span:nth-child(2) { transform: translateY(-0.275rem) rotate(-45deg); }

/* Fullskärmsmeny */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: center;
  background: var(--surface);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  clip-path: circle(0% at calc(100% - 4rem) 2.5rem);
  transition: clip-path 0.65s var(--ease-out);
  visibility: hidden;
  overflow-y: auto;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 4rem) 2.5rem); visibility: visible; }
.menu__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-2xl) var(--gutter);
}
@media (max-width: 60rem) { .menu__inner { grid-template-columns: 1fr; gap: var(--space-xl); } }

.menu__list { display: grid; gap: 0.1rem; }
.menu__item { overflow: hidden; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.24em 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--fg-strong);
  text-decoration: none;
  transform: translateY(105%);
  transition: transform 0.6s var(--ease-out), color var(--dur-fast);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.menu.is-open .menu__link { transform: none; }
.menu__link:hover { color: var(--accent); }
.menu__link .num {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  transform: translateY(-0.4em);
}
.menu__link[aria-current='page'] { color: var(--accent); }

.menu__aside { display: grid; gap: var(--space-l); align-content: start; padding-top: 0.75rem; }
.menu__group-title {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-xs);
}
.menu__sub { display: grid; gap: 0.4rem; }
.menu__sub a { color: var(--fg-dim); text-decoration: none; font-size: var(--fs-sm); transition: color var(--dur-fast); }
.menu__sub a:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   Hero — ljus variant. Bilden är inramad i stället för helskärm,
   vilket håller texten på papper och gör den lättläst.
   --------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); background: var(--bg); }
.hero__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
/* Måttet sitter på containern, inte på rubriken. Sitter det på rubriken
   mäter cqi en bredare spalt än texten faktiskt får, och grafen blir för
   stor. Rem, inte ch: ett ch-mått skalar med grafen och låser kvoten
   ord/utrymme — det var så ordet kunde klippas vid varje bredd. */
.hero__col { container-type: inline-size; }
@media (min-width: 48rem) and (max-width: 67.99rem) { .hero__col { max-width: 34rem; } }
.hero__title {
  font-size: var(--fs-display-fluid);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.04;
  max-width: none;
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-l) var(--gutter);
  align-items: end;
}
@media (max-width: 68rem) { .hero__row { grid-template-columns: 1fr; } }
.hero__lead { font-size: var(--fs-lead); color: var(--fg-dim); max-width: 46ch; }
.hero__actions { margin-top: var(--space-m); }

/* Bildbandet under rubriken */
.hero__media { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--surface); }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero__media--tall { aspect-ratio: 21 / 9; }
@media (max-width: 60rem) { .hero__media--tall { aspect-ratio: 16 / 10; } }
.hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-out); }
.hero__video.is-playing { opacity: 1; }

/* ---------------------------------------------------------------
   Kompetensrad — det AGES gör direkt under hero:n
   --------------------------------------------------------------- */
.caps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 60rem) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .caps { grid-template-columns: 1fr; } }
.cap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(0.75rem, 1.6vw, 1.5rem);
  border-right: 1px solid var(--line);
  color: var(--fg-strong);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.cap:last-child { border-right: 0; }
.cap:hover { background: var(--surface-2); }
@media (max-width: 60rem) {
  .cap { border-bottom: 1px solid var(--line); }
  .cap:nth-child(2n) { border-right: 0; }
}
.cap__icon { width: 2rem; height: 2rem; color: var(--accent); }
.cap__icon svg { width: 100%; height: 100%; }
.cap__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); }
.cap__text { font-size: var(--fs-xs); color: var(--fg-mute); line-height: 1.5; }

/* ---------------------------------------------------------------
   Sidhero — kompakt, med brödsmulor
   --------------------------------------------------------------- */
.page-hero { position: relative; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); background: var(--bg); }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-l) var(--gutter);
  align-items: end;
}
@media (max-width: 68rem) { .page-hero__grid { grid-template-columns: 1fr; } }
.page-hero__col { container-type: inline-size; }
.page-hero__title { margin-top: var(--space-s); font-size: var(--fs-h1-fluid); }
.page-hero .lead { max-width: 46ch; }
.page-hero__media { margin-top: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-l); overflow: hidden; }
.page-hero__media picture { display: block; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Brödsmulor */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.crumbs a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: flex; align-items: center; gap: 0.45rem; }
.crumbs li + li::before { content: '/'; opacity: 0.45; }
.crumbs [aria-current] { color: var(--fg-dim); }

/* ---------------------------------------------------------------
   Nyckeltal
   --------------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
@media (max-width: 60rem) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figure { background: var(--bg); padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.75rem); }
.figure__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
}
.figure__value .figure__unit { color: var(--accent); font-size: 0.48em; letter-spacing: 0; }
.figure__label { display: block; margin-top: 0.7rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--fg-mute); max-width: 22ch; }

/* ---------------------------------------------------------------
   Löpande band
   --------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  background: var(--surface-2);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: clamp(2rem, 4.5vw, 4rem); flex: none; will-change: transform; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--fg-dim);
}
.marquee__item::after { content: ''; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--salvia); flex: none; }

/* ---------------------------------------------------------------
   Värdekedjan
   --------------------------------------------------------------- */
.chain { position: relative; background: var(--bg); }
.chain__track { position: relative; }
.chain__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--header-h); }
.chain__head { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.chain__progress { width: 100%; max-width: var(--maxw); margin: 0 auto clamp(1rem, 2.5vw, 1.75rem); padding-inline: var(--gutter); }
.chain__bar { position: relative; height: 2px; background: var(--line); }
.chain__bar span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--accent); }
.chain__rail { display: flex; gap: clamp(1rem, 2vw, 1.5rem); padding-inline: var(--gutter); will-change: transform; }
.chain__card {
  flex: none;
  width: min(28rem, 78vw);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  /* Följer sektionens ton. Hårdkodad papperyta här gjorde rubrikerna
     osynliga när värdekedjan blev en grafitsektion. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.chain__card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.chain__num { font-family: var(--font-label);
  font-weight: 500; font-size: 0.72rem; letter-spacing: 0.13em; color: var(--accent); }
.chain__card h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.chain__card p { color: var(--fg-dim); font-size: var(--fs-sm); text-wrap: pretty; }
.chain__icon { margin-top: auto; padding-top: var(--space-m); }
.chain__icon svg { width: 2.25rem; height: 2.25rem; color: var(--accent); }

@media (max-width: 60rem) {
  .chain__track { height: auto !important; }
  .chain__sticky { position: static; height: auto; padding-block: var(--section-y) 0; }
  .chain__rail { flex-direction: column; transform: none !important; padding-bottom: var(--section-y); }
  .chain__card { width: 100%; }
  .chain__progress { display: none; }
}

/* ---------------------------------------------------------------
   Kort
   --------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.cards--2 { grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 60rem) { .cards--3 { grid-template-columns: 1fr; } }

@media (min-width: 60rem) {
  .cards--split5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards--split5 > * { grid-column: span 2; }
  .cards--split5 > *:nth-child(4), .cards--split5 > *:nth-child(5) { grid-column: span 3; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: transparent; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.2rem, 2vw, 1.6rem); flex: 1; }
.card__tag { align-self: flex-start; font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--fg-dim); font-size: var(--fs-sm); text-wrap: pretty; }
.card__foot {
  margin-top: auto;
  padding-top: var(--space-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-xs);
  color: var(--fg-mute);
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.card__arrow {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-strong);
  transition: background-color var(--dur) var(--ease-out), color var(--dur), transform var(--dur);
}
.card__arrow svg { width: 0.8rem; height: 0.8rem; }
.card:hover .card__arrow { background: var(--salvia); color: var(--grafit); transform: rotate(45deg); }

/* Branschkort med bild och mörk botten */
.ind-card {
  position: relative;
  min-height: clamp(19rem, 30vw, 25rem);
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  color: var(--papper);
  isolation: isolate;
}
.ind-card__media { position: absolute; inset: 0; z-index: -2; }
.ind-card__media picture { display: block; width: 100%; height: 100%; }
.ind-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ind-card:hover .ind-card__media img { transform: scale(1.05); }
.ind-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 24, 26, 0.94) 4%, rgba(20, 24, 26, 0.45) 48%, rgba(20, 24, 26, 0.08) 100%);
}
.ind-card__body { padding: clamp(1.2rem, 2.2vw, 1.85rem); display: grid; gap: 0.55rem; width: 100%; }
.ind-card__title { font-size: clamp(1.2rem, 1.9vw, 1.65rem); color: var(--papper); }
.ind-card__text { color: rgba(232, 236, 234, 0.78); font-size: var(--fs-sm); max-width: 34ch; }
.ind-card__go { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--salvia); font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; margin-top: 0.3rem; }
.ind-card__go svg { width: 0.8em; height: 0.8em; transition: transform var(--dur) var(--ease-out); }
.ind-card:hover .ind-card__go svg { transform: translateX(0.25em); }

/* ---------------------------------------------------------------
   Anläggningskort — v2:s viktigaste nya komponent
   --------------------------------------------------------------- */
.units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 60rem) { .units { grid-template-columns: 1fr; } }

.unit {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.unit:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.unit__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.unit__media picture { display: block; width: 100%; height: 100%; }
.unit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.unit:hover .unit__media img { transform: scale(1.04); }
.unit__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; gap: 0.7rem; flex: 1; }
.unit__country { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.unit__name { font-size: var(--fs-h3); }
.unit__role { font-size: var(--fs-sm); color: var(--fg-dim); }
.unit__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.unit__fact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}
.unit__fact strong { color: var(--fg-strong); font-weight: 600; }
.unit__go { margin-top: auto; padding-top: var(--space-s); display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }
.unit__go svg { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease-out); }
.unit:hover .unit__go svg { transform: translateX(0.25em); }

/* Faktaruta på en anläggningssida */
.unit-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.unit-facts > div { background: var(--surface); padding: clamp(1rem, 1.8vw, 1.4rem); display: grid; gap: 0.3rem; }
.unit-facts dt { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.unit-facts dd { font-size: var(--fs-h4); font-weight: 700; color: var(--fg-strong); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Split — bild + text
   --------------------------------------------------------------- */
.split-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3.5rem) var(--gutter); align-items: center; }
.split-block__media { grid-column: 1 / span 6; grid-row: 1; }
.split-block__body { grid-column: 8 / -1; grid-row: 1; display: grid; gap: var(--space-s); align-content: start; }
.split-block--rev .split-block__media { grid-column: 7 / span 6; grid-row: 1; }
.split-block--rev .split-block__body { grid-column: 1 / span 5; grid-row: 1; }
@media (max-width: 60rem) {
  .split-block { grid-template-columns: 1fr; }
  .split-block__media, .split-block__body,
  .split-block--rev .split-block__media, .split-block--rev .split-block__body { grid-column: 1 / -1; grid-row: auto; }
}
.split-block__list { display: grid; gap: 0.5rem; margin-top: var(--space-xs); }
.split-block__list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--fg-dim); font-size: var(--fs-sm); }
.split-block__list li::before { content: ''; width: 0.4rem; height: 0.4rem; margin-top: 0.55em; border-radius: 50%; background: var(--salvia); flex: none; }

/* ---------------------------------------------------------------
   Specifikationer och listor
   --------------------------------------------------------------- */
.specs { border-top: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-s); padding: clamp(0.8rem, 1.5vw, 1.15rem) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 40rem) { .specs__row { grid-template-columns: 1fr; gap: 0.2rem; } }
.specs__label { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); padding-top: 0.25em; }
.specs__value { font-size: var(--fs-sm); color: var(--fg-strong); font-variant-numeric: tabular-nums; }

.check-list { display: grid; gap: 0.65rem; }
.check-list li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--fg-dim); font-size: var(--fs-sm); }
.check-list li svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.3em; color: var(--accent); }

/* ---------------------------------------------------------------
   Maskinparkstabeller
   --------------------------------------------------------------- */
.machine-group + .machine-group { margin-top: clamp(2.25rem, 4.5vw, 4rem); }
.machine-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-s); padding-bottom: var(--space-s); border-bottom: 2px solid var(--grafit); }
.machine-group__note { font-size: var(--fs-xs); color: var(--fg-mute); font-family: var(--font-label);
  font-weight: 500; }
.machine-table { font-variant-numeric: tabular-nums; }
.machine-table th { text-align: left; font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; padding: var(--space-s) 0; border-bottom: 1px solid var(--line); }
.machine-table td { padding: clamp(0.7rem, 1.3vw, 1rem) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.machine-table td:first-child { font-weight: 700; color: var(--fg-strong); }
.machine-table td:last-child, .machine-table th:last-child { text-align: right; color: var(--fg-dim); }
.machine-table tbody tr { transition: background-color var(--dur-fast); }
.machine-table tbody tr:hover { background: var(--surface-2); }
.machine-table .spec { color: var(--fg-dim); }

/* ---------------------------------------------------------------
   Tidslinje
   --------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); padding-left: clamp(1.5rem, 3.5vw, 3rem); }
.timeline::before { content: ''; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--line); }
.timeline::after { content: ''; position: absolute; left: 0; top: 0.6rem; width: 2px; height: calc(var(--p, 0) * (100% - 1.2rem)); background: var(--salvia); }
.timeline__item { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-m) clamp(1rem, 2vw, 2rem); align-items: start; }
@media (max-width: 48rem) { .timeline__item { grid-template-columns: 1fr; gap: 0.4rem; } }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 3.5vw, 3rem));
  top: 0.5rem;
  width: 10px;
  height: 10px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur);
}
.timeline__item.is-in::before { background: var(--salvia); box-shadow: 0 0 0 4px var(--surface-2); }
.timeline__year { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; color: var(--fg-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.timeline__body h3 { font-size: var(--fs-h4); margin-bottom: 0.35rem; }
.timeline__body p { color: var(--fg-dim); font-size: var(--fs-sm); max-width: 52ch; text-wrap: pretty; }
.timeline__item[data-pending] .timeline__body p { color: var(--fg-mute); font-style: italic; }

/* ---------------------------------------------------------------
   Pelare och processteg
   --------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
@media (max-width: 60rem) { .pillars { grid-template-columns: 1fr; } }
.pillar { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-m); border-top: 2px solid var(--grafit); }
.pillar__n { font-family: var(--font-label);
  font-weight: 500; font-size: 0.72rem; letter-spacing: 0.13em; color: var(--accent); }
.pillar h3 { font-size: var(--fs-h3); }
.pillar p { color: var(--fg-dim); font-size: var(--fs-sm); text-wrap: pretty; }

.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-s) var(--gutter); padding: clamp(1.1rem, 2.2vw, 1.75rem) 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background-color var(--dur-fast); }
.step:hover { background: var(--surface-2); }
@media (max-width: 60rem) { .step { grid-template-columns: 2.5rem 1fr; } .step p { grid-column: 2; } }
.step__n { font-family: var(--font-label);
  font-weight: 500; font-size: 0.72rem; color: var(--accent); letter-spacing: 0.1em; }
.step h3 { font-size: var(--fs-h4); }
.step p { color: var(--fg-dim); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------
   Certifikat och dokument
   --------------------------------------------------------------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.cert { display: grid; gap: 0.45rem; padding: clamp(1.25rem, 2.2vw, 1.85rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-s); }
.cert__badge { display: inline-grid; place-items: center; width: 2.85rem; height: 2.85rem; border-radius: 50%; background: var(--surface-2); color: var(--accent); margin-bottom: var(--space-2xs); }
.cert__badge svg { width: 1.3rem; height: 1.3rem; }
.cert__std { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.cert__meta { display: grid; gap: 0.15rem; font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-xs); color: var(--fg-mute); }

.doc-list { display: grid; border-top: 1px solid var(--line); }
.doc { display: flex; align-items: center; gap: var(--space-s); padding: clamp(0.85rem, 1.7vw, 1.25rem) 0; border-bottom: 1px solid var(--line); color: var(--fg-strong); text-decoration: none; transition: padding-left var(--dur) var(--ease-out), color var(--dur-fast); }
.doc:hover { padding-left: 0.6rem; color: var(--accent); }
.doc__icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--fg-mute); }
.doc__label { font-weight: 500; }
.doc__meta { margin-left: auto; font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-xs); color: var(--fg-mute); letter-spacing: 0.06em; }
.doc[data-pending] { pointer-events: none; opacity: 0.5; }

/* ---------------------------------------------------------------
   Notisruta
   --------------------------------------------------------------- */
.notice { display: flex; gap: var(--space-s); padding: clamp(1rem, 1.8vw, 1.4rem); border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--fg-dim); }
.notice svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.15em; color: var(--accent); }
.notice--accent { border-color: var(--salvia); background: var(--surface-2); }
.notice--draft { border-style: dashed; }

/* ---------------------------------------------------------------
   Kontakt
   --------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.contact-card { display: grid; gap: 0.35rem; align-content: start; padding: clamp(1.3rem, 2.2vw, 1.85rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); transition: box-shadow var(--dur), transform var(--dur) var(--ease-out); }
.contact-card:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); }
.contact-card__avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: var(--space-2xs); }
.contact-card__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.contact-card__role { font-size: var(--fs-xs); color: var(--fg-mute); font-family: var(--font-label);
  font-weight: 500; letter-spacing: 0.03em; margin-bottom: 0.45rem; }
.contact-card a { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--fg-dim); text-decoration: none; transition: color var(--dur-fast); }
.contact-card a:hover { color: var(--accent); }
.contact-card a svg { width: 0.9rem; height: 0.9rem; flex: none; opacity: 0.55; }

.plant { display: grid; gap: var(--space-m); padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); align-content: start; }
.plant__flag { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.plant__name { font-size: var(--fs-h3); }
.plant__rows { display: grid; gap: 0.7rem; }
.plant__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.7rem; font-size: var(--fs-sm); }
@media (max-width: 40rem) { .plant__row { grid-template-columns: 1fr; gap: 0.1rem; } }
.plant__row dt { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-mute); padding-top: 0.3em; }
.plant__row dd { color: var(--fg-dim); }
.plant__row a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color var(--dur-fast), border-color var(--dur-fast); }
.plant__row a:hover { color: var(--accent); border-color: currentColor; }

/* ---------------------------------------------------------------
   Formulär
   --------------------------------------------------------------- */
.form { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.fieldset { display: grid; gap: var(--space-m); border: 0; padding: 0; }
.fieldset__legend { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding-bottom: var(--space-s); border-bottom: 1px solid var(--line); font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 48rem) { .field-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label, .field .field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-strong); display: flex; gap: 0.4rem; align-items: baseline; }
.field label .req, .field .req { color: var(--accent); }
.field label .opt, .field .opt { color: var(--fg-mute); font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: 0.06em; font-weight: 600; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--fg-strong);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--grafit-65); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--grafit-65); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--surface-2); }
.textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f666e' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.05rem;
  padding-right: 2.6rem;
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--error); }
.field__error { font-size: var(--fs-xs); color: var(--error); display: none; }
.field.has-error .field__error { display: block; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: var(--fs-xs); color: var(--fg-dim); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); user-select: none; }
.choice span::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line-strong); transition: background-color var(--dur-fast), transform var(--dur-fast); }
.choice:hover span { border-color: var(--grafit-65); color: var(--fg-strong); }
.choice input:checked + span { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.choice input:checked + span::before { background: var(--accent); transform: scale(1.25); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.checkbox { display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer; font-size: var(--fs-sm); color: var(--fg-dim); }
.checkbox input { position: absolute; opacity: 0; }
.checkbox__box { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.15em; border-radius: 0; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; transition: all var(--dur-fast) var(--ease-out); }
.checkbox__box svg { width: 0.7rem; height: 0.7rem; color: var(--grafit); opacity: 0; transform: scale(0.5); transition: all var(--dur-fast) var(--ease-spring); }
.checkbox input:checked + .checkbox__box { background: var(--salvia); border-color: var(--salvia); }
.checkbox input:checked + .checkbox__box svg { opacity: 1; transform: none; }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.checkbox a { color: var(--accent); }

.dropzone { display: grid; place-items: center; gap: 0.45rem; padding: clamp(1.6rem, 3.5vw, 2.75rem); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-l); background: var(--surface-2); text-align: center; transition: border-color var(--dur-fast), background-color var(--dur-fast); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--surface-2); }
.dropzone svg { width: 1.75rem; height: 1.75rem; color: var(--fg-mute); }
.dropzone__text { font-size: var(--fs-sm); color: var(--fg-dim); }
.dropzone__text button { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.dropzone__hint { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.05em; color: var(--fg-mute); }
.file-list { display: grid; gap: 0.45rem; margin-top: var(--space-s); }
.file-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); font-size: var(--fs-xs); }
.file-item__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item__size { color: var(--fg-mute); font-family: var(--font-label);
  font-weight: 500; margin-left: auto; flex: none; }
.file-item__remove { color: var(--fg-mute); flex: none; transition: color var(--dur-fast); }
.file-item__remove:hover { color: var(--error); }
.file-item__remove svg { width: 0.85rem; height: 0.85rem; }

.form-success { display: grid; gap: var(--space-s); justify-items: start; padding: clamp(1.75rem, 3.5vw, 2.75rem); border: 1px solid var(--salvia); border-radius: var(--radius-l); background: var(--surface-2); }
.form-success__icon { width: 2.85rem; height: 2.85rem; display: grid; place-items: center; border-radius: 50%; background: var(--salvia); color: var(--grafit); }
.form-success__icon svg { width: 1.3rem; height: 1.3rem; }

/* ---------------------------------------------------------------
   CTA-band — mörkt i v2, som kontrast mot det ljusa
   --------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--bg); color: var(--fg); isolation: isolate; }
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Enda tillåtna kulören utöver grafit är salvia, och bara som antydan. */
  background: radial-gradient(65% 110% at 12% 100%, rgba(154, 168, 166, 0.16) 0%, transparent 62%);
}
.cta-band__texture { position: absolute; inset: 0; z-index: -2; opacity: 0.14; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.cta-band__texture picture { display: block; width: 100%; height: 100%; }
.cta-band__texture img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-l) var(--gutter); align-items: end; }
@media (max-width: 60rem) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band__title { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 600; color: var(--fg-strong); margin-top: var(--space-s); }
.cta-band .eyebrow { color: var(--salvia); }
.cta-band .eyebrow::before { background: currentColor; }
.cta-band .lead { color: rgba(232, 236, 234, 0.76); }
.cta-band__note { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-xs); color: rgba(232, 236, 234, 0.5); margin-top: var(--space-m); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer { background: var(--bg); color: var(--fg); padding-top: clamp(3rem, 6vw, 5rem); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gutter); padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
@media (max-width: 78rem) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .footer__top { grid-template-columns: 1fr; gap: var(--space-l); } }
.footer__brand { display: grid; gap: var(--space-m); align-content: start; }
.footer__tagline { color: var(--fg-dim); font-size: var(--fs-sm); max-width: 34ch; }
.footer__col-title { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: var(--space-s); }
.footer__links { display: grid; gap: 0.5rem; }
.footer__links a { color: var(--fg-dim); text-decoration: none; font-size: var(--fs-sm); transition: color var(--dur-fast); }
.footer__links a:hover { color: var(--accent); }

.footer__plants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--gutter); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--line); }
@media (max-width: 48rem) { .footer__plants { grid-template-columns: 1fr; } }
.footer__plant { display: grid; gap: 0.25rem; font-size: var(--fs-sm); color: var(--fg-dim); font-style: normal; }
.footer__plant strong { color: var(--fg-strong); font-weight: 700; }
.footer__plant a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.footer__plant a:hover { color: var(--accent); }

.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-m); padding-block: var(--space-m) var(--space-l); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--fg-mute); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.footer__bottom a, .footer__bottom button { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.footer__bottom a:hover, .footer__bottom button:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   Cookie-samtycke
   --------------------------------------------------------------- */
.consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 200;
  width: min(30rem, calc(100vw - var(--gutter) * 2));
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-l);
  display: grid;
  gap: var(--space-s);
  transform: translateY(calc(100% + var(--gutter) + 1rem));
  transition: transform 0.6s var(--ease-out);
}
.consent.is-open { transform: none; }
.consent__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--fg-strong); }
.consent__body { font-size: var(--fs-xs); color: var(--fg-dim); line-height: 1.55; }
.consent__body a { color: var(--accent); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; }
.consent__details { display: grid; gap: 0.7rem; margin-top: var(--space-2xs); }
.consent__cat { display: grid; gap: 0.25rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.consent__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent__cat-title { font-size: var(--fs-sm); font-weight: 700; color: var(--fg-strong); }
.consent__cat p { font-size: var(--fs-label); color: var(--fg-mute); line-height: 1.5; }
.consent__always { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.09em; color: var(--fg-mute); }

.toggle { position: relative; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { display: block; width: 2.4rem; height: 1.35rem; border-radius: var(--radius-pill); background: var(--salvia); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.toggle__track::after { content: ''; display: block; width: 1rem; height: 1rem; margin: 0.175rem; border-radius: 50%; background: var(--surface); transition: transform var(--dur-fast) var(--ease-spring); }
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(1.05rem); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------
   Nyheter, case, undernav
   --------------------------------------------------------------- */
.news-filter { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.news-filter button { padding: 0.5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-dim); transition: all var(--dur-fast) var(--ease-out); }
.news-filter button:hover { color: var(--fg-strong); border-color: var(--grafit-65); }
.news-filter button[aria-pressed='true'] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-fill-fg); }

.article { display: grid; gap: var(--space-m); max-width: var(--maxw-text); }
.article p { color: var(--fg-dim); text-wrap: pretty; }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-m); font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-xs); color: var(--fg-mute); letter-spacing: 0.06em; }

.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m) var(--gutter); padding-block: clamp(2.25rem, 4.5vw, 4rem); border-top: 1px solid var(--line); }
.case__tag { grid-column: 1 / -1; }
.case__title { grid-column: 1 / span 5; font-size: var(--fs-h2); }
.case__cols { grid-column: 7 / -1; display: grid; gap: var(--space-m); }
@media (max-width: 68rem) { .case__title, .case__cols { grid-column: 1 / -1; } }
.case__block h4 { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; font-weight: 500; }
.case__block p { color: var(--fg-dim); font-size: var(--fs-sm); text-wrap: pretty; }
.case__facts { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.case__fact { display: grid; gap: 0.15rem; }
.case__fact dt { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-mute); }
.case__fact dd { font-size: var(--fs-sm); font-weight: 700; color: var(--fg-strong); }

.subnav { display: flex; flex-wrap: wrap; gap: 0.45rem; padding-block: var(--space-m); }
.subnav a { padding: 0.5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--fg-dim); text-decoration: none; transition: all var(--dur-fast) var(--ease-out); white-space: nowrap; }
.subnav a:hover { border-color: var(--grafit-65); color: var(--fg-strong); }
.subnav a[aria-current='page'] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-fill-fg); }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 48rem) { .pager { grid-template-columns: 1fr; } }
.pager--single { grid-template-columns: 1fr; }
.pager a { display: grid; gap: 0.3rem; padding: clamp(1.4rem, 2.8vw, 2.25rem); background: var(--bg); color: var(--fg-strong); text-decoration: none; transition: background-color var(--dur); }
.pager a:hover { background: var(--surface-2); }
.pager:not(.pager--single) .pager__next { text-align: right; }
.pager__label { font-family: var(--font-label);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-mute); }
.pager__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }

/* ---------------------------------------------------------------
   Egen markör
   --------------------------------------------------------------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 9998; width: 1.9rem; height: 1.9rem; margin: -0.95rem 0 0 -0.95rem; border-radius: 50%; border: 1px solid var(--line-strong); pointer-events: none; opacity: 0; transition: opacity 0.3s, width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s, border-color 0.3s, margin 0.3s var(--ease-out); will-change: transform; }
.cursor.is-visible { opacity: 1; }
.cursor.is-hover { width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; background: rgba(154, 168, 166, 0.28); border-color: var(--salvia); }
.cursor__dot { position: absolute; inset: 50% auto auto 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--fg); transition: opacity 0.3s; }
.cursor.is-hover .cursor__dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

[data-parallax] { will-change: transform; }
.zoom-media img { transform: scale(var(--zoom, 1)); will-change: transform; }