/* =========================================================
   Fagr Creative Agency
   Fold7-strukturen med Fagrs eget innhold og farger.
   Alt som styrer utseendet ligger i :root. Bytt der først.
   ========================================================= */

/* Selvhostede fonter (variable, latin-subsett med æøå).
   Ingen Google-CDN i produksjon: raskere, og trygt etter GDPR. */
@font-face{
  font-family:'Archivo';
  src:url('../assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* Farger */
  --krem:      #EFE9DE;
  --papir:     #F6F2E9;
  --brun:      #46392E;
  --dyp:       #1E1710;   /* mørke kapitler */
  --oliven:    #625E45;
  --linje:     #DCD3C2;
  --invers:    #F3EEE4;

  /* Aksent: KLAR RØD, samme som markørdotten. Nora + Tuva 19. aug
     (live-dagen): én rød på hele siden — meny-hover, scrolleprikk,
     markør og alle småaksenter skal matche. Rustrøden #D14B24 fra
     skissene er historie. Brukes kun i bevegelse og små detaljer,
     aldri som flatefyll. */
  --aksent:    #C8102E;

  /* Markørdotten arver aksenten, så fargen bor på ett sted. */
  --dott:      var(--aksent);

  /* Skrift. Archivo bærer display OG utsagn, i slekt med logoens
     grotesk. (Anton ble vraket 11. aug: for tabloid.) Neue Haas
     venter på lisensavklaring. */
  --f-rop:     'Archivo', -apple-system, Helvetica, Arial, sans-serif;
  --f-arch:    'Archivo', -apple-system, Helvetica, Arial, sans-serif;
  --f-sans:    'Inter', -apple-system, Helvetica, Arial, sans-serif;

  /* Mål */
  --marg:      clamp(20px, 5vw, 72px);
  --seksjon:   clamp(72px, 11vw, 160px);
  --maks:      1360px;
  --topp:      76px;

  /* Bevegelse. --glid er kurven fra Noras motion-designfiler. */
  --lett:      cubic-bezier(.16,1,.3,1);
  --glid:      cubic-bezier(.2,.6,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@view-transition{navigation:auto}

/* klipper 3D-projeksjoner (panelets rotateX) uten aa lage
   scroll-kontekst, saa sticky-pinnene virker som foer */
main{overflow-x:clip}

body{
  margin:0;
  background:var(--krem);
  color:var(--brun);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

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

a{color:inherit;text-decoration:none}
main a:not(.pille):not(.kort):not(.kjempe-lenke){text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

:focus-visible{outline:2px solid var(--brun);outline-offset:3px}
.mork :focus-visible{outline-color:var(--invers)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--marg);top:12px;z-index:99;background:var(--brun);color:var(--invers);padding:10px 16px}

::selection{background:var(--brun);color:var(--invers)}

/* ---------- Byggeklosser ---------- */

.eyebrow{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oliven);
  margin:0 0 20px;
}
.mork .eyebrow{color:color-mix(in srgb, var(--invers) 62%, transparent)}

/* Kjempeoverskrift i condensed caps */
.h-kjempe{
  font-family:var(--f-rop);
  font-weight:650;
  font-size:clamp(34px,5.4vw,80px);
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 40px;
}

.sr{position:absolute;left:-9999px}

.pille{
  display:inline-block;
  font-family:var(--f-sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:14px 30px;
  border:1px solid currentColor;
  border-radius:999px;
  background:none;
  color:inherit;
  cursor:pointer;
  transition:background .35s var(--lett), color .35s var(--lett);
}
.pille:hover{background:var(--brun);color:var(--invers);border-color:var(--brun)}
.pille-fylt{background:var(--brun);color:var(--invers);border-color:var(--brun)}
.pille-fylt:hover{background:transparent;color:var(--brun)}

.section{
  max-width:var(--maks);
  margin:0 auto;
  padding:var(--seksjon) var(--marg);
}
.section + .section{border-top:1px solid var(--linje)}

/* Myk inntreden når ting kommer i bildet */
[data-inn]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--lett), transform .8s var(--lett)}
[data-inn].er-inne{opacity:1;transform:none}

/* ---------- Header ---------- */

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px var(--marg);
  pointer-events:none;
  transition:transform .45s var(--lett);
}
.site-header > *{pointer-events:auto}
.site-header.skjult{transform:translateY(-110%)}

.wordmark svg{display:block;height:30px;width:auto;fill:currentColor}
.wordmark{color:var(--brun);transition:color .35s ease}

.meny-knapp{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  background:none;border:0;padding:8px 0;
  color:var(--brun);
  cursor:pointer;
  transition:color .35s ease;
}
.meny-knapp::after{
  content:"";display:block;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--lett);
}
.meny-knapp:hover::after{transform:scaleX(1);transform-origin:left}

.header-lenker{display:flex;align-items:center;gap:clamp(18px,3vw,34px)}

/* over mørke flater */
.header-lys .wordmark,.header-lys .meny-knapp{color:var(--invers)}

/* ---------- Fullskjermsmeny ---------- */

.meny{
  position:fixed;inset:0;z-index:35;
  background:var(--dyp);
  color:var(--invers);
  display:flex;flex-direction:column;
  padding:calc(var(--topp) + 20px) var(--marg) 40px;
  clip-path:inset(0 0 0 0);
}
.meny-lenker{display:flex;flex-direction:column;margin-top:auto}
.meny-lenker a{
  font-family:var(--f-rop);
  font-weight:650;
  font-size:clamp(34px,7vh,72px);
  line-height:1.12;
  letter-spacing:-.03em;
  width:max-content;
  opacity:0;transform:translateY(40px);
  transition:opacity .5s var(--lett), transform .6s var(--lett), color .3s ease;
  transition-delay:calc(var(--i) * 60ms);
}
.meny.er-apen .meny-lenker a{opacity:1;transform:none}
.meny-lenker a:hover{color:var(--aksent)}
.meny-bunn{
  margin-top:auto;
  display:flex;flex-wrap:wrap;gap:8px 40px;
  font-size:14px;
}
.meny-bunn p{margin:0}
.meny .eyebrow{color:color-mix(in srgb, var(--invers) 72%, transparent)} /* oliven strøk på mørkt */
.meny-bunn .eyebrow{margin:0;align-self:center}
.meny-bunn a:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- 1 · Logoen som vindu ---------- */

.knock{
  position:relative;
  height:100svh;
  background:var(--krem);
  overflow:hidden;
}
/* Panelet: heroen staar bom stille (sticky), og den moerke
   seksjonen reiser seg opp OVER den som et 3D-panel, hengslet i
   toppen, som retter seg ut idet det legger seg paa plass.
   Heroen dimmes svakt under panelet (skyggen det kaster).
   Drives scrollstyrt fra main.js. Uten JS/redusert bevegelse:
   vanlige seksjoner. */
.hero-reise{position:relative}
.hero-aktiv .hero-reise{height:140svh}
.hero-aktiv .knock{position:sticky;top:0}
.knock::after{
  content:'';position:absolute;inset:0;z-index:5;
  background:var(--dyp);
  opacity:var(--morkne, 0);
  pointer-events:none;
}

/* Filmen er beskåret til nøyaktig sonen med alle elementene
   (kilde-y 950–2820: te, telefon, solbriller, kamera, rødt), så
   fill-strekket inn i båndet er bare ~1,3×, knapt synlig, mot
   2,2× før. Logoen ett hakk mindre (Noras forslag) gir luft. */
.knock-media{
  position:absolute;left:50%;top:50%;
  width:94vw;
  height:47vw;
  transform:translate(-50%,-50%);
  object-fit:fill;
}
.knock-cover{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
  display:block;
  padding:0 6vw;
  transition:transform .95s var(--glid);
}
.knock-sted{
  position:absolute;left:var(--marg);bottom:28px;z-index:3;margin:0;
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brun);
}
.knock-sted i{width:8px;height:8px;border-radius:50%;background:var(--oliven)}

/* det lille ordmerket i headeren er overflødig over kjempelogoen */
.wordmark{transition:opacity .4s ease, color .35s ease}
.ved-knock .wordmark{opacity:0;pointer-events:none}

/* ---------- 3 · Serif-manifest ---------- */

.manifest{
  max-width:var(--maks);
  margin:0 auto;
  padding:calc(var(--seksjon) * 1.15) var(--marg);
}
/* Lettere vekt og roligere linjer, slik Noras skisse viser */
.manifest-tekst{
  font-family:var(--f-arch);
  font-weight:500;
  font-size:clamp(26px,3.6vw,50px);
  line-height:1.22;
  letter-spacing:-.015em;
  max-width:24ch;
  margin:0;
  text-wrap:pretty;
}
.ring,.strekord{position:relative;display:inline-block;white-space:nowrap}
.ring svg,.strekord svg{position:absolute;pointer-events:none;overflow:visible}
.ring svg{inset:-16% -7% -20% -8%;width:115%;height:136%}
.strekord svg{left:-2%;bottom:-.22em;width:104%;height:.4em}
.ring path,.strekord path{
  fill:none;
  stroke:var(--aksent);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.tegnet path{transition:stroke-dashoffset 1.1s ease .15s}
.tegnet path.p2{transition-delay:.5s}
.tegnet.er-inne path{stroke-dashoffset:0}

.mork{background:var(--dyp);color:var(--invers)}

/* ---------- 3b · Kameraturen: foldet filmstripe i 3D ----------
   Grunnstilen er en flat rad man kan bla i (uten JS / redusert
   bevegelse). Med JS får scenen .er-3d og panelene stables og
   transformeres fra main.js. */

/* Kortere vei fra kundelogoene ned til karusellen (Tuva-møtet 19. aug):
   kunder slipper halve bunnluften sin, og karusellen starter tettere på. */
#kunder{padding-bottom:calc(var(--seksjon) * .45)}
.kamera{padding:calc(var(--seksjon) * .3) 0 calc(var(--seksjon) * .5);overflow:clip}
.kamera-hode{max-width:var(--maks);margin:0 auto;padding:0 var(--marg)}
.kamera-hode .eyebrow{margin-bottom:34px}

.kamera-scene{
  --kam-h: min(64svh, 620px);
  --kam-b: calc(var(--kam-h) * .74);
  height:var(--kam-h);
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;
  padding:0 var(--marg);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.kamera-scene::-webkit-scrollbar{display:none}
.kamera-scene:focus-visible{outline:2px solid var(--brun);outline-offset:6px}

/* Sylindergeometrien er portet fra Noras designfil (carousel-3d.html):
   flisene står på en trommel med 34° mellomrom, scenen roterer. */
.kamera-scene.er-3d{
  /* litt større fliser enn først (Tuvas tilbakemelding 12. aug).
     19. aug ble en større variant (26vw/360px) testet og vraket
     på Tuva-møtet - denne størrelsen er den riktige. */
  --kam-flis-b: clamp(210px, 22vw, 300px);
  --kam-flis-h: calc(var(--kam-flis-b) * 1.6);
  display:block;position:relative;
  height:calc(var(--kam-flis-h) + 80px);
  overflow:hidden;
  perspective:1400px;
  perspective-origin:50% 50%;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.kamera-scene.er-3d.drar{cursor:grabbing}
/* Under draget skal trommelen sitte KLISTRET til fingeren.
   Med transition pa ville den glidd 0,5 s etter - det var
   "surringen" pa iPhone. Glidningen gjelder bare slippet. */
.kamera-scene.er-3d.drar .kamera-strip{transition:none}

.kamera-strip{display:contents}
.er-3d .kamera-strip{
  display:block;position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .52s var(--glid);
}

.kamera-panel{
  width:var(--kam-b);height:100%;
  flex:0 0 auto;margin:0;position:relative;
  scroll-snap-align:center;
  background:#0d0a07;overflow:hidden;border-radius:6px;
}
.er-3d .kamera-panel{
  position:absolute;left:50%;top:50%;
  width:var(--kam-flis-b);height:var(--kam-flis-h);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  outline:1px solid color-mix(in srgb, var(--brun) 10%, transparent);
  box-shadow:0 4px 16px rgba(72,59,47,.10);
  transition:opacity .52s var(--glid), box-shadow .52s var(--glid), transform .52s var(--glid);
}
.er-3d .kamera-panel[data-aktiv="true"]{
  outline:1px solid color-mix(in srgb, var(--brun) 24%, transparent);
  box-shadow:0 20px 48px rgba(72,59,47,.18);
}
.kamera-panel video{width:100%;height:100%;object-fit:cover}
.kamera-panel figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:40px 16px 14px;
  background:linear-gradient(transparent, rgba(13,10,7,.55));
  font-family:var(--f-sans);font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--invers);
  pointer-events:none;
}
.kamera-klikk{
  position:absolute;inset:0;z-index:3;
  background:none;border:0;cursor:pointer;
  color:transparent;font-size:0;
}
.kamera-klikk:focus-visible{outline:2px solid var(--aksent);outline-offset:-4px}

.kamera-kontroll{
  margin:30px auto 0;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.kamera-pil{
  flex:0 0 auto;
  width:46px;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--brun);background:none;color:var(--brun);
  font-size:17px;line-height:1;cursor:pointer;
  transition:background .3s var(--lett), color .3s var(--lett), opacity .3s ease;
}
.kamera-pil:hover{background:var(--brun);color:var(--invers)}
.kamera-pil:disabled{opacity:.3;cursor:default;background:none;color:var(--brun)}

/* Lydknappen: av som standard (autoplay krever stumt), på med ett
   trykk, og lyden følger den aktive flisa når trommelen dreier. */
.kamera-lyd svg{
  width:19px;height:19px;display:block;margin:auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.kamera-lyd .lyd-bolge{display:none}
.kamera-lyd.er-pa .lyd-bolge{display:block}
.kamera-lyd.er-pa .lyd-strek{display:none}

/* ---------- 4 · Tjenester: kamerareisen ----------
   Portet fra Noras designfil (scroll-hero.html). Skjermen pinnes,
   kortene skyves først mot deg (0–16 %), så faller sporet forbi
   og wrapper, mens tekstene krysstoner. Tidslinje til venstre,
   måler nederst. Uten JS eller med redusert bevegelse: ingen pin,
   ingen kort, tekstene står stablet under hverandre. */

.ugc{
  position:relative;
  z-index:2; /* panelet legger seg over den pinnede heroen */
  /* toppen var rundet og panelet tiltet/skalert i reisen, men begge
     deler slapp kremen gjennom mot heroen — Tuva ville ha kantene
     fylt helt (13. aug): rett sort kant, full bredde hele veien */
  overflow:clip; /* lager ikke scroll-kontekst, så sticky virker */
}
.ugc-pin{position:relative;padding:var(--seksjon) 0}
.ugc-aktiv .ugc{height:440svh}
.ugc-aktiv .ugc-pin{position:sticky;top:0;height:100svh;padding:0;overflow:hidden}

.ugc-rom{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 44%}
.ugc-verden{position:absolute;inset:0;transform-style:preserve-3d}
.ugc-kort{
  position:absolute;
  border-radius:6px;overflow:hidden;
  opacity:0;
  background:#2b2118 center/cover no-repeat;
  box-shadow:0 18px 44px rgba(0,0,0,.38);
  will-change:transform,opacity;
}
.ugc-kort video{width:100%;height:100%;object-fit:cover;display:block}
body:not(.ugc-aktiv) .ugc-rom{display:none}

/* Vignetten som gjør teksten lesbar over kortene. Ikke forenkle. */
.ugc-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 32% at 50% 50%, rgba(30,23,16,.94) 0%, rgba(30,23,16,.86) 52%, rgba(30,23,16,0) 92%),
    linear-gradient(to bottom, rgba(30,23,16,.88) 0%, rgba(30,23,16,.2) 26%, rgba(30,23,16,.2) 74%, rgba(30,23,16,.88) 100%),
    radial-gradient(128% 100% at 50% 50%, rgba(30,23,16,0) 56%, rgba(30,23,16,.6) 100%);
}

/* tidslinja til venstre */
.ugc-rail{
  position:absolute;left:clamp(20px,4vw,56px);
  top:clamp(76px,12vh,96px);bottom:clamp(76px,12vh,96px);
  display:flex;align-items:stretch;gap:18px;
}
body:not(.ugc-aktiv) .ugc-rail{display:none}
.ugc-rail-linje{position:relative;width:1px;background:color-mix(in srgb, var(--invers) 16%, transparent)}
.ugc-rail-fyll{position:absolute;left:0;top:0;width:1px;height:0%;background:color-mix(in srgb, var(--invers) 50%, transparent)}
.ugc-rail-prikk{
  position:absolute;left:-3px;top:0;width:7px;height:7px;margin-top:-3px;
  border-radius:999px;background:var(--aksent);
  /* aksent i bevegelse: prikken vandrer med scrollen (Noras ønske 19. aug,
     samme rolle som den røde telleprikken i kapitteloverskriften) */
}
.ugc-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between}
.ugc-rail li{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-weight:500;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--invers) 35%, transparent);
  transition:color .24s var(--glid);
}
.ugc-rail li.er-aktiv{color:var(--invers)}
.ugc-rail li span{width:12px;height:1px;background:currentColor}

.ugc-tekster{
  position:relative;z-index:2;
  max-width:var(--maks);margin:0 auto;
  padding:0 var(--marg);
  display:grid;gap:calc(var(--seksjon) * .8);
}
.ugc-aktiv .ugc-tekster{
  position:absolute;inset:0;
  display:grid;grid-template-areas:'steg';
  place-items:center;
  text-align:center;
  padding:0 clamp(48px,8vw,140px);
}
.ugc-aktiv .ugc-tekst{
  grid-area:steg;
  max-width:900px;
  opacity:0;
  pointer-events:none;
}
.ugc-tekst .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.ugc-aktiv .ugc-tekst .eyebrow{justify-content:center}
.ugc-tekst .eyebrow i{width:5px;height:5px;border-radius:999px;background:var(--oliven);flex:none}

/* måleren nederst */
.ugc-rop{
  font-family:var(--f-rop);
  font-weight:600;
  font-size:clamp(30px,4.4vw,64px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
.ugc-lead{
  font-family:var(--f-arch);
  font-weight:500;
  font-size:clamp(16px,1.4vw,18px);
  line-height:1.65;
  color:color-mix(in srgb, var(--invers) 82%, transparent);
  max-width:48ch;
  margin:26px auto 0;
}
body:not(.ugc-aktiv) .ugc-lead{margin:0} /* flat modus: venstrestilt */

.kamera-mer{margin:22px 0 0;text-align:center}
.kamera-mer a{
  font-family:var(--f-sans);font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;
}
.kamera-mer a:hover{color:var(--aksent)}

/* ---------- 5 · Slik jobber vi ---------- */

.prosess{padding-block:calc(var(--seksjon) * .7)}
.prosess-rad{
  border-top:1px solid var(--linje);
  padding:clamp(16px,2.2vw,26px) 0;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,52%);
  gap:clamp(14px,2.5vw,40px);
  align-items:baseline;
}
.prosess-rad:last-of-type{border-bottom:1px solid var(--linje)}
.prosess-nr{
  font-family:var(--f-sans);font-weight:500;
  font-size:11px;letter-spacing:.18em;color:var(--oliven);
}
.prosess-rad h3{
  font-family:var(--f-arch);font-weight:650;
  font-size:clamp(19px,2vw,26px);letter-spacing:-.02em;line-height:1.1;
  margin:0;
}
.prosess-rad p{margin:0;color:var(--oliven);font-size:15px;line-height:1.6;max-width:52ch}
.prosess-cta{margin:clamp(28px,4vw,44px) 0 0}

/* ---------- 5b · Pakker: tre kort i tonal trapp ---------- */

/* Stor seksjonstittel: eyebrow-en alene var for svak som overskrift
   (Noras tilbakemelding 19. aug) — brukes av prosessen og pakkene. */
.seksjon-tittel{
  font-family:var(--f-arch);font-weight:650;
  font-size:clamp(30px,4.6vw,56px);letter-spacing:-.03em;line-height:1.02;
  margin:6px 0 clamp(26px,3.5vw,44px);
}

.pakker{padding-block:calc(var(--seksjon) * 1.1) calc(var(--seksjon) * .8)}
.pakker-under{margin:-14px 0 clamp(30px,4.5vw,52px);color:var(--oliven);font-size:15px;max-width:56ch}

.pakke-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);align-items:stretch;
}
/* Tonal trapp: nivået skal synes før man leser */
.pakke-kort{
  border:1px solid var(--linje);border-radius:12px;
  background:var(--papir);
  padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column;
}
.pakke-kort.pk-2{background:color-mix(in srgb, var(--linje) 55%, var(--krem))}
.pakke-kort.pk-3{background:var(--brun);border-color:var(--brun);color:var(--invers)}
.pakke-kort .eyebrow{margin:0 0 6px}
.pakke-kort.pk-3 .eyebrow{color:color-mix(in srgb, var(--invers) 62%, transparent)}
.pakke-kort h3{
  font-family:var(--f-arch);font-weight:650;
  font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;line-height:1.05;
  margin:0 0 10px;
}
.pakke-om{margin:0 0 18px;color:var(--oliven);font-size:14px;line-height:1.55}
.pakke-kort.pk-3 .pakke-om{color:color-mix(in srgb, var(--invers) 72%, transparent)}
.pakke-liste{list-style:none;margin:auto 0 0;padding:0}
.pakke-liste li{padding:10px 0;border-top:1px solid var(--linje);font-size:14px;line-height:1.5}
.pakke-kort.pk-3 .pakke-liste li{border-top-color:color-mix(in srgb, var(--invers) 22%, transparent)}

.pakke-tegn{width:60px;height:38px;margin-bottom:18px;overflow:visible}
.pakke-tegn path{
  fill:none;stroke:var(--brun);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.pakke-kort.pk-3 .pakke-tegn path{stroke:var(--invers)}

.pakker-pris{margin:clamp(24px,3.5vw,36px) 0 0;color:var(--oliven);font-size:15px;max-width:60ch}

.kunder-under{margin:-6px 0 clamp(28px,4vw,44px);color:var(--oliven);font-size:15px}

/* ---------- 6 · Kunder ---------- */

.logo-baand{overflow:hidden}
.logo-spor{
  display:flex;width:max-content;
  animation:logo-rull 36s linear infinite;
}
.logo-spor:hover{animation-play-state:paused}
@keyframes logo-rull{to{transform:translateX(-50%)}}
.logos{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;
  gap:clamp(48px,7vw,120px);
  padding-right:clamp(48px,7vw,120px);
}
.logos li{flex:0 0 auto;display:flex;align-items:center}
.logos img{
  width:auto;height:clamp(30px,3.6vw,52px);object-fit:contain;
  opacity:.7;transition:opacity .4s ease;
}
/* den liggende Baker Hansen-logoen er 11x saa bred som hoey;
   lavere hoeyde gir samme optiske vekt som de andre */
.logos img[src*="baker-hansen-bred"]{height:clamp(13px,1.55vw,22px)}
.logos li:hover img{opacity:1}
@media (prefers-reduced-motion: reduce){
  .logo-spor{animation:none;flex-wrap:wrap}
  .logo-spor .logos[aria-hidden]{display:none}
}

/* ---------- 7 · Om oss: folkene. Roligere typografi, mer luft. ---------- */

.folk{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,6vw,96px);
  max-width:1060px;
}
.person{margin:0}
.person-bilde{
  position:relative;overflow:hidden;background:var(--papir);
  aspect-ratio:3/4;max-width:380px;
  margin-bottom:26px;border-radius:6px;
}
.person-bilde img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--lett);
}
.person:hover .person-bilde img{transform:scale(1.04)}
.person h3{
  font-family:var(--f-arch);
  font-weight:650;
  font-size:clamp(17px,1.5vw,20px);
  letter-spacing:-.01em;
  margin:0 0 6px;
}
.person .eyebrow{margin-bottom:16px}
.person p:not(.eyebrow){margin:0 0 14px;color:var(--oliven);font-size:15px;line-height:1.7;max-width:46ch}

/* ---------- 8 · FAQ ---------- */

.faq-grid{
  display:grid;grid-template-columns:minmax(220px,34%) 1fr;
  gap:clamp(24px,4vw,72px);
  align-items:start;
}
.faq-side{position:sticky;top:calc(var(--topp) + 24px)}
.faq-side .h-kjempe{margin-bottom:16px}

.faq{border-top:1px solid var(--linje)}
.faq details{border-bottom:1px solid var(--linje)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(44px,64px) 1fr 34px;
  gap:16px;align-items:baseline;
  padding:24px 0;
  font-family:var(--f-arch);
  font-weight:650;
  font-size:clamp(17px,1.8vw,23px);
  letter-spacing:-.015em;
  line-height:1.25;
  transition:color .3s ease, transform .4s var(--lett);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oliven);transform:translateX(8px)}
.faq details[open] summary{color:var(--brun)}
.faq .faq-nr{
  font-family:var(--f-rop);
  font-weight:600;
  font-size:clamp(16px,1.6vw,21px);
  color:var(--linje);
  transition:color .3s ease;
}
.faq details[open] .faq-nr,.faq summary:hover .faq-nr{color:var(--aksent)}
.faq .pluss{position:relative;justify-self:end;align-self:center;width:14px;height:14px}
.faq .pluss::before,.faq .pluss::after{
  content:"";position:absolute;background:var(--brun);
  transition:transform .4s var(--lett);
}
.faq .pluss::before{left:0;right:0;top:6px;height:1.5px}
.faq .pluss::after{top:0;bottom:0;left:6px;width:1.5px}
.faq details[open] .pluss::after{transform:rotate(90deg) scaleY(0)}
.faq details[open] .pluss::before{transform:rotate(180deg)}

.faq details::details-content{
  block-size:0;overflow:clip;
  transition:block-size .5s var(--lett), content-visibility .5s allow-discrete;
}
.faq details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
}
.faq .faq-svar{
  margin:0 0 0 clamp(60px,5vw,80px);
  padding:0 34px 28px 0;
  max-width:62ch;color:var(--oliven);
}

/* ---------- 9 · Kontakt: setningen som fylles ut ---------- */

/* Roligere kontaktside: mindre skrift, mer luft rundt alt */
.kontakt .mappe-innhold{padding-block:calc(var(--seksjon) * 1.05) calc(var(--seksjon) * .9)}
.kontakt-lead{
  margin:0;
  color:color-mix(in srgb, var(--invers) 72%, transparent);
  font-size:15px;line-height:1.7;
  max-width:44ch;
}
.madlib-skjema{margin-top:clamp(56px,8vw,104px);position:relative}
.madlib{
  font-family:var(--f-arch);
  font-weight:550;
  font-size:clamp(19px,2.2vw,32px);
  letter-spacing:-.015em;
  line-height:1.8;
  max-width:30ch;
  margin:0 0 clamp(36px,5vw,60px);
}
.madlib .felt{display:inline-block;white-space:nowrap}
.madlib input{
  font:inherit;
  color:var(--brun);
  background:transparent;
  border:0;border-bottom:3px solid var(--linje);
  border-radius:0;
  padding:0 .1em .04em;
  width:5ch;
  min-width:3ch;
  /* plassholderen "innhold folk faktisk vil se" er 28ch og sprengte
     visningsflaten på mobil, som dro MENY ut av skjermen */
  max-width:78vw;
  transition:border-color .3s ease;
}
.madlib input::placeholder{color:color-mix(in srgb, var(--oliven) 45%, transparent)}
.madlib input:focus{outline:none;border-bottom-color:var(--aksent)}
.madlib input:not(:placeholder-shown){border-bottom-color:var(--oliven)}
.madlib-send{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0}
.skjema-status{margin:0}

.kontakt-info{
  margin:clamp(72px,10vw,128px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
}
.kontakt-info div{padding:16px 0;border-top:1px solid var(--linje)}
.kontakt-info dt{margin-bottom:6px}
.kontakt-info dd{margin:0;font-size:17px}
.madlib-mer{margin:0 0 clamp(28px,4vw,40px)}
.madlib-mer textarea{
  width:min(56ch,100%);
  background:transparent;
  border:1px solid color-mix(in srgb, var(--invers) 24%, transparent);
  border-radius:6px;
  color:var(--invers);
  font-family:var(--f-sans);font-size:15px;line-height:1.6;
  padding:14px 16px;
  resize:vertical;
}
.madlib-mer textarea::placeholder{color:color-mix(in srgb, var(--invers) 38%, transparent)}
.madlib-mer textarea:focus{outline:none;border-color:color-mix(in srgb, var(--invers) 55%, transparent)}

.some-ikoner{display:flex;gap:12px}
.some-ikoner a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--invers) 26%, transparent);
  transition:background .3s var(--lett), border-color .3s var(--lett);
}
.some-ikoner a:hover{background:color-mix(in srgb, var(--invers) 10%, transparent);border-color:var(--invers)}
.some-ikoner svg{width:17px;height:17px;fill:none;stroke:var(--invers);stroke-width:1.6}
.some-ikoner .fylt{fill:var(--invers);stroke:none}

.honning{position:absolute;left:-9999px}

/* ---------- 6 · Mappene: om oss, spørsmål, kontakt ----------
   Med JS (body.mapper-aktiv) er dette et fanesystem: én fanelinje,
   én åpen mappe om gangen. Uten JS ligger alle tre stablet med
   dekorative faner. Flater: papir, dypere krem, mørk. */

.mapper{position:relative;margin-top:calc(var(--seksjon) * .5)}

.mappe{
  position:relative;
  border-radius:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px) 0 0;
}
.mappe-innhold{padding-top:calc(var(--seksjon) * .8)}
.mappe-innhold.section{border-top:0} /* mappa selv er skillet */

/* fanelinja: tre mappefaner, den aktive er høyest og hel */
.mappe-faner{display:none}
.mapper-aktiv .mappe-faner{
  display:flex;align-items:flex-end;gap:6px;
  max-width:var(--maks);margin:0 auto;
  padding:0 var(--marg);
  position:relative;z-index:2;
}
.mappe-tab{
  border:1px solid color-mix(in srgb, var(--brun) 16%, transparent);
  border-bottom:0;cursor:pointer;
  padding:16px clamp(22px,3.4vw,44px) 15px;
  border-radius:clamp(12px,1.6vw,18px) clamp(12px,1.6vw,18px) 0 0;
  font-family:var(--f-sans);font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brun);
  opacity:.8;
  transition:opacity .3s ease, padding .35s var(--lett);
}
.mappe-tab:hover{opacity:1}
.mappe-tab.er-aktiv{opacity:1;padding-top:24px;padding-bottom:18px;border-color:transparent}
.mappe-tab:focus-visible{outline:2px solid var(--brun);outline-offset:-4px}
.mt-1{background:var(--papir)}
.mt-2{background:var(--linje)}
.mt-3{background:var(--dyp);color:var(--invers)}
.mt-3:focus-visible{outline-color:var(--invers)}

/* med fanesystem vises bare den åpne mappa */
.mapper-aktiv .mappe{display:none}
.mapper-aktiv .mappe.er-aktiv{display:block;animation:mappe-inn .5s var(--lett)}
.mapper-aktiv .mappe-fane{display:none}
@keyframes mappe-inn{from{opacity:0;transform:translateY(16px)}}

/* uten JS: stablet, med dekorative faner som før */
body:not(.mapper-aktiv) .mappe{margin-top:-1px}
body:not(.mapper-aktiv) .mapper section:first-of-type{margin-top:calc(var(--fane-h, 46px) + var(--seksjon) * .5)}
.mappe-fane{
  position:absolute;
  top:calc(var(--fane-h, 46px) * -1 + 1px);
  height:var(--fane-h, 46px);
  display:inline-flex;align-items:center;
  padding:0 clamp(22px,3vw,40px);
  border-radius:clamp(12px,1.6vw,18px) clamp(12px,1.6vw,18px) 0 0;
  background:inherit;
  font-family:var(--f-sans);font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
}
.mappe-1{background:var(--papir)}
.mappe-1 .mappe-fane{left:var(--marg)}
.mappe-2{background:var(--linje)}
.mappe-2 .mappe-fane{left:clamp(120px,28vw,420px)}
.mappe-3{background:var(--dyp)}
.mappe-3 .mappe-fane{left:clamp(240px,56vw,840px);color:var(--invers)}

/* roligere overskrift inne i mappene */
.h-mappe{
  font-family:var(--f-rop);
  font-weight:650;
  font-size:clamp(25px,2.8vw,44px);
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 0 28px;
}

/* om oss: overskrift til venstre, introen ved siden av */
.om-topp{
  display:grid;
  grid-template-columns:minmax(220px,36%) 1fr;
  gap:clamp(28px,5vw,88px);
  align-items:start;
  margin-bottom:clamp(64px,9vw,128px);
}
.om-topp .h-mappe{margin:0}
.om-intro{max-width:56ch;display:grid;gap:20px}
.om-lead{
  font-family:var(--f-arch);font-weight:500;
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;margin:0;
}
.om-tekst{margin:0;color:var(--oliven);font-size:15px;line-height:1.7;max-width:58ch}

/* mørk kontaktmappe: skjemaet og infoen får inverse farger */
.mappe-3 .madlib input{color:var(--invers);border-bottom-color:color-mix(in srgb, var(--invers) 28%, transparent)}
.mappe-3 .madlib input::placeholder{color:color-mix(in srgb, var(--invers) 34%, transparent)}
.mappe-3 .madlib input:focus{border-bottom-color:var(--aksent)}
.mappe-3 .madlib input:not(:placeholder-shown){border-bottom-color:color-mix(in srgb, var(--invers) 60%, transparent)}
.mappe-3 .pille-fylt{background:var(--invers);color:var(--dyp);border-color:var(--invers)}
.mappe-3 .pille-fylt:hover{background:transparent;color:var(--invers)}
.mappe-3 .kontakt-info div{border-top-color:color-mix(in srgb, var(--invers) 18%, transparent)}

/* spørsmålsmappa har flate i linjefargen; strekene trenger dypere tone */
.mappe-2 .faq,.mappe-2 .faq details{border-color:color-mix(in srgb, var(--brun) 24%, transparent)}
.mappe-2 .faq .faq-nr{color:color-mix(in srgb, var(--brun) 32%, transparent)}
.mappe-2 .faq .pluss::before,.mappe-2 .faq .pluss::after{background:var(--brun)}

/* footeren legger seg som neste mappe i stabelen, uansett hvilken
   mappe som er åpen. Mot den mørke kontaktmappa blir sømmen usynlig. */
.site-footer.mappe-hale{
  border-radius:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px) 0 0;
  margin-top:-1px;
  padding-top:calc(var(--seksjon) * .6);
}
/* ... men mot den mørke mappa avslørte den runde toppen bare
   krembakgrunnen bak footeren, som et lyst hjørne midt i det mørke
   (Tuvas funn 12. aug). Dyp mot dyp: ingen radius, ingen søm. */
.mapper-aktiv:has(.mappe.mork.er-aktiv) .site-footer.mappe-hale{border-radius:0}

/* ---------- Footer ---------- */

.site-footer{
  border-radius:clamp(30px,6vw,90px) clamp(30px,6vw,90px) 0 0;
  padding:calc(var(--seksjon) * 1.1) var(--marg) 40px;
  margin-top:var(--seksjon);
}
.footer-rop{
  font-family:var(--f-rop);
  font-weight:650;
  font-size:clamp(30px,4.6vw,64px);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0 0 36px;
  max-width:16ch;
}
.footer-kontakt{margin:0 0 clamp(56px,8vw,100px);display:flex;flex-direction:column;gap:8px}
.footer-kontakt .eyebrow{margin:0 0 4px}
.footer-kontakt a{
  font-family:var(--f-arch);
  font-weight:650;
  letter-spacing:-.02em;
  font-size:clamp(19px,2.2vw,28px);
  width:max-content;
}
.footer-kontakt a:hover{color:var(--aksent)}
.footer-some{display:flex;gap:14px;margin:18px 0 0}
.footer-some a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--invers) 28%, transparent);
  transition:background .3s var(--lett), border-color .3s var(--lett);
}
.footer-some a:hover{background:color-mix(in srgb, var(--invers) 10%, transparent);border-color:var(--invers)}
.footer-some svg{width:19px;height:19px;fill:none;stroke:var(--invers);stroke-width:1.6}
.footer-some .fylt{fill:var(--invers);stroke:none}

.footer-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  padding-top:28px;
  border-top:1px solid color-mix(in srgb, var(--invers) 18%, transparent);
  font-size:13px;
}
.footer-cols a{display:block;padding:3px 0;width:max-content}
.footer-cols a:hover{text-decoration:underline;text-underline-offset:.25em}

.footer-logo{
  display:block;
  width:min(400px,52vw);
  height:auto;
  fill:var(--invers);
  margin:clamp(48px,7vw,90px) 0 20px;
}
.kolofon{margin:0;opacity:.78} /* .55 strøk på WCAG-kontrast */
.signatur{margin-top:6px;font-size:10px} /* Noras byline: hakket mindre enn kolofonen (11px)
   så den ikke stjeler fokus fra Fagr-linja. Opasiteten arves fra .kolofon (.78, WCAG-gulv). */

/* ---------- Lysboks ---------- */

.lysboks{
  position:fixed;inset:0;z-index:80;
  background:rgba(16,11,7,.94);
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.lysboks-ramme{width:min(430px,92vw);aspect-ratio:9/16;background:#000}
.lysboks-ramme video{width:100%;height:100%;object-fit:contain}
.lukk{
  position:absolute;top:20px;right:20px;
  font-family:var(--f-sans);font-weight:500;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--invers);border-radius:999px;
  color:var(--invers);
  padding:11px 22px;cursor:pointer;
}

/* ---------- Markøren ---------- */

.peker{
  position:fixed;left:0;top:0;z-index:90;
  width:12px;height:12px;border-radius:50%;
  background:var(--dott);
  color:var(--invers);
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .3s var(--lett), opacity .3s ease;
  opacity:0;
}
.peker span{
  font-family:var(--f-sans);font-weight:500;
  font-size:2.4px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .2s ease;
}
.peker.er-synlig{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peker.er-stor{transform:translate(-50%,-50%) scale(3.2);opacity:.9}
.peker.har-tekst{transform:translate(-50%,-50%) scale(7);opacity:1}
.peker.har-tekst span{opacity:1}
@media (hover:none){.peker{display:none}}

/* ---------- Juridiske sider ---------- */

.juridisk{max-width:76ch;margin:0 auto;padding:calc(var(--topp) + var(--seksjon)) var(--marg) var(--seksjon)}
.juridisk h1{
  font-family:var(--f-rop);font-weight:650;
  font-size:clamp(28px,4vw,48px);letter-spacing:-.03em;line-height:1.05;
  margin:0 0 32px;
}
.juridisk h2{font-family:var(--f-arch);font-weight:650;font-size:22px;margin:40px 0 12px}
.mangler{
  border:1px solid var(--brun);padding:20px 24px;margin:32px 0;
  font-size:13px;line-height:1.9;
}
/* juridiske sider bruker tekst-ordmerke og enkel lenkerad */
.juridisk-side .site-header{position:sticky;background:var(--krem)}
.juridisk-side .wordmark{
  font-family:var(--f-arch);font-weight:800;
  font-size:20px;letter-spacing:-.03em;
}
.nav{
  display:flex;gap:clamp(14px,3vw,28px);
  font-family:var(--f-sans);font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.footer-mark{font-family:var(--f-rop);font-weight:800;letter-spacing:-.04em;font-size:clamp(48px,10vw,130px);line-height:.9;margin:0 0 40px}

/* ---------- Responsivt ---------- */

@media (max-width:900px){
  :root{--topp:64px}
  .wordmark svg{height:24px}
  .folk,.om-topp{grid-template-columns:1fr}
  .om-topp{margin-bottom:clamp(40px,10vw,64px)}
  .mappe-tab{padding-inline:14px;letter-spacing:.16em}
  .faq-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .tjeneste-rad{grid-template-columns:40px 1fr}
  .tjeneste-rad p{grid-column:2/-1;max-width:52ch}
  .logos{grid-template-columns:1fr 1fr;gap:28px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .kontakt-info{grid-template-columns:1fr}
  .kamera-scene{--kam-h: min(58svh, 480px)}
  .ugc-rail{left:16px}
  .ugc-rail ol{display:none} /* merkelappene trenger plassen til tekst */
  .ugc-meter{left:var(--marg);right:var(--marg)}
  .mappe-2 .mappe-fane{left:50%;transform:translateX(-50%)}
  .mappe-3 .mappe-fane{left:auto;right:var(--marg)}
  .kamera-scene.er-3d{perspective:1100px}
  .kamera-pil{width:40px}
  body.ugc-aktiv .ugc{height:340svh} /* ett tommeldrag per kapittel */
  .ugc-rail{display:none} /* på mobil bærer teksten kapitlene alene */
  .prosess-rad{grid-template-columns:40px 1fr}
  .prosess-rad p{grid-column:2/-1;max-width:52ch}
  .pakke-grid{grid-template-columns:1fr}
  .madlib{max-width:none}
}
@media (max-width:480px){
  .logos{grid-template-columns:1fr 1fr;gap:20px}
}

/* ---------- Redusert bevegelse ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-inn]{opacity:1;transform:none}
  .tegnet path{stroke-dashoffset:0}
  .peker{display:none}
}