/* nordicops.no 2026
 *
 * Fargene: de seks i paletten. Sida er papir (#CCD0CF) der tegningene står,
 * natt (#06141B) der produktet står. Bare to skifter på forsida, og de går over
 * en myk overgang, ikke en kant.
 *
 * Tegningene er hjelpeelementer, ikke hovedfokus. De står i sine egne farger;
 * bare papiret deres er byttet til sidas papir, og kantene er tonet ut, så de
 * ligger i sida uten ramme (verktoy/lag_fyll.py). De tegner seg selv opp én gang
 * når de kommer inn på skjermen (tegning.js). Ingen låste scener, ingen kamera.
 *
 * Skrift: Schibsted Grotesk til alt, Instrument Serif Italic som signatur.
 */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); }

:root {
  --natt: #06141B;
  --skumring: #11212D;
  --staal: #253745;
  --vask: #4A5C6A;     /* 4,45:1 på papir: bare store titler og streker */
  --solv: #9BA8AB;
  --papir: #CCD0CF;

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kursiv: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: 60px;
  --maks: 1560px;
  --topp-h: 76px;
  --rom: 136px;

  --ease-ut: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 1024px) { :root { --gutter: 40px; --rom: 104px; } }
@media (max-width: 640px)  { :root { --gutter: 24px; --rom: 80px; --topp-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papir); color: var(--natt); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.meny-aapen { overflow: hidden; overscroll-behavior: contain; }
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3, .slagord { text-wrap: balance; }
body { margin: 0; font: 400 18px/1.6 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--natt); color: var(--papir); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
/* Fylte knapper: ringen har flatens motsatte farge, ikke knappens tekstfarge (som er lik bakgrunnen rundt, R03) */
.knapp:focus-visible { outline: 2px solid var(--natt); outline-offset: 3px; }
:is([data-tone="natt"], .topp[data-paa="natt"], .meny, .bunn) .knapp:focus-visible { outline-color: var(--papir); }
[tabindex="-1"]:focus { outline: none; }
/* Fokus skal aldri havne under den faste toppen (WCAG 2.4.11, R06) */
html { scroll-padding-top: calc(var(--topp-h) + 24px); }
.skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { white-space: nowrap; }
.k { font-family: var(--kursiv); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
/* Kursiv midt i lesetekst: Instrument Serif har lavere x-høyde enn sans-skrifta, så den løftes
   for å stå like stort. Titler og slagord har sine egne, mer spesifikke regler. */
p .k, li .k { font-size: 1.22em; line-height: 1; letter-spacing: -.005em; font-weight: 400; }
.hopp { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--natt); color: var(--papir); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.hopp:focus { top: 12px; }
/* Uten JS: et hopp til en del lander med luft under menyen (felles.js sentrerer når det kan) */
section[id] { scroll-margin-top: calc(var(--topp-h) + 48px); }

/* Tonene. En seksjon sier hva den er, og fargen følger. */
[data-tone="papir"] { background: var(--papir); color: var(--natt); }
[data-tone="natt"] { background: var(--natt); color: var(--papir); }
.dempet { color: var(--staal); }
[data-tone="natt"] .dempet { color: var(--solv); }

/* Overgangen mellom papir og natt: S-kurve i elleve trinn, så øyet ikke ser knekk */
.overgang { height: clamp(120px, 22vh, 240px); }
.overgang.ned { background: linear-gradient(#CCD0CF 0%, #C8CDCC 8%, #BBC0C0 18%, #A1A7A8 30%, #81888A 42%, #697275 50%,
  #515C60 58%, #313D42 70%, #17242A 82%, #0A171E 92%, #06141B 100%); }
.overgang.opp { background: linear-gradient(#06141B 0%, #0A171E 8%, #17242A 18%, #313D42 30%, #515C60 42%, #697275 50%,
  #81888A 58%, #A1A7A8 70%, #BBC0C0 82%, #C8CDCC 92%, #CCD0CF 100%); }

/* ── Knapper: pillen fra palettbildet ───────────────────────────────────── */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: 700 16px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; border: 0;
  transition: transform .2s var(--ease-ut), background-color .2s, color .2s, box-shadow .2s; }
.knapp:active { transform: scale(.97); }
.knapp-natt { background: var(--natt); color: var(--papir); }
.knapp-natt:hover { background: var(--staal); }
.knapp-papir { background: var(--papir); color: var(--natt); }
.knapp-papir:hover { background: #E6E9E8; }
.knapp-strek { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.knapp-strek:hover { box-shadow: inset 0 0 0 2.5px currentColor; }
.knapp.liten { min-height: 42px; padding: 0 18px; font-size: 15px; }
.knapp .pil { transition: transform .25s var(--ease-ut); }
.knapp:hover .pil { transform: translateX(3px); }
/* SIDAS EGNE KNAPPER (28.10.2026, Phillip: «lag alle sånne knapper på alle sidene custom for siden»): ordene i sidas
   skrift med nøkkelordet i løkkeskrift, som titlene. INGEN ikoner i knappene (Phillip 28.10: «sa jeg ikke at du skal
   stoppe og bruke sånne stygge iconer på knappene? fiks det på alle sidene»); bygg.py stopper en side der en
   knapp-sig har en boble. Lenkene på sidene og i toppen er nå løkkeskrift med pil (.lokke-lenke), uten boble og uten flate. */
.knapp-sig { padding: 0 26px; }
.knapp-sig .ord { display: inline-flex; align-items: baseline; gap: .26em; white-space: nowrap; }
.knapp-sig .ord em { font: italic 400 1.42em/1 var(--kursiv); letter-spacing: 0; }
.knapp-sig.liten { padding: 0 20px; }
.knapp-sig:disabled { opacity: .6; cursor: default; }
@media (max-width: 860px) { .knapp-sig { justify-content: center; } }


/* ── Toppen ──────────────────────────────────────────────────────────────── */
.topp { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: calc(var(--topp-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), calc((100% - var(--maks)) / 2 + var(--gutter))) 0;
  display: flex; align-items: center; gap: 8px;
  color: var(--natt); transition: color .35s var(--ease), transform .45s var(--ease-ut); }
.topp[data-paa="natt"] { color: var(--papir); }
.topp.borte { transform: translateY(-110%); }
.topp.borte:focus-within { transform: none; }
.topp::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease);
  background: linear-gradient(to bottom, rgba(204,208,207,.97) 0%, rgba(204,208,207,.93) 70%, rgba(204,208,207,0) 100%); }
.topp[data-paa="natt"]::before { background: linear-gradient(to bottom, rgba(6,20,27,.95) 0%, rgba(6,20,27,.9) 70%, rgba(6,20,27,0) 100%); }
.topp.rullet::before { opacity: 1; }
/* N-merket på linje med tekstkanten, lenkene rett etter, «Kom i gang» helt til høyre */
.merke { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; text-decoration: none; }
.merke svg { width: auto; height: 26px; }
.hovednav { display: flex; gap: 2px; }
.hovednav a { position: relative; padding: 10px 14px; font: 600 16px/1 var(--sans); text-decoration: none; opacity: .8; transition: opacity .2s; border-radius: 999px; }
.hovednav a:hover, .hovednav a[aria-current="page"] { opacity: 1; }
.hovednav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: currentColor; border-radius: 2px; }
.topp > .lokke-topp, .menyknapp { margin-left: auto; }
.menyknapp { display: none; min-width: 44px; min-height: 44px; padding: 0 4px 0 14px; background: none; border: 0; color: inherit;
  font: 700 15px/1 var(--sans); cursor: pointer; align-items: center; gap: 10px; }
.menyknapp i { position: relative; width: 22px; height: 12px; display: block; }
.menyknapp i::before, .menyknapp i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease-ut), top .4s var(--ease-ut); }
.menyknapp i::before { top: 0; } .menyknapp i::after { top: 10px; }
.menyknapp[aria-expanded="true"] i::before { top: 5px; transform: rotate(45deg); }
.menyknapp[aria-expanded="true"] i::after { top: 5px; transform: rotate(-45deg); }
html.meny-aapen .topp { color: var(--papir); }
html.meny-aapen .topp::before { opacity: 0; }
@media (max-width: 860px) {
  .hovednav, .topp > .lokke-lenke { display: none; }
  .menyknapp { display: inline-flex; }
}

/* Mobilmenyen: egen scene, ikke en sammenpresset topp */
.meny { position: fixed; inset: 0; z-index: 90; background: var(--natt); color: var(--papir);
  padding: calc(var(--topp-h) + env(safe-area-inset-top) + 28px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--ease), visibility 0s .6s; }
.meny.aapen { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; }
.meny ul { list-style: none; margin: 0; padding: 0; }
.meny li { overflow: hidden; }
.meny li a:focus-visible { outline-offset: -4px; border-radius: 6px; }
.meny li a { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; min-height: 56px;
  font: 800 clamp(40px, 12vw, 64px)/1.05 var(--sans); letter-spacing: -.035em; text-decoration: none;
  transform: translateY(105%); transition: transform .7s var(--ease-ut); }
.meny li a .k { font-size: .62em; font-weight: 400; letter-spacing: 0; color: var(--solv); }
.meny.aapen li a { transform: none; }
.meny.aapen li:nth-child(2) a { transition-delay: .05s; } .meny.aapen li:nth-child(3) a { transition-delay: .1s; }
.meny.aapen li:nth-child(4) a { transition-delay: .15s; } .meny.aapen li:nth-child(5) a { transition-delay: .2s; }
.meny .meny-bunn { margin-top: auto; padding-top: 36px; display: grid; gap: 14px; }
.meny .meny-bunn a:not(.knapp):not(.lokke-lenke) { font: 600 18px/1.4 var(--sans); text-decoration: none; color: var(--solv); }

/* ── Byggeklosser ───────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maks); margin: 0 auto; padding: 0 var(--gutter); }
.seksjon { padding: var(--rom) 0; }
.tittel { margin: 0; font: 800 clamp(40px, 5.6vw, 88px)/.96 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.tittel .k { font-size: 1.08em; letter-spacing: -.015em; }
.ingress { font: 500 clamp(18px, 1.55vw, 22px)/1.5 var(--sans); letter-spacing: -.01em; max-width: 34ch; margin: 22px 0 0; }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 640px) { .knapper .knapp { flex: 1 1 auto; } }
/* Toppens lenke i løkkeskrift: en strek tegner seg under og pila glir når musa går over */
.lokke-lenke { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 6px; font: italic 400 34px/1.1 var(--kursiv);
  letter-spacing: 0; color: inherit; text-decoration: none; }
.lokke-lenke > svg { width: 30px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .45s var(--ease-ut); }
/* Ingen strek under (Phillip 29.10: «streken under kom igang ser ikke bra ut»); pila glir ut når du holder over */
html.bev .lokke-lenke:hover > svg { transform: translateX(6px); }
/* Samme lenke som knapp i skjemaet: ingen knappeflate, bare ordene og pila */
button.lokke-lenke { border: 0; border-radius: 0; margin: 0; padding: 0 0 6px; background-color: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lokke-lenke:disabled { opacity: .5; cursor: default; }
.skjema .lokke-lenke { justify-self: start; margin-top: 4px; }
@media (max-width: 640px) { .lokke-lenke { font-size: 30px; } }
/* Samme språk overalt (Phillip 29.10: «flytt det språket på knapper på hjem, løsninger, om oss. og den i headern») */
.topp > .lokke-topp { gap: 10px; min-height: 44px; padding-bottom: 2px; font-size: 25px; }
.topp > .lokke-topp > svg { width: 22px; height: 11px; }
.meny .lokke-lenke { justify-self: start; margin-bottom: 8px; font-size: 32px; }

/* To spalter: tekst og tegning. .snu legger tegningen til venstre. */
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px 80px; align-items: center; }
.par.snu { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.par.snu > .tegning { order: -1; }
@media (max-width: 860px) {
  .par, .par.snu { grid-template-columns: 1fr; gap: 24px; }
  .par.snu > .tegning { order: 0; }
}

/* Tegningen: et bilde i flyten. Lerretet ligger oppå mens den tegner seg opp,
   og forsvinner når den er ferdig, så det som står igjen er et vanlig bilde. */
.tegning { position: relative; margin: 0; }
.tegning img { width: 100%; height: auto; aspect-ratio: var(--forhold, 4 / 3); }
.tegning canvas { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--forhold, 4 / 3); height: auto; }
html.tegner .tegning[data-navn]:not(.ferdig) img { opacity: 0; }
/* Rett før byttet males bildet svakt under lerretet, så Safari har det dekodet og malt når det tar over (tegning.js) */
html.tegner .tegning[data-navn].forvarm:not(.ferdig) img { opacity: .01; }
/* VQ-04: i bildet der img blir synlig, skjules lerretet, så de to maskene aldri ligger oppå hverandre (mørk kant i ett bilde) */
.tegning.ferdig canvas { visibility: hidden; }
/* Ingen kanter (Phillip 28.10: «ingen synlige kutt, bare smoothe fadinger»): bildet og
   lerretet tones ut mot papiret på alle fire sider, med en myk S-kurve i stedet for en
   rett rampe. Bildeteksten under står utenfor masken. Masker er alfa, ikke farger. */
.tegning img, .tegning canvas {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 2%, rgba(0,0,0,.25) 4.5%, rgba(0,0,0,.55) 7.5%, rgba(0,0,0,.82) 10.5%, #000 14%, #000 86%, rgba(0,0,0,.82) 89.5%, rgba(0,0,0,.55) 92.5%, rgba(0,0,0,.25) 95.5%, rgba(0,0,0,.06) 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 2.5%, rgba(0,0,0,.25) 5.5%, rgba(0,0,0,.55) 9%, rgba(0,0,0,.82) 12.5%, #000 16%, #000 84%, rgba(0,0,0,.82) 87.5%, rgba(0,0,0,.55) 91%, rgba(0,0,0,.25) 94.5%, rgba(0,0,0,.06) 97.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 2%, rgba(0,0,0,.25) 4.5%, rgba(0,0,0,.55) 7.5%, rgba(0,0,0,.82) 10.5%, #000 14%, #000 86%, rgba(0,0,0,.82) 89.5%, rgba(0,0,0,.55) 92.5%, rgba(0,0,0,.25) 95.5%, rgba(0,0,0,.06) 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 2.5%, rgba(0,0,0,.25) 5.5%, rgba(0,0,0,.55) 9%, rgba(0,0,0,.82) 12.5%, #000 16%, #000 84%, rgba(0,0,0,.82) 87.5%, rgba(0,0,0,.55) 91%, rgba(0,0,0,.25) 94.5%, rgba(0,0,0,.06) 97.5%, transparent 100%);
  mask-composite: intersect;
}
.tegning figcaption { margin-top: 10px; font: 400 26px/1.1 var(--kursiv); font-style: italic; }
/* Ringestrekene over telefonen i under-bilen (bygg.py RINGER): kommer når tegningen er ferdig. Strekene skytes rolig
   ut fra telefonen, den midterste først, og tones bort, med pause mellom ringene. Uten bevegelse står de stille. */
.ringer { position: absolute; width: 21%; aspect-ratio: 3; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .9s var(--ease-ut); }
html.tegner .tegning:not(.ferdig) .ringer { opacity: 0; }
.ringer svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--natt); stroke-width: 2; stroke-linecap: round; }
.ringer path { opacity: .5; }
/* Tre ring, så ligger den stille (WCAG 2.2.2: ikke bevegelse i over fem sekunder uten stopp) */
html.bev .ringer path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: ringer 3s cubic-bezier(.33, 0, .2, 1) 3; }
html.bev .ringer path:nth-child(2), html.bev .ringer path:nth-child(3) { animation-delay: .14s; }
/* «Stopp bevegelse» i footeren: strekene står stille */
html.stoppet .ringer path { animation: none; stroke-dashoffset: 0; opacity: .5; }
/* VQ-19: større på telefon, der tegningen er smal */
@media (max-width: 760px) { .ringer { width: 32%; } }
html.bev .ringer path:nth-child(4), html.bev .ringer path:nth-child(5) { animation-delay: .28s; }
@keyframes ringer {
  0% { stroke-dashoffset: 1; opacity: 0; }
  10% { opacity: .7; }
  28% { stroke-dashoffset: 0; opacity: .7; }
  52%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Titler og avsnitt kommer rolig inn én gang. Ingenting følger rullingen. */
/* Plass under grunnlinja til halene i løkkeskriften (g, j, y), som ellers ble kappet av overflow (Phillip 29.10: «fiks g en») */
.linje { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
.linje > span { display: block; }
html.bev .vis-linjer .linje > span { transform: translateY(130%); transition: transform 1s var(--ease-ut); }
html.bev .vis-linjer.inne .linje > span { transform: none; }
html.bev .vis-linjer.inne .linje:nth-child(2) > span { transition-delay: .12s; }
html.bev .vis { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-ut), transform .9s var(--ease-ut); }
html.bev .vis.inne { opacity: 1; transform: none; }
/* TOPPEN av hver side kommer inn med en ren CSS-animasjon som starter i første bilde, uten JS (felles.js merker den
   bare som inne). Samme bevegelse som resten av sida. */
@media (prefers-reduced-motion: no-preference) {
  :is(.inngang, .underside-topp, .os-topp) .vis { animation: vis-inn .9s var(--ease-ut) both; }
  :is(.inngang, .underside-topp, .os-topp) .vis-linjer .linje > span { animation: linje-inn 1s var(--ease-ut) both; }
  :is(.inngang, .underside-topp, .os-topp) .vis-linjer .linje:nth-child(2) > span { animation-delay: .12s; }
}
@keyframes vis-inn { from { opacity: 0; transform: translateY(16px); } }
@keyframes linje-inn { from { transform: translateY(130%); } }

/* ── Forsida ─────────────────────────────────────────────────────────────── */
.inngang { padding: calc(var(--topp-h) + 48px) 0 calc(var(--rom) * .7); min-height: 88svh; display: flex; align-items: center; }
.inngang .par { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
/* Tegningen i toppen får gå helt ut i margen på høyre side: mer av sida, samme tekstkant */
@media (min-width: 861px) { .inngang .tegning { margin-right: calc(var(--gutter) * -1); } }
.inngang h1 { margin: 0; font: 800 clamp(44px, 4.3vw, 92px)/.92 var(--sans); letter-spacing: -.05em; }
/* To linjer, alltid: størrelsen er regnet så «Mindre styr.» får plass i spalten */
.inngang h1 .linje > span { white-space: nowrap; }
.inngang h1 .k { font-size: 1.1em; letter-spacing: -.02em; }
.inngang .ingress { max-width: 26ch; }
@media (max-width: 860px) {
  .inngang { min-height: 0; padding-top: calc(var(--topp-h) + 36px); }
  .inngang .par { grid-template-columns: 1fr; }
}

.gamle h2, .ordnet h2 { margin: 0; font: 800 clamp(36px, 4.6vw, 72px)/1.02 var(--sans); letter-spacing: -.04em; }
.gamle h2 .k, .ordnet h2 .k { display: block; margin-top: .1em; font-size: min(1.08em, 10cqi); letter-spacing: -.015em; white-space: nowrap; }
.gamle h2, .ordnet h2 { container-type: inline-size; }
.ordnet { padding-top: 0; }

.tre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 40px; margin-top: 64px; align-items: start; }
.tre .tegning { margin-bottom: 18px; }
.tre h3 { margin: 0 0 8px; font: 400 clamp(32px, 3vw, 44px)/1 var(--kursiv); font-style: italic; letter-spacing: -.02em; }
.tre p { margin: 0; font-size: 18px; line-height: 1.5; }
.tre ul { list-style: none; margin: 14px 0 0; padding: 0; color: var(--staal); font-size: 16px; display: grid; gap: 6px; }
.tre ul li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 12px 2px 0; }
@media (max-width: 1180px) { .tre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; } }
.tre.tre-kol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Titlene og tekstene på rekke (Phillip 28.10): kortene deler radene (subgrid), så
   tegninger med ulik høyde står nede mot tittelen og titlene står på samme linje. */
@media (min-width: 961px) {
  .tre.tre-kol { grid-template-rows: auto auto auto; row-gap: 0; }
  .tre-kol > .kort-lenke { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .tre-kol > .kort-lenke > .tegning { align-self: end; }
}
@media (max-width: 960px) { .tre.tre-kol { grid-template-columns: 1fr; max-width: 620px; } }
/* Hele kortet er lenka; tittelen får en pil som flytter seg ved peker */
.kort-lenke { display: block; text-decoration: none; color: inherit; }
.kort-lenke h3::after { content: " →"; content: " →" / ""; font-family: var(--sans); font-style: normal; font-size: .5em; vertical-align: .35em;
  display: inline-block; transition: transform .25s var(--ease-ut); }
.kort-lenke:hover h3::after { transform: translateX(4px); }
@media (max-width: 640px) { .tre { grid-template-columns: 1fr; } }
.flaggskip { margin-top: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding-top: 36px; box-shadow: 0 -1.5px 0 rgba(6,20,27,.14); }
.flaggskip p { margin: 0; font: 500 clamp(20px, 1.8vw, 26px)/1.35 var(--sans); letter-spacing: -.01em; max-width: 44ch; }
.flaggskip p .k { font-size: 1.15em; }
.etikett { margin: 0 0 18px; font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--solv); }

.one-hode { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--solv); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--papir); }
.one-ramme { margin: 56px 0 0; border-radius: 16px; overflow: hidden; background: #06141B; box-shadow: 0 30px 80px -24px rgba(0,0,0,.8), 0 0 0 1px #253745; }
.one-ramme img { width: 100%; height: auto; }
.one-ramme-tekst { margin-top: 18px; font-size: 15px; }
@media (max-width: 760px) { .one-hode { grid-template-columns: 1fr; } .one-ramme { margin-top: 36px; border-radius: 12px; } }


.alle { margin-top: 48px; }
@media (max-width: 860px) { .alle { margin: 32px calc(var(--gutter) * -1) 0; } }  /* bred tegning: helt ut på mobil */

.folk { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 28px; }
.person h3 { margin: 0; font: 400 30px/1.05 var(--kursiv); font-style: italic; }
.person p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }

/* ── Avslutningen og skjemaet ───────────────────────────────────────────── */
.slutt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 80px; margin-top: 64px; align-items: start; }
.direkte { display: grid; gap: 4px; }
.direkte a { font: 800 clamp(28px, 3.2vw, 44px)/1.15 var(--sans); letter-spacing: -.03em; text-decoration: none; width: fit-content; }
.direkte a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.direkte p { margin: 14px 0 0; }
.direkte .tegning { margin-top: 0; max-width: 520px; }
/* Skjemaet: én strek under hvert felt (sidas «én strek»), som tegner seg mørk fra venstre når feltet er i bruk.
   Store bokstaver når du skriver, eksempelteksten i løkkeskrift. */
.skjema { display: grid; gap: 30px; }
.skjema-par { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.felt { display: grid; align-content: start; }
.felt label { font: 600 14px/1.3 var(--sans); letter-spacing: .01em; color: var(--staal); }
.felt .valgfritt { margin-left: 4px; font: italic 400 17px/1 var(--kursiv); letter-spacing: 0; color: var(--staal); }
/* Løkkeskriften heller og går dypt: 4 px luft til venstre (trukket inn igjen, så teksten står på linje med etiketten) og
   høye nok linjer, ellers kapper feltet venstre kant av F og 8 og halen på g (Phillip 29.10: «det er cuts i noen bokstaver») */
.skjema input, .skjema textarea { width: calc(100% + 4px); margin: 0 0 0 -4px; padding: 10px 0 12px 4px; border: 0; border-radius: 0; color: var(--natt);
  font: 500 22px/1.6 var(--sans); letter-spacing: -.01em; -webkit-appearance: none; appearance: none;
  background: linear-gradient(var(--natt), var(--natt)) 0 100% / 0 2px no-repeat, linear-gradient(var(--vask), var(--vask)) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--ease-ut); }
.skjema textarea { min-height: calc(2 * 1.45 * 24px + 22px); max-height: 40vh; overflow-y: auto; resize: none; field-sizing: content; }
.skjema input::placeholder, .skjema textarea::placeholder { color: var(--vask); opacity: 1; font: italic 400 24px/1.45 var(--kursiv); letter-spacing: 0; }
.skjema input:focus, .skjema textarea:focus { outline: none; background-size: 100% 2px, 100% 1px; }
.skjema input:focus-visible, .skjema textarea:focus-visible { outline: none; }
.skjema input:-webkit-autofill { -webkit-text-fill-color: var(--natt); transition: background-color 600000s 0s; }
.skjema [aria-invalid="true"] { background-image: linear-gradient(#9E2430, #9E2430), linear-gradient(#9E2430, #9E2430); background-size: 100% 2px, 100% 1px; }
.skjema .feil { min-height: 1.3em; margin: 8px 0 0; font-size: 14px; line-height: 1.3; color: #9E2430; }
.skjema .feil:empty { margin-top: 0; min-height: 0; }
.skjema .lur { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skjema .status-melding { margin: -14px 0 0; font-size: 16px; }
.skjema .status-melding:empty { display: none; }
.skjema .knapp { justify-self: start; margin-top: 6px; }
.skjema[hidden] { display: none; }
@media (max-width: 860px) { .slutt-grid { grid-template-columns: 1fr; } .skjema .knapp { justify-self: stretch; } }
@media (max-width: 640px) { .skjema-par { grid-template-columns: 1fr; } .skjema input, .skjema textarea { font-size: 20px; } }

/* Footeren har eget ark (bunn.css, 28.10) */

/* ── Undersider ─────────────────────────────────────────────────────────── */
.underside-topp { padding: calc(var(--topp-h) + 64px) 0 calc(var(--rom) * .6); }
.underside-topp h1 { margin: 0; font: 800 clamp(46px, 6.4vw, 100px)/.94 var(--sans); letter-spacing: -.05em; }
.underside-topp h1 .k { font-size: 1.08em; letter-spacing: -.02em; }
/* «Store planer? / Vi lytter.» (Kontakt, Phillip 29.10): hver setning på sin linje. Den første er for bred for spalta i
   full størrelse, så den krymper akkurat nok (6,3 em bred), i stedet for å brekke til tre linjer */
.underside-topp h1.hver-sin-linje { container-type: inline-size; }
.underside-topp h1.hver-sin-linje .linje { white-space: nowrap; }
.underside-topp h1.hver-sin-linje .linje:first-child { font-size: min(1em, 15.4cqi); }
.tekst { max-width: 64ch; }
.tekst h2 { margin: 48px 0 10px; font: 800 26px/1.2 var(--sans); letter-spacing: -.02em; }
.tekst p, .tekst li { font-size: 18px; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Om oss: en fortelling, lest i én rolig spalte ──────────────────────── */
.fortelling { max-width: 62ch; margin: 0 auto; }
.par .fortelling { margin: 0; }
.fortelling p { margin: 0 0 18px; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.65; }
.fortelling p:last-child { margin-bottom: 0; }
.fortelling .spm { font-weight: 600; letter-spacing: -.01em; }
/* Signaturkursiven midt i lesetekst: Instrument Serif har lavere x-høyde, så den
   løftes litt for å stå like stort som ordene rundt */
.fortelling .k { font-size: 1.24em; line-height: 1; letter-spacing: -.005em; }
.utsagn { margin: clamp(56px, 8vw, 104px) auto; max-width: 22ch; text-align: center;
  font: 800 clamp(36px, 4.6vw, 72px)/1.04 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.utsagn .k { display: block; font-size: 1.08em; letter-spacing: -.015em; }
h2.utsagn { margin-top: 14px; }
/* Linja rett over «Og vi har så vidt begynt»: sentrert på samme akse, som en innledning til den */
.for-slutt { margin: 0 auto; max-width: 40ch; text-align: center; text-wrap: balance;
  font: 500 clamp(20px, 1.7vw, 26px)/1.4 var(--sans); letter-spacing: -.01em; }
.for-slutt .k { font-size: 1.24em; line-height: 1; }
.folk-rad { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 72px; margin-top: 16px; text-align: center; }
.folk-rad .person img { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px;
  filter: grayscale(1) contrast(1.04); mix-blend-mode: multiply; }
/* «Vi så alt som var mulig»: setningen til venstre, spørsmålene til høyre, på sidas egne kanter */
.mulig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: center; }
.utsagn.venstre { margin: 0; max-width: 14ch; text-align: left; font-size: clamp(36px, 3.6vw, 64px); }
/* Spørsmålene er lesetekst, ikke titler: vanlig vekt, «Hva om» i kursiv, og konklusjonen bærer */
.sporsmal { display: grid; gap: 22px; max-width: 40ch; }
.sporsmal p { margin: 0; }
.sporsmal .spm { font: 400 clamp(18px, 1.3vw, 20px)/1.6 var(--sans); }
.sporsmal .hva { font-size: 1.3em; line-height: 1; letter-spacing: -.01em; }
.sporsmal .svar { margin-top: 8px; font: 700 clamp(18px, 1.3vw, 20px)/1.5 var(--sans); letter-spacing: -.01em; }
/* Det markerte står i løkkeskrift (Phillip 29.10: «alt markert skal være løkkeskrift»); «NordicOps.» står i sidas skrift */
.sporsmal .svar .k { font-size: 1.3em; letter-spacing: 0; }
@media (max-width: 860px) { .mulig { grid-template-columns: 1fr; gap: 28px; } }

/* ── Løsninger: én del = etikett, overskrift, brødtekst, liste eller knapp ──
   Fire skriftstiler og én avstandsskala for hele sida, så ingenting står og konkurrerer. */
.tj { max-width: 560px; }
.tj-navn { margin: 0 0 16px; font: 600 15px/1.2 var(--sans); letter-spacing: .02em; color: var(--staal); }
.tj-tittel { margin: 0; font: 800 clamp(34px, 3.4vw, 54px)/1.04 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.tj-tittel .k { font-size: 1.08em; font-weight: 400; letter-spacing: -.015em; }
.tj .ingress { margin: 24px 0 0; max-width: 30ch; }
/* Kursiven er lavere enn sans-skrifta; løftes så den står like stort */
.ingress .k { font-size: 1.22em; line-height: 1; }
/* Sidetittelen på to linjer, alltid: størrelsen er regnet så «Vi lager systemer» får plass i spalten */
.tj h1 { font-size: clamp(38px, 3.6vw, 64px); }
.tj h1 .linje > span { white-space: nowrap; }
@media (max-width: 360px) { .tj h1 .linje > span { white-space: normal; } }
/* Telefonen: tegningen står alltid over teksten i hver del, så rekkefølgen er lik nedover */
@media (max-width: 860px) { .seksjon .par:has(> .tj) > .tegning { order: -1; } }
.tj-tekst { margin-top: 24px; }
.tj-tekst p { margin: 0 0 16px; font-size: clamp(18px, 1.3vw, 20px); line-height: 1.6; }
.tj-tekst p:last-child { margin-bottom: 0; }
/* Én setning som skal stå på én linje (Phillip 29.10: «å lykkes» alene på linja under, «flytt» opp). Den er 6–16 px for
   lang for spalta; fra 1360 px er det plass i mellomrommet mot tegningen. Smalere: kursiven står samlet ( ). */
@media (min-width: 1360px) { .tj-tekst p.en-linje { white-space: nowrap; } }
.tj-liste-navn { margin: 32px 0 14px; }
.tj-knapp { margin-top: 32px; }
.faar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.faar li { position: relative; padding-left: 24px; font-size: clamp(18px, 1.3vw, 20px); line-height: 1.5; }
.faar li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.slutt-linje .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.slutt-linje .tj-tittel { max-width: 22ch; }
.slutt-linje .tj-knapp { margin-top: 0; }
/* Toppen av Løsninger: slagord, så to korte avsnitt */
.topptekst { margin-top: 28px; max-width: 44ch; }
.topptekst p { margin: 0 0 14px; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; }
.topptekst .slagord { margin-bottom: 18px; font: 700 clamp(22px, 1.9vw, 28px)/1.25 var(--sans); letter-spacing: -.02em; }
.topptekst .slagord .k { font-size: 1.1em; font-weight: 400; letter-spacing: -.01em; }
/* Forsida, «Vi lager systemer»: slagord til venstre, avsnitt til høyre */
.to-kol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 80px; align-items: start; margin-top: 28px; }
.to-kol .slagord { margin: 0; max-width: 22ch; font: 700 clamp(24px, 2.3vw, 36px)/1.2 var(--sans); letter-spacing: -.025em; }
.to-kol .slagord .k { font-size: 1.1em; font-weight: 400; letter-spacing: -.01em; }
.to-kol .topptekst { margin-top: 4px; max-width: 46ch; }
.to-kol .topptekst p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .to-kol { grid-template-columns: 1fr; } }

/* ── Om oss: samme byggeklosser som Løsninger ───────────────────────────
   Innledningen (.tj-lead) er første avsnitt i en del, litt større, så hver del har
   noe som leder blikket uten at teksten deles opp eller får nye overskrifter. */
/* p.tj-lead slår .tj-tekst p, som ellers setter brødtekststørrelsen */
p.tj-lead, .tj-tekst p.tj-lead { font: 500 clamp(20px, 1.6vw, 26px)/1.45 var(--sans); letter-spacing: -.015em; }
.tj-tekst p.tj-lead { margin-bottom: 20px; }
.om-start { margin: 28px 0 0; max-width: 32ch; }
.tj h1 .linje:last-child .k { font-size: 1.1em; }
.om-slutt { text-align: center; }
.om-slutt .utsagn { margin: 16px auto 56px; font-size: clamp(44px, 4.6vw, 80px); }
.om-knapp { margin: 48px 0 0; }

/* VQ-18: trykkflatene på telefon er minst 44 px høye */
@media (pointer: coarse) {
  .lokke-lenke { min-height: 44px; }
  .direkte a { display: flex; align-items: center; min-height: 44px; }
}

/* Personvernerklæringen: én rolig lesespalte med nummererte deler */
.juss-dato { margin: 18px 0 0; font-size: 15px; color: var(--staal); }
.juss { max-width: 68ch; }
.juss h2 { margin: 48px 0 12px; font: 700 clamp(21px, 1.7vw, 26px)/1.25 var(--sans); letter-spacing: -.02em; }
.juss h2:first-child { margin-top: 0; }
.juss p { margin: 0 0 14px; }
.juss a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }