/* =========================================================
   Viljar Rystad — designtokens (varm presisjon)
   Kun Inter. Ingen serif, ingen Fraunces.
   ========================================================= */

/* Selvhostet Inter (latin + latin-ext), ingen tredjeparts-request */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Selvhostet Fraunces (kun to roller: sitater + de to store tallene) */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 360;
  font-display: swap;
  src: url("fonts/fraunces-italic-360-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 360;
  font-display: swap;
  src: url("fonts/fraunces-italic-360-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Kjernefarger (7, låst; ingen nye farger) */
  --vr-paper:  #FAF8F4;
  --vr-cream:  #F4EEE5;
  --vr-ink:    #26221C;
  --vr-teal:   #3F6E71;
  --vr-teal-2: #5D9194;
  --vr-sage:   #90B9B0;
  --vr-sand:   #D0B68C;

  /* Semantiske roller */
  --fg-1:        var(--vr-ink);
  --fg-2:        color-mix(in oklab, var(--vr-ink) 72%, var(--vr-paper));
  --fg-3:        color-mix(in oklab, var(--vr-ink) 52%, var(--vr-paper));
  --fg-on-dark:  var(--vr-paper);
  --bg:              var(--vr-paper);
  --surface-card:    #FFFFFF;
  --surface-2:       var(--vr-cream);
  --surface-dark:    var(--vr-ink);
  --surface-evidens: color-mix(in oklab, var(--vr-teal) 6%, var(--vr-paper));
  --accent:          var(--vr-teal);
  --accent-hover:    var(--vr-teal-2);
  --accent-on-dark:  var(--vr-sage);

  /* Hairlines fremfor skygger */
  --border-hair: color-mix(in oklab, var(--vr-ink) 14%, transparent);
  --border-soft: color-mix(in oklab, var(--vr-ink) 26%, transparent);
  --border-firm: color-mix(in oklab, var(--vr-ink) 46%, transparent);

  /* Typefamilier: Inter (evidens/tekst) + Fraunces (kun sitater + to store tall) */
  --font-tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-tese:  "Fraunces", Georgia, serif;

  /* Typeskala (lukket, ingen frie størrelser) */
  --fs-display: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  --fs-hero:    clamp(3.25rem, 2.4rem + 4vw, 6rem);
  --fs-stat:    clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3:      1.25rem;
  --fs-manifest: clamp(1.375rem, 1.05rem + 1.2vw, 2rem);
  --fs-lede:    1.1875rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --lh-tight: 1.12; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65;
  --tracking-tight: -0.015em;
  --tracking-eyebrow: 0.16em;
  --tracking-wordmark: 0.14em;

  /* Radier (stramme; aldri pille, ingen radius over 16px) */
  --radius-btn:  8px;
  --radius-card: 12px;
  --radius-img:  12px;

  /* Luft (8pt-skala) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* Skygge (en, knapt synlig; foretrekk hairline) */
  --shadow-1: 0 1px 2px color-mix(in oklab, var(--vr-ink) 7%, transparent);

  /* Bevegelse */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms; --dur-2: 300ms; --dur-3: 600ms;
}

/* =========================================================
   Reset (minimal)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-tekst);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* =========================================================
   Typografi
   ========================================================= */
h1 {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: balance;
  margin: 0;
}
h2 { font-family: var(--font-tekst); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0; }
h3 { font-family: var(--font-tekst); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; }
p { max-width: 65ch; text-wrap: pretty; margin: 0; }
.lede { font-size: var(--fs-lede); line-height: 1.55; }
small, .small { font-size: var(--fs-small); color: var(--fg-2); }

/* Tall: alltid tabular (30–50 %, 12 mnd → 3 mnd) */
.tall { font-variant-numeric: tabular-nums; }

/* Ordmerket: VILJAR RYSTAD i sperret Inter */
.wordmark {
  font-family: var(--font-tekst);
  font-weight: 500;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  font-size: var(--fs-small);
}
a.wordmark:hover { color: var(--fg-1); text-decoration: none; }

/* Lenker: teal med underlinje */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--vr-teal) 45%, transparent);
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }

/* Pil-lenker: pilen glir 3px til høyre ved hover (kun glyffen, ikke teksten) */
.arrow-glide {
  display: inline-block;
  transition: transform var(--dur-1) var(--ease-out);
}
a:hover .arrow-glide { transform: translateX(3px); }

/* Synlig fokusring (tastaturnavigasjon): knapp og lenker */
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Markering: salvie */
::selection { background: var(--vr-sage); color: var(--vr-ink); }

/* =========================================================
   Layout
   ========================================================= */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
@media (min-width: 640px) {
  .wrap { padding-left: var(--space-7); padding-right: var(--space-7); }
}

main { display: block; }

section { padding-top: 9rem; padding-bottom: 9rem; }
section.is-surface-2 { background: var(--surface-2); }
section.is-surface-evidens { background: var(--surface-evidens); }

/* Disse klassene deler ÉN div med .wrap (samme element har begge klasser i
   HTML-en). De setter derfor bevisst INGEN egen max-width/margin lenger:
   .wrap alene eier sentrering (max-width 1200px, margin:0 auto), og enhver
   snevrere max-width her ville arvet wrap sin auto-margin og sentrert en
   SMALERE boks i stedet for å dele venstrekanten — verifisert som reelt
   avvik med getBoundingClientRect (328px/48px vs. 88px i header/footer)
   under visuell sjekk. Den smalere lesekolonnen oppnås i stedet av
   elementene selv (p, h1 osv. har alt egne ch-baserte max-width), pluss et
   par navngitte komponent-capper under (.process-diagram m.fl.). Resultat:
   ETHVERT element med .wrap — med eller uten section-inner — resolver til
   nøyaktig samme boks, så venstrekanten kan aldri drifte. */
.section-inner { }
.section-inner--wide { }
.section-inner--split { }

section > .wrap > * + *,
.section-inner > * + * { margin-top: var(--space-5); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-3); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--vr-paper) 100%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              backdrop-filter var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--vr-paper) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border-hair);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.site-nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.site-nav a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--fg-1);
  border-bottom-color: var(--border-soft);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
}
/* (hero-innholdet capper seg selv: h1 er 18ch, hero p er 52ch) */
.hero p {
  font-family: var(--font-tekst);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 52ch;
}
.hero > .wrap > * + * { margin-top: var(--space-5); }

/* Asymmetrisk hero (forsiden + arbeidsløpet, desktop-grep 27.8/28.8):
   H1 i kol. 1–8, de tre avsnittene som smal høyrekolonne i kol. 9–12,
   toppen forankret mot H1-toppen. Under 900px: uendret stabling. */
.hero-split__aside > * + * { margin-top: var(--space-5); }
@media (min-width: 900px) {
  .hero-split {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-7);
    align-items: start;
  }
  .hero-split > h1 { grid-column: 1 / 9; margin: 0; }
  .hero-split__aside {
    grid-column: 9 / 13;
    margin-top: 0 !important;
  }
  .hero-split__aside p { max-width: 30ch; }
}

/* =========================================================
   Bevisblokk (forsiden)
   ========================================================= */
.proof-strip {
  position: relative;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.proof-strip::before,
.proof-strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}
.proof-strip::before { top: 0; }
.proof-strip::after { bottom: 0; }
.proof-strip p {
  font-size: var(--fs-small);
  color: var(--fg-2);
  line-height: var(--lh-loose);
  max-width: 60ch;
}
.proof-strip .stack { gap: var(--space-2); }

/* =========================================================
   Eyebrow (nummererte seksjoner, redaksjonell rytme)
   ========================================================= */
.eyebrow {
  font-family: var(--font-tekst);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--vr-sand);
  margin: 0;
}
.eyebrow + h2 { margin-top: var(--space-2); }

/* Delt hairline-divider mellom seksjoner som deler bakgrunn,
   eller der et grep eksplisitt ber om skille (se om-siden).
   Pseudo-element i stedet for ekte border, slik streken kan «tegne seg». */
.section-divider { position: relative; }
.section-divider::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}

/* =========================================================
   Format-stripe (small caps-aktig eyebrow)
   ========================================================= */
.format-strip {
  position: relative;
  padding-top: var(--space-4);
  margin-top: var(--space-7);
}
.format-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--vr-sand);
  transform: scaleX(1);
  transform-origin: left;
}
.format-strip p {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Gap-basert separator (28.8): punktumet satt som ::before på alle unntatt
   første span, i stedet for ::after på alle unntatt siste. Med den gamle
   løsningen kunne punktumet bli stående alene igjen på slutten av en linje
   ved wrap (limt til forrige span). Nå er punktumet limt til NESTE span i
   stedet, så det følger med når den spanen brekker til ny linje — og selve
   avstanden rundt punktumet kommer fra flex gap, ikke fra mellomrom i
   generert innhold, som gir renere brekk. */
.format-strip p span {
  display: inline-flex;
  align-items: baseline;
  column-gap: var(--space-3);
  white-space: nowrap;
}
.format-strip p span:not(:first-child)::before {
  content: "\00b7";
  color: var(--vr-sand);
}

/* =========================================================
   Metode-blokk
   ========================================================= */
.metode-strip {
  position: relative;
  padding-top: var(--space-4);
  margin-top: var(--space-6);
}
.metode-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--vr-sand);
  transform: scaleX(1);
  transform-origin: left;
}
.metode-strip p {
  font-size: var(--fs-small);
  color: var(--fg-2);
  font-weight: 500;
}

/* =========================================================
   Prosessdiagram (SVG, ren strek, gjenbrukt forsiden + arbeidsløpet)
   ========================================================= */
/* Hovedelement i seksjon 04 (forsiden) + arbeidsløpets løp-seksjon:
   full kolonnebredde (ingen cap lenger), noe større noder/tekst, mer luft. */
.process-diagram { margin-top: var(--space-7); max-width: none; }
.process-diagram svg { display: block; width: 100%; height: auto; }
.process-diagram text {
  font-family: var(--font-tekst);
  font-size: 14px;
  fill: var(--fg-2);
}
.process-diagram .pd-node-accent text { font-weight: 600; fill: var(--fg-1); }
.process-diagram .pd-line { stroke: var(--border-hair); stroke-width: 1; }
.process-diagram .pd-dot { fill: var(--vr-paper); stroke: var(--fg-1); stroke-width: 1.75; }
.process-diagram .pd-dot-accent { fill: var(--accent); stroke: var(--accent); }
.process-diagram .pd-mobile { display: none; }
@media (max-width: 640px) {
  .process-diagram .pd-desktop { display: none; }
  .process-diagram .pd-mobile { display: block; }
}

/* =========================================================
   To-kolonne (forsiden, seksjon 03): «Den første er …» og
   «Den andre er …» side om side med tynn hairline mellom,
   fordi innholdet ER to ting. Under 800px: stablet som før.
   ========================================================= */
.split-two > * + * { margin-top: var(--space-5); }
@media (min-width: 800px) {
  .split-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
  .split-two > *:first-child { margin-top: 0; }
  .split-two > *:last-child {
    position: relative;
    margin-top: 0;
    padding-left: var(--space-6);
  }
  .split-two > *:last-child::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 1px;
    background: var(--border-hair);
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* =========================================================
   «Uten»-blokken (forsiden): blockquote-behandling, ingen kuler
   ========================================================= */
.uten-block {
  position: relative;
  padding-left: var(--space-5);
  margin-top: var(--space-6) !important;
}
.uten-block::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--vr-sand);
  transform: scaleY(1);
  transform-origin: top;
}
.uten-block > * + * { margin-top: var(--space-4); }

/* Kildelinje under uten-listen (forsiden, seksjon 03) */
.kilde-linje {
  font-size: var(--fs-micro);
  color: var(--fg-3);
}

/* =========================================================
   Evidensseksjon
   ========================================================= */
.evidens-grid { display: flex; flex-direction: column; gap: var(--space-6); }
.evidens-grid__stat > * + *,
.evidens-grid__body > * + * { margin-top: var(--space-3); }
/* Mindre grad i to-kolonne-konteksten, så «30–50 %» holder seg på én linje (finjustert 28.8) */
.evidens-grid__stat .stat-display { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); white-space: nowrap; }
@media (min-width: 640px) {
  .evidens-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}
.stat-display {
  font-family: var(--font-tese);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-stat);
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--fg-1);
  margin: 0;
}
.stat-caption {
  font-size: var(--fs-lede);
  color: var(--fg-2);
  max-width: 40ch;
}
.evidens-strip {
  position: relative;
  font-size: var(--fs-small);
  color: var(--fg-2);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
  max-width: 60ch;
}
.evidens-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}
.card {
  position: relative;
  padding: var(--space-6) 0;
  margin-top: var(--space-5);
  max-width: 46ch;
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}
.card::before { top: 0; }
.card::after { bottom: 0; }
.card-number {
  font-family: var(--font-tese);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--fg-1);
  margin: 0 0 var(--space-3) 0;
}
.card p {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

/* =========================================================
   Lister (uten ikoner)
   ========================================================= */
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  position: relative;
  padding: var(--space-3) 0;
  font-size: var(--fs-body);
  color: var(--fg-1);
  max-width: 60ch;
}
.plain-list li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}
.plain-list li:last-child::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}

/* To kolonner på desktop (arbeidsløpets leveranseliste), hairline mellom radene i hver kolonne */
@media (min-width: 640px) {
  .plain-list--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: var(--space-7);
  }
  .plain-list--cols li:nth-child(4)::after,
  .plain-list--cols li:last-child::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: var(--border-hair);
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* =========================================================
   Tidslinje (arbeidsløpet)
   ========================================================= */
.timeline { display: flex; flex-direction: column; gap: var(--space-6); }
.timeline-step {
  border-left: 2px solid var(--vr-sand);
  padding-left: var(--space-5);
}
.timeline-step p { max-width: 62ch; }

/* =========================================================
   Knapp
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.btn-primary {
  background: var(--vr-ink);
  color: var(--vr-paper);
  border: 1px solid var(--vr-ink);
}
.btn-primary:hover {
  background: var(--vr-teal);
  border-color: var(--vr-teal);
  color: var(--vr-paper);
}

/* =========================================================
   CTA-blokk (identisk på alle sider)
   ========================================================= */
.cta {
  background: var(--surface-dark);
  color: var(--fg-on-dark);
  padding-top: 10rem;
  padding-bottom: 10rem;
}
.cta-lead {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-on-dark);
  max-width: 20ch;
}
/* Sluttakkord på lys flate: seksjonen sentreres vertikalt (kun ≥1000px,
   mobil beholder dagens kompakte høyde). */
@media (min-width: 1000px) {
  .cta {
    display: flex;
    align-items: center;
    min-height: 55vh;
  }
  .cta > .wrap { width: 100%; }
}
.cta p.lede { color: color-mix(in oklab, var(--fg-on-dark) 78%, var(--surface-dark)); max-width: 52ch; }
.cta a:not(.btn) {
  color: var(--accent-on-dark);
  text-decoration-color: color-mix(in oklab, var(--accent-on-dark) 45%, transparent);
}
.cta a:not(.btn):hover { color: var(--fg-on-dark); text-decoration-color: var(--fg-on-dark); }
.cta .btn { margin-top: var(--space-5); }
.cta .btn-primary {
  background: var(--vr-paper);
  color: var(--vr-ink);
  border-color: var(--vr-paper);
}
.cta .btn-primary:hover {
  background: var(--vr-sage);
  border-color: var(--vr-sage);
  color: var(--vr-ink);
}

/* =========================================================
   Manifest (kun /om)
   ========================================================= */
.manifest p {
  font-family: var(--font-tekst);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--fg-1);
  max-width: 52ch;
  text-wrap: pretty;
}
/* Kun de to åpningslinjene bærer stor grad (roet ned 28.8, Viljars feedback) */
.manifest > p {
  font-weight: 500;
  font-size: var(--fs-manifest);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 36ch;
  text-wrap: balance;
}
.manifest strong { font-weight: 600; }
.manifest-label {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
  margin-top: var(--space-7) !important;
}
.manifest .principle { max-width: 56ch; }
.manifest .closing p { max-width: 50ch; }

/* =========================================================
   Kontaktside — deler samme venstrekant som resten av siten
   ========================================================= */
.contact-panel .btn { margin-top: var(--space-5); }
.contact-panel .after-btn {
  margin-top: var(--space-6);
  color: var(--fg-2);
  font-size: var(--fs-small);
}

/* =========================================================
   Footer — redaksjonell avslutning, alltid på papir, aldri mørk
   ========================================================= */
.site-footer {
  position: relative;
  background: var(--vr-paper);
  padding-top: 8rem;
  padding-bottom: var(--space-7);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}
.site-footer p {
  font-size: var(--fs-small);
  color: var(--fg-3);
  max-width: none;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.footer-descriptor { margin-top: var(--space-2); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.footer-nav a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--fs-small);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.footer-nav a:hover { color: var(--fg-1); border-bottom-color: var(--border-soft); }
.footer-org {
  margin-top: var(--space-6);
  font-size: var(--fs-micro);
}
.footer-micro {
  margin-top: var(--space-2);
  font-size: var(--fs-micro);
  color: var(--fg-3);
}
@media (min-width: 640px) {
  .footer-grid { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

/* =========================================================
   Skip link (tilgjengelighet)
   ========================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vr-ink);
  color: var(--vr-paper);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus {
  left: 0;
}

/* =========================================================
   Animasjon: reveal (hero + scroll)
   ========================================================= */
/* Skjules kun når JS faktisk kjører (html.js settes i <head>).
   Uten JS er alt innhold synlig umiddelbart. */
.js .reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 100ms);
}
.js .hero .reveal-item {
  transition-delay: calc(var(--reveal-index, 0) * 60ms);
}
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sikkerhetsventil (mobil tom-skjerm-fiks): uansett om JS/observer feiler
   eller kommer sent, skal alt .reveal-item-innhold være synlig senest
   1,5s etter last (1.1s delay + 0.4s varighet, «to»-only keyframe henter
   «fra»-verdien fra gjeldende beregnet stil, så ingen hopp hvis JS alt
   har vist innholdet). For nettlesere med native animation-timeline:view()
   overstyrer scroll-reveal-regelen lenger ned (samme spesifisitet, senere
   i kildekoden) denne på [data-scroll-reveal]-elementer — de to kolliderer
   ikke. Hero-elementer (kun data-hero-reveal) beholder alltid denne. */
.js .reveal-item {
  animation: vr-reveal-safety 0.4s var(--ease-out) 1.1s forwards;
}
@keyframes vr-reveal-safety {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .site-header { transition: none; }
  a, .btn { transition: none; }
  .arrow-glide { transition: none; }
  a:hover .arrow-glide { transform: none; }
}

/* =========================================================
   Progressiv utvidelse: native scroll-drevet animasjon
   (kompositor, ingen JS). IntersectionObserver i script.js
   forblir fallback for browsere uten animation-timeline: view().
   Alt pakket i prefers-reduced-motion: no-preference.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* entry 0%→entry 100% (ikke «cover X%») med hensikt: cover krever
       scrolleavstand UTOVER full synlighet for å fullføre, noe elementer
       nær bunnen av siden (CTA, footer) ikke har igjen å scrolle — fant vi
       ved test: opacity satt seg fast på ~0.6-0.75 der. entry 100% er
       alltid fullførbar, siden den treffer nøyaktig når elementet er helt
       synlig, som er akkurat der naturlig scroll uansett stopper. */
    .js [data-scroll-reveal] {
      animation: vr-fade-up 0.7s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    .section-divider::before,
    .quote-list__item::before,
    .proof-strip::before,
    .proof-strip::after,
    .card::before,
    .card::after,
    .format-strip::before,
    .metode-strip::before,
    .evidens-strip::before,
    .site-footer::before,
    .plain-list li::before,
    .plain-list li:last-child::after,
    .plain-list--cols li:nth-child(4)::after,
    .plain-list--cols li:last-child::after {
      transform: scaleX(0);
      animation: vr-line-draw 0.5s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }

    /* Vertikale hairlines/sandstreker: samme oppskrift, scaleY fra toppen */
    .split-two > *:last-child::before,
    .uten-block::before,
    .quote::before {
      transform: scaleY(0);
      animation: vr-line-draw-y 0.5s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }

    /* Eyebrow-tall (01, 02 …): egen liten fade+rise, 80ms før H2 i samme
       seksjon (H2 sin egen vr-fade-up over har ingen ekstra delay her,
       differansen kommer av at eyebrow-animasjonen er kortere). */
    .eyebrow[data-scroll-reveal] {
      animation: vr-eyebrow-in 0.4s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }

    /* Prosessdiagrammet: linjen tegnes med stroke-dashoffset, nodene toner
       inn venstre→høyre med stagger, teal-noden («Beslutning») lander sist. */
    .process-diagram .pd-line {
      stroke-dasharray: 720;
      stroke-dashoffset: 720;
      animation: vr-pd-line-draw 1s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 15% entry 55%;
    }
    .process-diagram .pd-mobile .pd-line {
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
    }
    .process-diagram circle,
    .process-diagram text {
      opacity: 0;
      animation: vr-pd-node-in 0.5s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 20% entry 60%;
    }
    /* Rekkefølge venstre→høyre (Uke 0 → Fire økter → Dag 30), men
       teal-noden («Beslutning») forskyves til å lande sist — den skal
       trekke blikket etter at resten av linjen er tegnet ferdig. */
    .process-diagram svg > circle:nth-of-type(1),
    .process-diagram svg > text:nth-of-type(1) { animation-delay: 0s; }
    .process-diagram svg > circle:nth-of-type(2),
    .process-diagram svg > text:nth-of-type(2) { animation-delay: 0.15s; }
    .process-diagram svg > circle:nth-of-type(3),
    .process-diagram svg > text:nth-of-type(3) { animation-delay: 0.3s; }
    .process-diagram .pd-node-accent circle,
    .process-diagram .pd-node-accent text { animation-delay: 0.45s; }

    /* Kun opacity + transform (kompositor-only, ingen repaint) — clip-path
       animert på scroll viste seg for tungt på store fullbredde-bilder og
       kunne henge rendereren, derfor droppet til fordel for en like rolig,
       men billig, fade+scale-avdekking. */
    .img-band img,
    .split-grid__image img,
    .inset-image img,
    .portrett img,
    .proof-portrett {
      animation: vr-img-reveal 0.9s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

  }
}
@keyframes vr-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vr-line-draw {
  to { transform: scaleX(1); }
}
@keyframes vr-line-draw-y {
  to { transform: scaleY(1); }
}
@keyframes vr-eyebrow-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vr-pd-line-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes vr-pd-node-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vr-img-reveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
/* =========================================================
   Responsivt
   ========================================================= */
@media (max-width: 640px) {
  /* ~60 % av desktop-luften (9rem / 10rem / 8rem → 5.4rem / 6rem / 4.8rem) */
  section { padding-top: 5.4rem; padding-bottom: 5.4rem; }
  .hero { min-height: auto; padding-top: 6rem; padding-bottom: 3rem; }
  .cta { padding-top: 6rem; padding-bottom: 6rem; }
  .site-footer { padding-top: 4.8rem; }
  .site-nav { gap: var(--space-4); }
  .card { padding: var(--space-5); }

  /* Hero-typen skal aldri overflowe under 640px. Det vanlige --fs-hero-gulvet
     (3.25rem) er for stort for enkeltord uten naturlig bruddpunkt (f.eks.
     «Beslutningssjekk» på kontaktsiden) i den smale .wrap-kolonnen der
     (24px padding). Kalibrert mot reell scrollWidth/clientWidth-måling i
     nettleser ved 320px og 390px (verifisert uten overflow, med margin);
     over 640px gjelder tokenets vanlige formel uendret. */
  :root {
    --fs-hero: clamp(1.8rem, -0.28rem + 11.4vw, 3.4rem);
  }
}

@media (max-width: 400px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* Logo-stripe: dempet, ensartet, blekk-tonet */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-6);
}
.logo-strip img {
  width: auto;
  filter: grayscale(1) brightness(0.4) contrast(0.9);
  opacity: 0.45;
}
/* Optisk normalisert: individuell høyde per logo, slik cap-høydene fremstår like store.
   Orkla og Schibsted/BDO har ulik intern lufting i selve filene (Orkla har stjerneikon
   over ordmerket; Schibsted/BDO fyller nesten hele høyden), derfor avviker høydene fra
   en jevn skala – finjustert ved visuell sjekk 28.8. */
.logo-strip .logo-orkla     { height: 38px; }
.logo-strip .logo-schibsted { height: 19px; }
.logo-strip .logo-bdo       { height: 18px; }
.logo-strip .logo-dsb       { height: 20px; }
.logo-strip .logo-obos      { height: 21px; }
@media (max-width: 640px) {
  .logo-strip { gap: var(--space-5) var(--space-6); }
}

/* Portrett på Om-siden */
.portrett {
  margin: var(--space-6) 0 var(--space-7);
  max-width: 340px;
}
.portrett img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-img);
}
.portrett-kontakt {
  margin-top: var(--space-3);
  line-height: 1.9;
}
@media (min-width: 900px) {
  .om-hero-grid { display: flex; gap: var(--space-8); align-items: flex-start; }
  .om-hero-grid > .manifest { order: 1; flex: 1 1 auto; min-width: 0; }
  .om-hero-grid > .portrett {
    order: 2;
    flex: 0 0 260px;
    max-width: 260px;
    margin: 0;
  }
}

/* =========================================================
   Fotografi — ekte arbeidsfoto fra arkivet, ingen filter/duotone
   ========================================================= */

/* Fullbredde bildeband, edge-to-edge (forsiden mellom hero og bevisblokk,
   om-siden under manifestet) */
.img-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(300px, 60vh, 640px);
  overflow: hidden;
}
.img-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-band-caption-wrap { padding-top: var(--space-3); }
.img-band-caption {
  text-align: right;
  font-size: var(--fs-micro);
  color: var(--fg-3);
  max-width: none;
}
@media (max-width: 640px) {
  .img-band { height: clamp(220px, 42vh, 420px); }
}

/* Hero-båndet (forsiden, iterasjon 5): samme motiv som tidligere om-båndet
   (Viljar i samtale). «Løpe»-logoen på t-skjorten sitter nederst til høyre
   i kildebildet — forankring øverst til venstre (0% 0%) holder den ute av
   bildet på både mobil (fullhøyde vises, men beskjæres i bredden) og
   desktop (full bredde vises, men beskjæres i høyden). Gjelder alle
   bredder; ≥1000px justerer kun selve båndhøyden til 52vh-formatet. */
.img-band--hero img { object-position: 0% 0%; }
@media (min-width: 1000px) {
  .img-band--hero { height: clamp(280px, 52vh, 560px); }
}

/* Asymmetrisk 7/5-splitt: tekst venstre, bilde høyre (forsiden «Slik foregår det») */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  /* Bildekolonnen fikk mer av spalteforholdet (5fr → 5.8fr) i stedet for
     å skalere selve bildet opp — det gir omtrent 15 % større bilde
     (473px → 549px ved 1200px wrap) uten å skape overflow, fordi
     tekstkolonnen (6.2fr) fortsatt er bredere enn avsnittenes egen
     65ch-cap og derfor ikke mister linjebrekk. */
  .split-grid { grid-template-columns: 6.2fr 5.8fr; gap: var(--space-8); }
}
.split-grid__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-img);
  display: block;
}
/* Egen lesetakt i tekstkolonnen (samme rytme som resten av siten;
   .eyebrow + h2 sin egen, tettere regel vinner fortsatt på spesifisitet). */
.split-grid__text > * + * { margin-top: var(--space-5); }

/* Inset-bilde med bildetekst (arbeidsløpet, whiteboard) */
.inset-image {
  margin-top: var(--space-6);
  max-width: 640px;
}
.inset-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-img);
  display: block;
}
.inset-image-caption {
  margin-top: var(--space-2);
  text-align: right;
  font-size: var(--fs-micro);
  color: var(--fg-3);
  max-width: none;
}

/* =========================================================
   Sitater — Fraunces italic 360, sandstrek (kun to roller for Fraunces:
   dette + de to store tallene). Brukes både i evidensseksjonen
   (Cecilie Sand-sitatet) og i den redaksjonelle sitatlisten på forsiden.
   ========================================================= */
.quote {
  position: relative;
  margin: 0;
  padding-left: var(--space-5);
}
.quote::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--vr-sand);
  transform: scaleY(1);
  transform-origin: top;
}
.quote p {
  font-family: var(--font-tese);
  font-style: italic;
  font-weight: 360;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--fg-1);
  max-width: 42ch;
  text-indent: -0.45em;
}
.quote footer {
  margin-top: var(--space-3);
  font-family: var(--font-tekst);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--fg-2);
  font-weight: 600;
}
.quote-featured { margin-top: var(--space-6); }
.quote-featured p {
  font-size: var(--fs-lede);
  color: var(--fg-1);
}

/* Redaksjonell forskjøvet liste (forsiden, seksjon 06) — bort fra tre like kort */
.quote-list {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
}
.quote-list__item {
  position: relative;
  padding: var(--space-6) 0;
}
.quote-list__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-hair);
  transform: scaleX(1);
  transform-origin: left;
}
.quote-list__item:last-child { padding-bottom: var(--space-5); }
.quote-list__item .quote { max-width: 60ch; }
.quote-list__item .quote-attr {
  margin-top: var(--space-3);
  margin-left: calc(var(--space-5) + 2px);
  font-size: var(--fs-small);
  color: var(--fg-2);
  font-weight: 600;
}
@media (min-width: 640px) {
  .quote-list__item:nth-child(2) { margin-left: 8%; }
}

/* Bevisblokken: samme kolonne som resten + portrett og les-mer (28.8) */
.proof-inner {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.proof-portrett {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-img);
}
.proof-eyebrow {
  font-family: var(--font-tekst);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
@media (max-width: 640px) {
  .proof-inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .proof-portrett { width: 104px; height: 104px; }
}

/* ===== Hurtigfikser 28.8 kveld (Viljars feedback, før full redesign) ===== */
/* 1. Tallet skal aldri brekke ("%" alene på egen linje) */
.stat-display { white-space: nowrap; }
/* 2. Logoene: mindre, alltid én rad på desktop */
.logo-strip { flex-wrap: nowrap; gap: var(--space-6); overflow-x: visible; }
.logo-strip img { opacity: 0.4; }
.logo-strip .logo-orkla     { height: 30px; }
.logo-strip .logo-schibsted { height: 16px; }
.logo-strip .logo-bdo       { height: 18px; }
.logo-strip .logo-dsb       { height: 16px; }
.logo-strip .logo-obos      { height: 16px; }
@media (max-width: 700px) {
  .logo-strip { flex-wrap: wrap; }
}
/* 3. CTA tilbake på lys flate (den mørke bunnen ut, per Viljar 28.8) */
.cta { background: var(--surface-2); }
.cta .cta-lead, .cta p { color: var(--fg-1); }
.cta p.lede { color: var(--fg-2); }
.cta a:not(.btn) { color: var(--accent); text-decoration-color: color-mix(in oklab, var(--vr-teal) 45%, transparent); }
.cta .btn-primary { background: var(--vr-ink); color: var(--vr-paper); border-color: var(--vr-ink); }
.cta .btn-primary:hover { background: var(--vr-teal); border-color: var(--vr-teal); color: var(--vr-paper); }