/* =============================================================
   AS Neraal & Co — hovedstilark
   Mobil først. Ingen rammeverk, ingen eksterne avhengigheter.

   Innhold:
     1.  Designtokens
     2.  Nullstilling og grunnstiler
     3.  Layout-hjelpere
     4.  Knapper
     5.  Bildeplassholdere
     6.  Header og meny
     7.  Hero + tillitsstripe
     8.  Seksjoner (felles)
     9.  Produktkort
     10. Kvalitet (sjekkliste) og Om oss (fakta)
     11. Kontakt og skjema
     12. Footer
     13. Animasjoner
   ============================================================= */

/* ---------- 0. Skrift ---------- */
/* IBM Plex Sans, selvhostet fra assets/fonts/ (SIL OFL 1.1).
   Valgt fordi den er tegnet for en industri- og ingeniørbedrift: presis og
   nøytral, men med egen karakter – uten å gå på bekostning av lesbarheten.
   font-display: swap gjør at teksten vises umiddelbart i reservefonten og
   byttes når Plex er lastet, slik at innholdet aldri er usynlig.
   Latin-subsett – verifisert at æ ø å Æ Ø Å finnes i alle tre vektene. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Kursiv brukes ett sted: merknaden under tabellen. Uten denne fila ville
   nettleseren laget kursiven selv ved å skråstille den oppreiste – en
   mekanisk skjevstilling med feil bokstavformer, som synes godt i små
   størrelser. Ekte kursiv har egne former; a-en er en annen bokstav.
   Samme kilde og samme subsett som de tre andre. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. Designtokens ---------- */
:root {
  /* Fargene er hentet direkte ut av logoen (assets/logo/Neraal_PNG.png):
       #46568D  skiferblå – penselstrøk og bokstavkontur
       #EF7170  korall    – den svungne N-en
     Skalaen under er bygget rundt logoens blåtone (nyanse 226°). Kontrast
     mot hvit er oppgitt der fargen brukes til tekst. */
  --blue-900: #232D4D;   /* overskrifter               13,7:1  ✓ AAA */
  --blue-800: #2E3B66;   /* primær: header, knapper    10,9:1  ✓ AAA */
  --blue-600: #46568D;   /* logoens blå: lenker, ikoner 7,1:1  ✓ AAA */
  --blue-100: #D5DAEC;
  --blue-50:  #EDF0F7;

  /* Korallen fra logoen brukes IKKE som aksentfarge på siden. Den lever kun
     i selve logoen, slik at merkevaren er intakt uten at fargen gjentas i
     hver seksjon. Siden kjører derfor én enkelt blåskala.
     Tokenene står igjen fordi logoen bygger på dem – ikke ta dem i bruk
     uten at det er en bevisst beslutning. */
  --coral:     #EF7170;  /* kun logo – ikke i bruk i CSS */
  --coral-ink: #BA3D36;  /* kun logo – ikke i bruk i CSS */
  --coral-50:  #FDEEED;  /* kun logo – ikke i bruk i CSS */

  --ink:      #1E2430;   /* brødtekst                  15,8:1  ✓ AAA */
  --ink-soft: #4A5468;   /*                             7,7:1  ✓ AAA */
  --ink-mute: #6B7488;   /*                             4,7:1  ✓ AA  */

  --line:     #DDE1EC;
  --line-soft:#E9ECF5;
  --bg:       #ffffff;
  --bg-alt:   #F4F6FB;
  --white:    #ffffff;

  --danger:   #A32B1F;

  /* Reservefontene under er systemfonter, så siden er lesbar også før Plex
     har lastet – eller om nedlastingen feiler. */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1140px;
  --gutter: 20px;
  --header-h: 72px;   /* gir plass til logoens 2,8:1-format */

  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 43, 66, .05), 0 2px 6px rgba(20, 43, 66, .06);
  --shadow-md: 0 2px 6px rgba(20, 43, 66, .05), 0 12px 28px rgba(20, 43, 66, .09);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --header-h: 80px; }
}

/* ---------- 2. Nullstilling og grunnstiler ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--blue-900);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }

/* Var 1,1em. Litt for luftig mellom to avsnitt som hører sammen – teksten
   leste som to atskilte blokker heller enn som ett resonnement. */
p { margin: 0 0 .9em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-800); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

address { font-style: normal; }

/* Synlig fokus overalt – aldri fjern uten erstatning */
:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue-800);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* Synlig for skjermlesere, skjult visuelt. Brukes til seksjonsoverskrifter
   som gir landemerket et navn uten å vises på skjermen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Eyebrow: liten versal etikett med en strek på hver side.
   Venstre strek er kort og fast, høyre strek strekker seg ut resten av
   spalten (flex: 1). Da får linja samme bredde som teksten under, i
   stedet for å henge som en løs vimpel til venstre. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin: 0 0 .85em;
}

/* Like lange streker på hver side, med etiketten midtstilt mellom dem.
   flex-basis 0 er poenget: begge strekene deler den ledige plassen likt,
   uansett hvor lang etiketteksten er, så «kronen» forblir symmetrisk. */
.eyebrow::before,
.eyebrow::after {
  content: "";
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  /* Streken skal være tydelig, men ikke konkurrere med teksten. */
  opacity: .55;
  flex: 1 1 0;
  /* Hindrer at strekene forsvinner helt på de smaleste skjermene. */
  min-width: 12px;
}

/* "LEVERANDØR TIL PROFFMARKEDET" er 256 px bred ved standardstørrelse.
   På en 320 px skjerm er det ikke plass til både etikett og streker –
   etiketten strammes derfor litt inn her, slik at kronen holder formen
   i stedet for å brekke over to linjer. */
@media (max-width: 420px) {
  .eyebrow {
    font-size: .72rem;
    letter-spacing: .08em;
    gap: 8px;
  }
}

/* ---------- 3. Layout-hjelpere ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ankerhopp skal ikke havne bak den faste headeren */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Toppankeret skal helt til topps, ikke stoppe en headerhøyde ned. */
#toppen { scroll-margin-top: 0; }

/* ---------- 4. Knapper ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease),
              border-color .18s var(--ease),
              color .18s var(--ease),
              transform .18s var(--ease);
}

.btn--primary {
  background: var(--blue-800);
  border-color: var(--blue-800);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
  transform: translateY(-1px);
}

/* CTA i den mørke headeren. Hvit flate med navy tekst gir 13,7:1 og skiller
   seg tydelig ut mot den blå headeren – uten å bruke korallen. */
.btn--accent {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue-900);
}
.btn--accent:hover {
  background: var(--blue-50);
  border-color: var(--blue-50);
  color: var(--blue-900);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  border-color: var(--blue-100);
  color: var(--blue-800);
}
.btn--ghost:hover {
  border-color: var(--blue-600);
  color: var(--blue-800);
  background: var(--blue-50);
}

.btn--sm { padding: 9px 18px; font-size: .925rem; }
.btn--block { width: 100%; }

.btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------- 5. Bildeplassholdere ---------- */
/* Vises til ekte foto er på plass. Beholder riktig proporsjon slik at
   layouten ikke hopper når bildet byttes inn. */
.media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      var(--blue-50) 0 14px,
      #E4E8F4 14px 28px);
  border: 1px dashed var(--blue-100);
  border-radius: var(--radius-lg);
  color: var(--blue-800);
  text-align: center;
  padding: 24px;
}

.media-ph svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}

.media-ph span {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: .8;
}

figure { margin: 0; }

/* Fotoet i «Om oss». Samme avrunding som plassholderen hadde, så
   seksjonen ser lik ut med og uten bilde. Ingen fast høyde: bildet er
   stående, og høyden skal følge av bredden på spalta. */
.split__media > img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* ---------- 6. Header og meny ---------- */
/* Headeren er mørk fordi logoen har hvite bokstaver og gjennomsiktig
   bakgrunn – den ville forsvunnet på hvitt. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blue-800);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-scrolled {
  background: var(--blue-900);
  box-shadow: 0 2px 16px rgba(20, 26, 48, .22);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px 0;
}

/* Logoen har sideforholdet 2,803:1 (beskåret fra originalen).
   width/height er satt i HTML for å unngå layouthopp under lasting. */
.logo__img {
  width: 124px;
  height: auto;
  display: block;
}

@media (min-width: 620px) { .logo__img { width: 152px; } }
@media (min-width: 900px) { .logo__img { width: 168px; } }

/* Hamburgerknapp */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  padding: 9px 14px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  color: var(--white);
  cursor: pointer;
}
.nav-toggle:hover { border-color: rgba(255, 255, 255, .6); }
/* Hvit fokusring på den mørke headeren – maksimal kontrast mot navy. */
.site-header :focus-visible { outline-color: var(--white); }

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}
.nav-toggle__bars span,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .15s linear;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span     { top: 5px; }
.nav-toggle__bars::after   { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span     { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after   { transform: translateY(-5px) rotate(-45deg); }

/* Mobilmeny – faller ned fra den mørke headeren og arver fargene */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blue-900);
  box-shadow: 0 12px 28px rgba(20, 26, 48, .28);
  padding: 8px var(--gutter) 22px;
  display: none;
}
.site-nav.is-open { display: block; }

.site-nav__list { list-style: none; }

.site-nav__list a {
  display: block;
  padding: 13px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  color: #C6CDE3;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.site-nav__list a:hover { color: var(--white); background: rgba(255, 255, 255, .08); }

/* Trykkrespons. Uten den er det ingenting som bekrefter at trykket traff,
   og lenker som bare navigerer i samme side føles døde. */
.site-nav__list a:active {
  background: rgba(255, 255, 255, .2);
  color: var(--white);
}
.site-nav__list a.is-current {
  color: var(--white);
  box-shadow: inset 3px 0 0 var(--white);
  padding-left: 14px;
}

.site-nav__cta { margin-top: 18px; width: 100%; }

.lang-switch {
  display: inline-block;
  margin-top: 14px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #C6CDE3;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  padding: 6px 12px;
}
.lang-switch:hover { color: var(--white); border-color: var(--white); }

/* Desktopmeny */
@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 28px;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    /* Liten gap, og luften ligger i lenkenes egen padding i stedet.
       Da er nesten hele menylinja klikkbar. Før hadde lenkene ingen
       vannrett padding og 28 px mellomrom, så en tredel av linja var
       dødt område – «Hjem» var bare 38 px bred og lett å bomme på. */
    gap: 4px;
  }

  .site-nav__list a {
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    /* Runde hjørner bare oppe. Nede ville de bøyd endene på streken
       under den aktive lenka, og den skal være rett. */
    border-radius: 6px 6px 0 0;
    font-weight: 500;
    font-size: .975rem;
    color: #C6CDE3;
  }
  .site-nav__list a:hover { color: var(--white); }
  .site-nav__list a.is-current {
    border-bottom-color: var(--white);
    color: var(--white);
    box-shadow: none;
    padding-left: 0;
  }

  .site-nav__cta { margin-top: 0; width: auto; }
  .lang-switch { margin-top: 0; }
}

/* ---------- 7. Hero + tillitsstripe ---------- */
/* HEROEN ER BYGGET RUNDT ET FOTO SOM LIGGER BAK TEKSTEN.
   ------------------------------------------------------------------
   KRAV TIL FOTOET (viktig – oppsettet forutsetter denne komposisjonen):
     • Liggende format, minst 2400 px bredt. Lever gjerne 1200/1600/2400.
     • Motivet skal ligge til HØYRE i bildet (båt, anlegg, detalj).
     • Venstre tredjedel skal være rolig og jevn – åpent hav, himmel,
       tåke, uskarp flate. Det er der teksten står.
     • Unngå høy kontrast eller små detaljer i venstre halvdel.
     • Komprimer til under ca. 300 kB for 1600 px-varianten.

   LESBARHET ER SIKRET UAVHENGIG AV BILDET.
   Over fotoet ligger et mørkt overlegg som er tettest til venstre og
   toner ut mot høyre. Tallene under er regnet ut for verst tenkelige
   tilfelle – et helt hvitt foto under overlegget:

                     overskrift   ingress   eyebrow
     venstre kant        10,9:1     8,5:1     7,8:1
     midt i teksten       9,9:1     7,7:1     7,1:1
     høyre tekstkant      7,8:1     6,0:1     5,6:1
     mobil, svakest       7,6:1     5,9:1     5,5:1

   Alt ligger godt over AA-kravet på 4,5:1. Teksten kan altså ikke bli
   uleselig av at fotoet byttes ut. Endrer du prosentstoppene i
   overlegget under, må tallene regnes om på nytt.
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;          /* holder z-index-stablingen lokal */
  background: var(--blue-900); /* synlig før fotoet er lastet */
  padding: 52px 0 40px;
  overflow: hidden;
}

/* Bilde- og videolaget. Videoen ligger over stillbildet, slik at bildet
   blir stående av seg selv hvis videoen aldri spilles – på mobil, ved
   redusert bevegelse, eller om nedlastingen feiler. */
.hero__bg,
.hero__bg-img,
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Holder motivet i høyre bildekant når flaten er smalere enn fotoet. */
  object-position: 72% 50%;
}

.hero__bg,
.hero__bg-img { z-index: -3; }
.hero__bg-video { z-index: -2; }

/* Midlertidig stand-in til fotoet foreligger: en rolig havgradient som
   etterligner komposisjonen (mørkt og jevnt til venstre, lysere til
   høyre). Slett denne klassen fra HTML-en når <img> er på plass. */
.hero__bg--placeholder {
  background:
    radial-gradient(130% 100% at 78% 34%, #4E6B86 0%, rgba(78, 107, 134, 0) 58%),
    linear-gradient(100deg, #1B2740 0%, #24405C 46%, #33607F 78%, #48839E 100%);
}

/* Overlegget som sikrer kontrasten. Ligger mellom foto og tekst.
   Vannrett forløp: tett til venstre der teksten står, nesten borte til
   høyre der motivet skal få være synlig. Det loddrette forløpet demper
   toppen litt ekstra, slik at den mørke headeren møter heroen mykt. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* LYSEST MULIG OVERLEGG SOM FORTSATT OPPFYLLER AA.
     ------------------------------------------------------------------
     Kravet er ikke en anbefaling: forskrift om universell utforming av
     IKT-løsninger krever WCAG 2.1 AA for nettløsninger retta mot
     allmennheten, og tekstkontrast (1.4.3) er en del av AA. Tilsynet kan
     pålegge retting og ilegge tvangsmulkt.

     Verdiene er derfor regnet ut, ikke valgt: målt mot de lyseste
     partiene i dette fotoet (98-persentil) trenger hvit tekst 0,65 for å
     nå 4,5:1. Vi ligger på 0,68 gjennom hele tekstfeltet, som gir 4,8:1
     med litt margin.

     To grep gjør at fotoet likevel synes godt:
       • all tekst er ren hvit, ikke lys blå. Hvit trenger mindre
         overlegg enn en tonet farge, og kjøper oss rundt 7 prosentpoeng.
       • overlegget faller bratt av etter 56 %, der det ikke står tekst.
         Høyre halvdel av bildet ligger nesten fritt.

     Bytt foto, og tallene må regnes om. Skift av bilde er den vanligste
     måten en slik side havner under kravet igjen. */
  background:
    linear-gradient(180deg, rgba(28, 36, 62, .40) 0%, rgba(28, 36, 62, 0) 36%),
    linear-gradient(90deg,
      rgba(28, 36, 62, .72) 0%,
      rgba(28, 36, 62, .70) 32%,
      rgba(28, 36, 62, .69) 48%,
      /* Gulvet. Under dette ryker AA mot de lyseste partiene i fotoet. */
      rgba(28, 36, 62, .68) 56%,
      rgba(28, 36, 62, .30) 76%,
      rgba(28, 36, 62, .08) 100%);
}

/* På smale skjermer går teksten over hele bredden, og et vannrett forløp
   ville latt høyre halvdel av teksten stå på lys bakgrunn. Under 900 px
   byttes overlegget derfor til et jevnt, gjennomgående mørkt lag. */
@media (max-width: 899.98px) {
  .hero::before {
    background:
      /* Litt tettere enn på skjerm, og det er tilsiktet. Her dekker
         overlegget hele bildet, ikke bare den rolige venstre delen, så
         de lyseste partiene havner under teksten. Målt minstekrav er
         0,81 – vi ligger litt over for margin. */
      /* Tettere enn på skjerm: her dekker overlegget hele bildet, ikke
         bare den rolige venstre delen. Målt gulv er 0,74. */
      linear-gradient(180deg,
        rgba(28, 36, 62, .80) 0%,
        rgba(28, 36, 62, .78) 55%,
        rgba(28, 36, 62, .77) 100%);
  }
  /* Panorert mot venstre med vilje. Logoen ligger 70-92 % inn i bildet,
     og med utsnittet på mobil ville den blitt kappet på midten – en halv
     logo ser ut som en feil. Ved 38 % faller den helt utenfor, og mobilen
     viser bare vann.

     AT LOGOEN IKKE VISES PÅ MOBIL ER AVGJORT, IKKE GLEMT. Vurdert og
     akseptert: logoen står i headeren rett over uansett, så merkevaren
     er dekket. Et utsnitt som fikk med logoen ville lagt overskriften
     oppå den, siden teksten går i full bredde på smale skjermer.
     Skal begge deler med, må det et annet foto til – ikke en annen
     beskjæring. */
  .hero__bg,
  .hero__bg-img,
  .hero__bg-video { object-position: 38% 50%; }
}

.hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

/* Skygge bak teksten. Den teller ikke i WCAG-beregningen, men gjør at
   lys tekst holder seg lesbar over et foto for det menneskelige øyet –
   særlig der bildet er lyst. Med det lyse overlegget er dette det eneste
   som holder teksten sammen. */
.hero__content {
  text-shadow:
    0 1px 2px rgba(12, 18, 34, .55),
    0 2px 14px rgba(12, 18, 34, .45);
}

/* Norske sammensatte ord er lange: "næringsmiddelindustrien" er alene 11,9em
   bred. På 3,1rem blir det 589 px, mens tekstspalten er ca. 536 px – ordet
   fikk rett og slett ikke plass og rant ut av spalten.
   Derfor egen, litt mindre skala for hero-overskriften, pluss orddeling.
   hyphens: auto virker fordi <html lang="nb"> er satt; break-word er
   sikkerhetsnettet hvis nettleseren mangler norsk orddelingsordliste. */
.hero h1 {
  margin-bottom: .45em;
  font-size: clamp(1.65rem, 2.9vw, 2.6rem);
  hyphens: auto;
  overflow-wrap: break-word;
  color: var(--white);
}

.hero__lead {
  font-size: 1.075rem;
  color: var(--white);     /* ren hvit: krever minst overlegg av alle */
  max-width: 56ch;
  margin-bottom: 2rem;
}

/* Eyebrow-en står på mørk flate her, ikke på hvit. Strekene arver fargen
   via currentColor, så de trenger ingen egen regel – men de tåler mer
   dekkevne her, ellers forsvinner de i et travelt foto. */
.hero .eyebrow { color: var(--white); }
.hero .eyebrow::before,
.hero .eyebrow::after { opacity: .8; }

/* Kronen skal være like bred som ordet «Tilsetningsstoffer» i overskriften.
   ------------------------------------------------------------------
   Regnestykket: ordet er 8,29 em bredt i IBM Plex Sans Bold, og
   overskriften har letter-spacing -0,018 em over 18 tegn (-0,324 em).
   Netto 7,97 em av overskriftens skriftstørrelse – derfor ganges det
   med nøyaktig samme clamp() som h1-en bruker. Endrer du h1-størrelsen,
   må den endres begge steder, ellers slutter kronen å flukte.

   MERK: dette går bare helt opp på brede skjermer. Etiketten
   «LEVERANDØR TIL PROFFMARKEDET» er 256 px bred, mens ordet er 332 px
   ved full størrelse, men bare 254 px ved 1100 px skjermbredde. Under
   ca. 1400 px er altså etiketten selv bredere enn ordet, og min-width
   overtar slik at strekene ikke forsvinner. Vil du at kronen skal flukte
   ved alle bredder, må etiketteksten kortes ned. */
@media (min-width: 900px) {
  .hero .eyebrow {
    width: calc(7.97 * clamp(1.65rem, 2.9vw, 2.6rem));
    min-width: 304px;   /* etikett 256 + to mellomrom 24 + to streker 24 */
    max-width: 100%;
  }
}

/* Fokusringen må sees mot fotoet, ikke mot hvit bakgrunn. */
.hero :focus-visible { outline-color: var(--white); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Knappene brukes også utenfor heroen, på produktsidene. Der står de rett
   under et avsnitt eller en liste og trenger egen luft over. Inne i heroen
   kommer avstanden fra ingressens margin-bottom, så regelen holdes bevisst
   utenfor der for ikke å legge luft oppå luft. */
.section .hero__actions { margin-top: 30px; }

/* Knappene ligger nå oppå et foto.
   Primærknappen snus til hvit flate med navy tekst (13,7:1) – den leser
   like tydelig uansett hva som er bak.
   Sekundærknappen kan ikke være en ren kontur: mot et foto forsvinner
   tynne linjer. Den får derfor hvit kontur, hvit tekst og en svakt mørk,
   uskarp flate bak seg, slik at den holder kontrasten også om fotoet er
   lyst akkurat der. */
.hero .btn--primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue-900);
}
.hero .btn--primary:hover {
  background: var(--blue-50);
  border-color: var(--blue-50);
  color: var(--blue-900);
}

.btn--on-photo {
  background: rgba(20, 28, 50, .55);
  border-color: rgba(255, 255, 255, .78);
  color: var(--white);
  backdrop-filter: blur(6px);
}
.btn--on-photo:hover {
  background: rgba(20, 28, 50, .72);
  border-color: var(--white);
  color: var(--white);
}

/* Uten backdrop-filter (eldre nettlesere, eller når brukeren har bedt om
   redusert gjennomsiktighet) faller knappen tilbake til en solid flate. */
@supports not (backdrop-filter: blur(6px)) {
  .btn--on-photo { background: rgba(20, 28, 50, .72); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn--on-photo { background: var(--blue-900); backdrop-filter: none; }
}

/* Fotoet trenger høyde for å virke. Ikke 100vh: på mobil hopper layouten
   når adresselinja glir seg vekk, og en hero som fyller hele skjermen skyver
   innholdet under ut av syne. dvh + tak gir en rolig, forutsigbar høyde. */
@media (min-width: 620px) {
  .hero {
    padding: 72px 0 60px;
    min-height: min(66dvh, 560px);
    display: flex;
    align-items: center;
  }
  .hero__inner { width: 100%; }
}

@media (min-width: 900px) {
  .hero {
    padding: 96px 0 84px;
    min-height: min(78dvh, 760px);
  }

  /* Teksten holdes i venstre halvdel – både fordi det er der overlegget er
     tettest, og fordi motivet i fotoet skal ligge til høyre uten at tekst
     legger seg oppå det. */
  .hero__content { max-width: 50%; }

  .hero__lead { max-width: 46ch; }
}

/* Tillitsstripe – egen seksjon rett under heroen.
   Lå tidligere inne i .hero med margin-top + border-top som skille. Nå er den
   sin egen stripe, så skillelinja kommer fra heroens border-bottom i stedet –
   ellers ville vi fått to streker oppå hverandre. */
.trustband {
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
  padding: 26px 0;
}

.trustbar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trustbar li { display: flex; flex-direction: column; }

.trustbar strong {
  color: var(--blue-800);
  font-size: 1rem;
  line-height: 1.3;
}

.trustbar span {
  font-size: .875rem;
  color: var(--ink-mute);
  line-height: 1.45;
}

@media (min-width: 760px) {
  .trustbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 8. Seksjoner (felles) ---------- */
.section { padding: 64px 0; }
.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}

@media (min-width: 900px) {
  .section { padding: 96px 0; }
}

.section__head { max-width: 62ch; margin-bottom: 40px; }
.section__lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.section__note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  max-width: none;
}

/* To-kolonners oppsett for Kvalitet og Om oss */
.split {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr .95fr;
    gap: 72px;
  }
  /* Bildet til venstre, teksten til høyre */
  .split--reverse .split__text  { order: 2; }
  .split--reverse .split__media { order: 1; }
}

/* ---------- 9. Produktkort ---------- */
.cards {
  list-style: none;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  position: relative;          /* holder på lenkeflaten under */
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease),
              box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}

/* Hele kortet er klikkbart, men det finnes bare ÉN lenke i markupen –
   den på overskriften. ::after strekker seg over hele kortet og fanger
   opp klikket. Alternativet, å pakke hele kortet i en <a>, ville lagt
   avsnittstekst inn i lenkenavnet og gjort kortet tungt å lese for
   skjermlesere. Teksten kan fortsatt markeres med musa. */
.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-100);
}

.card:hover .card__link,
.card__link:focus-visible { color: var(--blue-600); }

/* Fokusringen skal tegnes rundt hele kortet, ikke rundt overskriftsteksten,
   siden det er kortet som oppfattes som klikkflaten. */
.card__link:focus-visible { outline: none; }
.card:focus-within {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
}

/* Skyves ned til bunnen av kortet uansett hvor lang teksten er, slik at
   «Les mer» står på samme linje i alle kortene. */
.card__more {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue-600);
}

.card__more::after {
  content: " →";
  display: inline-block;
  transition: transform .2s var(--ease);
}

.card:hover .card__more::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .card__more::after,
  .card:hover .card__more::after { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-800);
}

.card__icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 { margin-bottom: .55em; }

.card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .975rem;
}

/* ---------- 10. Sjekkliste og fakta ---------- */
.checklist {
  list-style: none;
  margin-top: 32px;
  display: grid;
  gap: 22px;
}

.checklist li {
  position: relative;
  padding-left: 40px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Blå sirkel med hvit hake – 7,1:1, godt over AA-kravet. */
  background: var(--blue-600)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
}

.checklist h3,
.checklist h4 { margin-bottom: .25em; font-size: 1.0625rem; }

.checklist p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .975rem;
}

.facts {
  margin: 32px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-weight: 600;
  color: var(--blue-800);
  font-size: .95rem;
}

.facts dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* ---------- 11. Kontakt og skjema ---------- */
.contact {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
  }
}

.contact__company {
  font-size: 1.25rem;
  margin-bottom: 1em;
}

.contact__list { margin: 0; }

.contact__list > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.contact__list > div:first-child { border-top: 1px solid var(--line); }

.contact__list dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}

.contact__list dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}

/* Skjema */
.contact__form {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px 30px;
}

@media (min-width: 620px) {
  .contact__form { padding: 36px 34px 38px; }
}

.contact__form h3 { margin-bottom: 1.2em; }

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-weight: 600;
  font-size: .925rem;
  margin-bottom: 7px;
  color: var(--ink);
}

.req { color: var(--danger); }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

/* Var #9aa4ad = 2,5:1 mot hvit – under WCAG AA-kravet på 4,5:1, og en kjølig
   grå som lå utenfor fargeskalaen. --ink-mute gir 4,7:1 ✓ AA. */
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-mute); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(46, 116, 181, .18);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }

.field__error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: .875rem;
  font-weight: 500;
}

/* Honningkrukke. Flyttes ut av synsfeltet i stedet for display:none –
   en del søppelroboter hopper bevisst over felt som er satt til none,
   men fyller ut felt som teknisk sett er synlige. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 16px 0 0;
  font-weight: 600;
  font-size: .95rem;
}
.form-status:empty { margin: 0; }
.form-status.is-ok { color: #1c6b45; }   /* 6,5:1 mot hvit ✓ AA */
.form-status.is-error { color: var(--danger); }

/* Knappen er utilgjengelig mens meldingen sendes, så dobbeltklikk ikke
   sender to ganger. */
.btn:disabled {
  opacity: .65;
  cursor: progress;
  transform: none;
}

.form-note {
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--ink-mute);
  line-height: 1.55;
}

/* ---------- 11b. Produktsider (undersider) ---------- */
/* STRAMMERE LODDRETT RYTME PÅ PRODUKTSIDENE
   ------------------------------------------------------------------
   Produktsidene har flere seksjoner etter hverandre, og med forsidens
   luftige avstander havnet neste overskrift langt under skjermkanten.
   Da ser sida ut som om den er slutt etter første avsnitt, og innholdet
   under blir aldri lest.

   Avstandene under er derfor strammet inn med rundt en tredel – men bare
   her, via .produktside. Forsiden har færre og lengre seksjoner og tåler
   luften godt, så den er bevisst ikke rørt.
   ------------------------------------------------------------------ */
.produktside .section { padding: 44px 0; }

.produktside .checklist {
  margin-top: 22px;
  gap: 18px;
}

.produktside .split { gap: 28px; }

@media (min-width: 900px) {
  .produktside .split { gap: 56px; }
}

/* Det er bildet, ikke teksten, som bestemmer høyden på denne seksjonen –
   tre punkter i lista er kortere enn en 4:3-flate. 3:2 er lavere, og er
   dessuten et mer naturlig liggende utsnitt for foto. Det flytter neste
   overskrift omtrent 40 px høyere opp på siden. */
.produktside .split__media .media-ph,
.produktside .split__media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.produktside .section .hero__actions { margin-top: 22px; }

.produktside /* Bildefeltet brukt til en leverandørlogo i stedet for et foto.
   Forskjellen fra et fotofelt er «contain» i stedet for «cover»: hele
   logoen skal vises. Et foto tåler å bli beskåret, en logo gjør ikke det
   – og beskjæring er som regel det første merkevareretningslinjer
   forbyr. Flaten er hvit med tynn ramme, så logoen står på sitt eget
   underlag og ikke rett på seksjonsfargen. */
.split__media--merke {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ingen ramme og ingen egen flate – logoen står rett på sidens
     bakgrunn. Uten ramme er det ingen grunn til å reservere et 3:2-felt
     heller; da blir det bare tomrom rundt en liten logo.

     KLARINGSSONE – KRAV FRA LEVERANDØREN.
     Novonesis krever fri sone rundt logoen tilsvarende høyden på
     bokstaven «n». Det godkjente merket er et rent ordmerke, beskåret
     helt inn til bokstavene, så «n» er praktisk talt hele filhøyden:
     368 px av 380. Logoen vises 320 px bred, og med sideforholdet
     7,89:1 blir den 41 px høy – altså er klaringssonen 40 px.

     Endrer du bredden under, må dette tallet endres i takt: sonen er
     alltid like høy som selve ordmerket. */
  padding: 40px;
  background: none;
  border: 0;
}

.produktside .split__media--merke img,
.split__media--merke img {
  width: 100%;
  /* Bredde- OG høydetak. Uten høydetak ville en nesten kvadratisk logo,
     som Novonesis', bli mye større på skjermen enn en bred som HACOs,
     selv om begge har samme maksbredde. */
  max-width: 320px;
  max-height: 200px;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Sidetopp på undersidene. Bevisst lys og rolig, ikke et nytt fotooppslag:
   heroen på forsiden skal være sidens ene store visuelle øyeblikk. */
.page-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line-soft);
  padding: 26px 0 34px;
}

.page-hero h1 {
  font-size: clamp(1.65rem, 2.9vw, 2.4rem);
  hyphens: auto;
  overflow-wrap: break-word;
  margin-bottom: .4em;
}

.page-hero__lead {
  font-size: 1.075rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 1.4rem;
}

/* Avsnittet under ingressen. Novonesis skrev om sidetoppen til en kort
   linje som sier hva gruppa er til, og et lengre avsnitt under som
   forklarer hva kulturene gjør. Det lengre står i vanlig brødtekst, ikke
   i ingressgrad – ellers konkurrerer de to om samme rolle og ingressen
   slutter å lese som en ingress. */
.page-hero__brodtekst {
  max-width: 62ch;
  margin-bottom: 1.4rem;
}

.breadcrumb { margin-bottom: 16px; }

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .875rem;
  color: var(--ink-mute);
}

/* Skilletegnet er ren dekor, derfor ::before på listepunktet og ikke et
   tegn i markupen – da leses det ikke opp av skjermlesere. */
.breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--line);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* Variant av sjekklista uten hake – brukt til «Kort om …» der punktene
   er egenskaper, ikke oppfylte krav. */
.checklist--flat li { padding-left: 0; }
.checklist--flat li::before { content: none; }

.checklist--flat li {
  border-left: 3px solid var(--blue-100);
  padding-left: 18px;
}

/* Ti blandinger under hverandre blir en lang stolpe. To spalter holder
   lista innenfor ett skjermbilde og gjør den lettere å skumme. */
@media (min-width: 760px) {
  .checklist--todelt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 40px;
  }

  /* To varer ved siden av hverandre skal ligge på linje, rad for rad.
     ----------------------------------------------------------------
     Noen varer har en linje mellom navnet og opplysningene – «Clean
     label – uten tilsatte smaksforsterkere» på RCA CL, «Effektiv
     allerede ved lav dosering» på Antioksidant 316. Naboen har ingen,
     og da forskjøv hele oppstillinga seg: SMAKSPROFIL hos den ene lå
     ved siden av navnet hos den andre, og BRUKSOMRÅDE et hakk for høyt.
     Det leses som at noe har sklidd ut av stilling.

     Med subgrid arver vara radene fra lista i stedet for å lage sine
     egne. Navn, mellomlinje og opplysninger får hver sin rad, delt av
     begge varene i raden. Vara uten mellomlinje lar rad to stå tom, og
     opplysningene starter likevel på samme høyde som naboens.

     :has() avgrenser regelen til varer som faktisk har opplysninger.
     Krydder- og fosfatsidene har bare navn og en setning, og trenger
     ingen justering.

     Nettlesere uten subgrid får oppstillinga som før – forskjøvet, men
     ikke ødelagt. */
  .checklist--todelt > li:has(.varefakta) {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
    /* Subgrid arver avstanden mellom radene fra lista, og lista har
       22 px mellom varene. Uten dette legges de 22 pikslene inn både
       mellom navn og mellomlinje og mellom mellomlinje og opplysninger,
       og vara sprikte. Avstanden skal komme fra marginene i teksten, som
       før. */
    row-gap: 0;
  }

  .checklist--todelt > li:has(.varefakta) > :is(h3, h4) { grid-row: 1; }
  .checklist--todelt > li:has(.varefakta) > p           { grid-row: 2; }
  .checklist--todelt > li:has(.varefakta) > .varefakta  { grid-row: 3; }
}

/* Skiller importerte varer fra egenproduserte. Bevisst nøktern: en
   opplysning om opphav, ikke et blikkfang som konkurrerer med
   overskriften. */
.merkelapp {
  display: inline-block;
  margin: 0 0 1em;
  padding: 5px 12px;
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-800);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* På produktkortet på forsiden sitter etiketten øverst til høyre, over
   lenkeflaten som dekker kortet. */
.card__merkelapp {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 18px;
  margin: 0;
  padding: 4px 10px;
  font-size: .7rem;
  background: var(--blue-50);
}

/* Undergruppe i et sortiment, f.eks. «For fisk og skalldyr».
   Luft alene holdt ikke – gruppene leste som én lang liste. Skillet
   gjøres derfor med tre virkemidler samtidig: mye større avstand, en
   strek over, og en mørkere og litt større etikett. Da ser man at det
   begynner noe nytt før man har begynt å lese. */
.sortiment-gruppe {
  margin-top: 56px;
  margin-bottom: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--blue-900);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Den første gruppa skal ikke ha strek – da ville den sett ut som et
   skille fra overskriften rett over. */
.sortiment-gruppe:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

/* Sammenhengende brødtekst, som fagteksten om kulturer.
   Tre grep gjør slik tekst lettere å lese enn resten av sida:
     • kortere linjer. 62 tegn er lettere å følge enn 68 når avsnittene
       kommer på rekke og rad – øyet finner starten på neste linje uten å
       lete.
     • mer luft mellom avsnittene. Nettopp fordi avstanden ellers ble
       strammet inn på produktsidene, blir lange tekstbolker for tette.
     • tydelig større sprang foran mellomtitlene, så teksten deler seg i
       bolker i stedet for å se ut som én vegg. */
.fagtekst p {
  max-width: 62ch;
  margin-bottom: 1.35em;
  line-height: 1.75;
}

.fagtekst h3 {
  margin-top: 2.4em;
  margin-bottom: .6em;
}

.fagtekst h3:first-of-type { margin-top: 1.8em; }

.fagtekst > h2 { margin-bottom: .8em; }

.fagtekst .tabellramme { margin: 32px 0 16px; }

.fagtekst .hero__actions { margin-top: 32px; }

/* Tabeller. Wrapperen scroller vannrett på smale skjermer, slik at det er
   tabellen som flytter seg og ikke hele sida. */
.tabellramme {
  overflow-x: auto;
  margin: 24px 0 8px;
  /* Blå ramme og avrundede hjørner, men fortsatt ingen skygge.
     Hjørnene var en periode skarpe, sammen med en skygge – da lå
     tabellen som et vindu oppå sida. Det var skyggen som gjorde det.
     Uten den er avrundede hjørner bare den samme formen som kortene og
     knappene ellers på sida, og tabellen slutter å skille seg ut.

     overflow-x: auto over her gjør at rammen også klipper innholdet, så
     den navy topprada får runde hjørner uten at tabellen trenger egen
     border-radius. Med border-collapse: collapse ville et forsøk på å
     runde av selve tabellen ikke virket – cellene tegnes utenpå. */
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
}

.tabellramme table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .95rem;
}

/* Tabellteksten er skjult visuelt – sammenhengen går fram av avsnittet
   over tabellen, så på skjerm er den overflødig. Den står igjen i koden
   fordi en skjermleser kan hoppe rett til en tabell uten å ha lest
   teksten rundt, og da er det denne setningen som forteller hva tabellen
   viser. Ingenting vises, ingenting går tapt. */
.tabellramme caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tabellramme th,
.tabellramme td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

/* Navy topprad. Hvit tekst mot --blue-800 gir 10,9:1. */
.tabellramme thead th {
  background: var(--blue-800);
  color: var(--white);
  border-bottom: 0;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Første kolonne er radens nøkkel, og bærer derfor mer vekt enn cellene
   ved siden av – men uten egen bakgrunn, som ville delt tabellen i to
   felt i stedet for å la den lese som én flate. */
.tabellramme tbody th {
  color: var(--blue-900);
  font-weight: 600;
  white-space: nowrap;
}

.tabellramme tbody tr:last-child th,
.tabellramme tbody tr:last-child td { border-bottom: 0; }

/* Tall som skal kunne sammenlignes loddrett. */
.tabellramme td { font-variant-numeric: tabular-nums; }

/* Bruksområde og effekt på et produktkort. Ledeteksten står som en smal
   kolonne til venstre, så flere kort kan sammenlignes linje for linje i
   stedet for å måtte leses hver for seg. */
.varefakta {
  margin: 10px 0 0;
  display: grid;
  gap: 4px 14px;
  font-size: .95rem;
}

@media (min-width: 560px) {
  .varefakta { grid-template-columns: minmax(96px, auto) 1fr; }
}

/* ... men ikke når varen står i en todelt liste.
   ------------------------------------------------------------------
   Da har hver vare bare halve spaltebredda, rundt 277 px. Etikettene
   tar 96 px av det, og teksten sitter igjen med omtrent 30 tegn i
   bredden. Det er under halvparten av det en linje trenger for å leses
   uanstrengt, og resultatet var en tekst som brøt for hver håndfull ord
   og krevde arbeid å lese.

   Etiketten legges derfor over teksten i stedet for ved siden av. Da
   får teksten hele bredda, rundt 45 tegn, og oppstillingen mister en
   loddrett kant øyet måtte forholde seg til.

   Regelen henger på .checklist--todelt, ikke på skjermbredda: det er
   ikke vinduet som er trangt, det er cella. Står varen i en liste med
   full bredde, er det god plass, og da blir etikettene stående ved
   siden av som før. */
.checklist--todelt .varefakta {
  grid-template-columns: 1fr;
  gap: 2px;
  /* Uten denne strekker den korteste av de to opplysningslistene radene
     sine for å fylle høyden naboen setter, og da havner den andre
     etiketten et hakk for lavt – stikk i strid med hensikten. */
  align-content: start;
}

.checklist--todelt .varefakta dt { padding-top: 0; }

/* Luft mellom to opplysninger, ikke mellom etikett og tekst. Uten
   dette blir alle fire linjene liggende like tett, og det er ikke lenger
   åpenbart hvilken tekst som hører til hvilken etikett. */
.checklist--todelt .varefakta dd + dt { margin-top: 12px; }

.varefakta dt {
  color: var(--ink-mute);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: .25em;
}

.varefakta dd {
  margin: 0;
  color: var(--ink-soft);
}

/* Opplysninger som ikke kan overses – i praksis allergener.
   --danger brukes her som varselfarge, ikke som aksent: fargen sier noe
   om innholdet, og skal ikke gjenbrukes til pynt andre steder.
   #A32B1F mot hvit gir 7,4:1. */
.varemerknad {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--danger);
  background: #FDF3F1;
  color: var(--ink);
  font-size: .92rem;
}

.varemerknad strong { color: var(--danger); }

/* Bildefeltet brukt til en leverandørlogo i stedet for et foto.
   Forskjellen fra et fotofelt er «contain» i stedet for «cover»: hele
   logoen skal vises. Et foto tåler å bli beskåret, en logo gjør ikke det
   – og beskjæring er som regel det første merkevareretningslinjer
   forbyr. Flaten er hvit med tynn ramme, så logoen står på sitt eget
   underlag og ikke rett på seksjonsfargen. */


.sortiment-note {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* Merknaden som hører til en tabell, rykkes inn til tabellens egen
   tekstkant: 1 px ramme pluss 16 px cellepadding. Den starter da på
   nøyaktig samme loddrette linje som «Spekepølse, tradisjonell» og
   resten av første kolonne, og leses som en fotnote til tabellen i
   stedet for som starten på et nytt avsnitt.

   Bare merknader som står rett etter en tabell. De andre sidene bruker
   samme klasse under produktlister, og der er det ingen kant å rette
   seg etter. */
.tabellramme + .sortiment-note {
  padding-left: 17px;
  /* Kursiv er vanlig for tabellmerknader i faglitteratur, og skiller
     merknaden fra brødteksten uten å gjøre den svakere enn den er.
     Krever den kursive fila lenger opp – uten den skråstiller
     nettleseren den oppreiste skrifta selv, og det ser billig ut. */
  font-style: italic;
}

.lenkeliste {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 2px;
  max-width: 620px;
}

.lenkeliste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  text-decoration: none;
  transition: padding-left .2s var(--ease), border-color .2s var(--ease);
}

.lenkeliste a::after {
  content: "→";
  color: var(--blue-600);
  flex: none;
}

.lenkeliste a:hover {
  padding-left: 10px;
  border-color: var(--blue-100);
}

@media (prefers-reduced-motion: reduce) {
  .lenkeliste a,
  .lenkeliste a:hover { transition: none; padding-left: 4px; }
}

/* Seksjon med gjennomgående foto og et hvitt kort oppå.
   Forskjellen fra heroen: der ligger teksten rett på bildet og trenger et
   overlegg for å holde kontrasten. Her står teksten på en hvit flate, så
   kontrasten er den samme som ellers på sida uansett hvilket foto som
   ligger bak. Det er også grunnen til at bildet ikke trenger scrim. */
.fotoseksjon {
  position: relative;
  isolation: isolate;
  padding: 72px 0;
  overflow: hidden;
  background: var(--blue-900);   /* synlig før fotoet er lastet */
}

.fotoseksjon__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.fotokort {
  max-width: 620px;
  padding: 34px 32px 36px;
  background: var(--white);
  border-radius: var(--radius-lg);
}

.fotokort > :last-child { margin-bottom: 0; }

/* Kortet til høyre i stedet for venstre. Brukes når motivet i fotoet
   ligger til venstre – da dekker kortet den rolige delen av bildet og
   lar motivet stå fram. */
.fotokort--hoyre { margin-left: auto; }

/* Leverandørlogo i en artikkelseksjon. Vises i sitt eget sideforhold,
   aldri beskåret og aldri strukket. */
.leverandormerke {
  width: auto;
  height: auto;
  max-width: 160px;
  margin-bottom: 22px;
}

/* Novonesis-ordmerket.
   ------------------------------------------------------------------
   STØRRELSE: bokstavene står 38 px høye, omtrent halvannen gang
   versalhøyden i overskriften under (25 px ved 36 px skriftgrad). Over
   det begynner leverandørens navn å overdøve våre egne overskrifter –
   merket sto en periode på 76 px, altså tre ganger overskriften, og
   Novonesis bemerket selv at det var for stort.

   Bredden er i ch, samme enhet som avsnittene rundt, så merket flukter
   med teksten uansett skjermstørrelse. 31ch gir 298 px, godt over
   minstemålet deres på 100 px.

   KLARINGSSONE: Novonesis krever fri sone lik høyden på «n». Ordmerket
   er beskåret inn til bokstavene, så «n» er hele merkehøyden, og
   forholdet mellom høyde og bredde er 122/960 = 12,71 %. Sonen regnes
   derfor ut av bredden og følger den automatisk.

   LUFTEN OVER OG UNDER er lik, målt der øyet måler: over fra
   skillelinja til første piksel i merket, under fra merket til
   versalhøyden i overskriften. Linjeavstanden legger 10 px tomrom over
   versalhøyden, og det trekkes fra under. Samme regnestykke som på
   HACO-merket. */
.leverandormerke--novonesis {
  --merkebredde: 31ch;
  --klaring: calc(var(--merkebredde) * 0.1271);
  --overskriftsluft: 10px;
  --seksjonsluft: 44px;
  --luft: calc(var(--klaring) + var(--overskriftsluft));
  display: block;
  width: 100%;
  max-width: var(--merkebredde);
  margin: max(0px, calc(var(--luft) - var(--seksjonsluft))) 0
          calc(var(--luft) - var(--overskriftsluft));
}

/* HACO-merket, utgaven med claim.
   ------------------------------------------------------------------
   STØRRELSE: satt slik at selve navnet blir like høyt som Novonesis-
   navnet på kultursida – 38 px begge steder. Begge ble halvert etter at
   Novonesis bemerket at merket deres sto for stort; de måtte flyttes
   sammen, ellers ville HACO plutselig stått dobbelt så stort. Det er den målestokken som
   lar seg forsvare hvis noen spør hvorfor den ene leverandøren står
   større enn den andre: begge firmanavnene er like store. Måler man i
   stedet blekkmengde havner HACO på 460 px, og i ren boksstørrelse på
   340 px. Navnehøyde er valgt fordi det er det øyet sammenligner.

   KLARINGSSONE: HACO krever fri sone lik to ganger høyden på claimet
   under «haco», altså «A HACO Foods Company». Målt i den godkjente fila
   er claimet 96 px høyt i et merke som er 1050 px bredt. Sonen er
   dermed 2 x 96 / 1050 = 18,3 % av bredden – et forhold, ikke et
   pikseltall, så det holder seg riktig i alle størrelser.

   LIK LUFT OVER OG UNDER, MÅLT DER ØYET MÅLER:

     over   = seksjonens padding + margin-top, fra skillelinja mellom
              hvit og grå ned til første fargede piksel. Merkefila er
              beskåret helt inn til blekket, så boks og blekk er det
              samme her.
     under  = margin-bottom + tomrommet linjeavstanden legger over
              versalhøyden i overskriften. Det tomrommet er 10 px når
              overskriften står på 36 px, og hører med i det man ser.

   Begge settes til --luft. Tallene er hentet fra sida slik den faktisk
   tegnes opp, ikke antatt: .produktside .section har 44 px padding – en
   fast verdi uten mediespørring, satt da produktsidene ble strammet inn.
   En tidligere utgave av denne regelen regnet med 64 og 96 px, og da ble
   margin-top null: luften over ble stående på 44 px mot 86 px under,
   altså nesten halvparten. Endrer noen padding i .produktside .section,
   må --seksjonsluft følge etter.

   BAKGRUNN: HACO tillater bare lys, ensfarget bunn. Seksjonen bruker
   --bg-alt (#F4F6FB), som oppfyller det. Merket må ikke flyttes inn i
   fotoseksjonen - der er bunnen et fotografi, og da er vi utenfor
   tillatelsen. */
.leverandormerke--haco {
  --merkebredde: 200px;
  --klaring: calc(var(--merkebredde) * 0.183);
  --overskriftsluft: 10px;
  --seksjonsluft: 44px;
  --luft: calc(var(--klaring) + var(--overskriftsluft));
  display: block;
  width: 100%;
  max-width: var(--merkebredde);
  margin: max(0px, calc(var(--luft) - var(--seksjonsluft))) 0
          calc(var(--luft) - var(--overskriftsluft));
}

/* Overskriften krymper på smale skjermer, og tomrommet over versalhøyden
   krymper med den. */
@media (max-width: 900px) {
  .leverandormerke--haco { --overskriftsluft: 8px; }
}

@media (max-width: 620px) {
  .fotoseksjon { padding: 40px 0; }
  .fotokort { padding: 26px 22px 28px; }
}

/* Statisk kart i kontaktseksjonen. Ingen innebygd karttjeneste, bare et
   bilde som lenker videre – se begrunnelsen i index.html. */
.kart {
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.kart a {
  position: relative;
  display: block;
  text-decoration: none;
}

.kart img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Knappen ligger oppå kartet, så det er tydelig at bildet er klikkbart.
   Et kart uten en slik knapp ser ut som en illustrasjon, ikke en lenke. */
.kart__knapp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--blue-800);
  color: var(--white);       /* 10,9:1 mot navy */
  font-size: .9rem;
  font-weight: 600;
  transition: background-color .15s var(--ease);
}

.kart a:hover .kart__knapp,
.kart a:focus-visible .kart__knapp { background: var(--blue-900); }

.kart__kreditering {
  padding: 8px 12px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  /* --ink-mute gir bare 4,3:1 mot den tonede flaten – nok mot hvit, men
     ikke her. --ink-soft gir 7,3:1. */
  color: var(--ink-soft);
  font-size: .78rem;
}

.kart__kreditering a { color: inherit; }

/* ---------- 12. Footer ---------- */
.site-footer {
  background: var(--blue-900);
  color: #BFC7DE;
  padding-top: 56px;
  border-top: 4px solid var(--blue-600);
}

.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }

.site-footer__inner {
  display: grid;
  gap: 36px;
  padding-bottom: 44px;
}

@media (min-width: 760px) {
  .site-footer__inner {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
  }
}

.logo--footer .logo__img { width: 180px; }

.site-footer__tagline {
  margin: 20px 0 0;
  font-size: .95rem;
  line-height: 1.65;
  max-width: 44ch;
  color: #BFC7DE;
}

.site-footer__col h2 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1em;
}

.site-footer__col address,
.site-footer__col ul {
  font-size: .95rem;
  line-height: 1.85;
}

.site-footer__col ul { list-style: none; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-block: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: .875rem;
}

.site-footer__bottom p { margin: 0; max-width: none; }

/* ---------- 13. Animasjoner ---------- */
/* Elementene skjules kun når JS er aktivt, slik at innholdet alltid
   er synlig hvis skriptet ikke lastes. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease) var(--delay, 0ms),
              transform .65s var(--ease) var(--delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Utskrift ---------- */
@media print {
  .site-header, .nav-toggle, .hero__actions, .contact__form, .skip-link { display: none; }
  body { color: #000; }
  .section, .hero { padding: 16px 0; }
  .js .reveal { opacity: 1; transform: none; }

  /* Nettlesere utelater bakgrunnsbilder ved utskrift. Uten dette ville
     heroens hvite tekst blitt stående på hvitt papir – altså usynlig. */
  .hero {
    background: none;
    min-height: 0;
    display: block;
  }
  .hero::before,
  .hero__bg,
  .hero__bg-img,
  .hero__bg-video { display: none; }
  .hero h1,
  .hero__lead,
  .hero .eyebrow { color: #000; }
  /* Strekene arver fargen via currentColor; her trengs bare full dekkevne. */
  .hero .eyebrow::before,
  .hero .eyebrow::after { opacity: 1; }
  .hero__content { max-width: none; }
}