/* ─────────────────────────────────────────────────────────────
   TOKENS — vitt, Senzumblått (#0078B9 hämtat ur logotypen), svart.
   Sidan bor i en enda ljus värld; allt målas explicit.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:   #FFFFFF;
  --paper-2: #F3F7FA;   /* svalt off-white, blåbrytet — valt, inte ärvt */
  --paper-3: #E7EFF5;
  --ink:     #14181C;   /* nästan svart med blå dragning */
  --ink-2:   #0B1116;   /* det mörka bandet */
  --ink-3:   #16222B;
  --mute:    #5B6B76;
  --blue:    #0078B9;
  --blue-dk: #005B8D;
  --blue-lt: #E4F1F9;
  --line:    #DBE4EB;
  --line-dk: rgba(220,236,245,.16);

  /* Ett typsnitt över hela sajten — samma som rubrikerna på startsidan.
     Rollerna finns kvar som egna tokens så hierarkin går att styra via
     storlek, vikt och teckenavstånd i stället för via familj. */
  --display: "Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:    var(--display);
  --mono:    var(--display);

  --pad:  clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1560px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:#3B4A54;
  font-family:var(--body);
  font-size:clamp(1rem,.94rem + .28vw,1.16rem);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:2px; }

/* ── typografiska roller ─────────────────────────────────────── */
.eyebrow{ font-weight:600;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute); margin:0;
}
.display{
  font-family:var(--display); font-weight:800; color:var(--ink);
  font-size:clamp(2.7rem, min(7.4vw, 12.5vh), 6.4rem);
  line-height:.96; letter-spacing:-.035em; text-wrap:balance; margin:0;
}
.h2{
  font-family:var(--display); font-weight:750; color:var(--ink);
  font-size:clamp(2rem,4.6vw,3.9rem);
  line-height:1.03; letter-spacing:-.028em; text-wrap:balance; margin:0;
}
.h3{
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(1.2rem,1.7vw,1.6rem);
  line-height:1.18; letter-spacing:-.016em; margin:0;
}
.lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; max-width:36ch; color:#41525D; }
.num{ font-variant-numeric:tabular-nums; }

/* ── sektionsskal ────────────────────────────────────────────── */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
/* Sektionsrytmen. Två sektioner staplar sin padding, så varje steg här
   syns dubbelt mellan blocken — håll den stram. */
.band{ padding-block:clamp(3rem,6vw,5.5rem); position:relative; background:var(--paper); }
.band--tint{ background:var(--paper-2); }
.band--dark{ background:var(--ink-2); color:#B7C6D0; }
.band--dark .h2,.band--dark .h3{ color:#FFFFFF; }
.band--dark .eyebrow{ color:#7D96A6; }

/* etikett vänster, rubrik i egen kolumn — vänsterställt, aldrig centrerat */
.head{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,4rem); align-items:start;
  margin-bottom:clamp(1.75rem,3.5vw,3.25rem);
}
@media (max-width:820px){ .head{ grid-template-columns:1fr; gap:1rem; } }

/* Centrerad variant — utpekade undantag, inte ett nytt grundläge.
   Sajtens regel är vänsterställda rubriker; startsidan och AI-sidan följer
   den fortfarande. Här faller etikettkolumnen bort och etiketten ställer sig
   ovanför rubriken i stället för bredvid den, annars hade rubriken centrerats
   mot en yta som börjar 15 rem in och sett förskjuten ut. */
.head--mitt{
  grid-template-columns:minmax(0,1fr);
  justify-items:center; text-align:center;
  gap:clamp(.7rem,1.4vw,1.1rem);
}

/* ─────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:1.05rem var(--pad);
  background:rgba(255,255,255,0);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
/* Ingen backdrop-filter. Att sudda allt bakom en fast list omvärderas varje
   scrollruta och är en av de dyraste effekterna som finns — vid 96 % vit
   bakgrund syns skillnaden knappt ändå. */
.nav.is-stuck{
  background:rgba(255,255,255,.96);
  padding-block:.65rem; box-shadow:0 1px 0 var(--line), 0 10px 30px -18px rgba(20,24,28,.35);
}
.brand{ display:flex; align-items:center; margin-right:auto; text-decoration:none; }
.brand img{ height:clamp(1.5rem,2.4vw,1.95rem); width:auto; }
/* Textreserv om logotypfilen inte kan laddas — sidan står aldrig utan avsändare */
.brand-text{
  display:none; font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:.1em; color:var(--ink);
}
.brand-text em{ font-style:normal; color:var(--blue); }
.brand.no-logo img{ display:none; }
.brand.no-logo .brand-text{ display:block; }
.nav-links{ display:flex; gap:clamp(1rem,1.6vw,2.6rem); }

/* MENYNS STORLEK FOLJER SKARMEN.
   Graden var fast (0,73rem) medan allt runt omkring — logotypen, rubrikerna,
   brodtexten — redan skalade med vw. Pa en 27-tumsskarm vaxte alltsa allt
   utom menyn, och flikarna blev orimligt sma i jamforelse.

   Intervallet raknas fran 1181 px och uppat, for under den gransen ar menyn
   ersatt av hamburgaren och de har raderna galler inte alls:
       1181 px -> 12,5 px    1440 px -> 12,9 px
       1920 px -> 14,5 px    2560 px -> 16,7 px    och sedan tak.

   Farg och vikt: 600 pa #33434E blev tunt mot en rorlig videohero, dar
   underlaget skiftar hela tiden. Nu 700 pa --ink, sajtens morkaste ton. */
.nav-links a{ font-weight:700;
  font-family:var(--mono);
  font-size:clamp(.78rem, .5rem + .34vw, 1.06rem);
  letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  padding-block:.35em; position:relative; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ transform:scaleX(1); }

/* Egen produkt, egen sida, darav egen behandling i menyn.

   VIT PLATTA MED BLA TEXT, inte genomskinlig. Knappen satt tidigare pa
   transparent botten med en nastan vit ram, och forsvann darfor mot
   videohero:n. Den maste bara sig i tva helt olika lagen: ovanpa rorlig
   video hogst upp, och mot den vita menyn nar man scrollat.

   Den ar med flit INTE fylld i blatt. Bredvid den star sidans huvudknapp
   ("Lediga tjanster") som ar solid bla, och tva fyllda blaa knappar intill
   varandra lasar som samma sak. Vit platta med bla ram ger tyngd utan att
   konkurrera, samma sprak som .btn--ghost pa resten av sajten.

   Skuggan ar statisk. Att ANIMERA box-shadow ar forbjudet har, se pip::after
   nedan, men en oforanderlig skugga kostar ingenting per bildruta. */
.nav-links a.nav-ai{
  display:inline-flex; align-items:center; gap:.5em;
  /* em, inte rem: da foljer plattan automatiskt med nar graden vaxer pa en
     stor skarm, utan en egen clamp att halla i synk. */
  color:var(--blue-dk); padding:.45em 1.25em;
  background:var(--paper); border:1px solid var(--blue); border-radius:999px;
  box-shadow:0 1px 2px rgba(11,17,22,.14);
  margin-left:.4rem;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.nav-links a.nav-ai::after{ display:none; }
/* Hovring vander den: fylld bla med vit text. */
.nav-links a.nav-ai:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nav-links a.nav-ai:hover .pip{ background:#fff; }
.nav-links a.nav-ai:hover .pip::after{ background:#fff; }
.nav-ai .pip{
  position:relative; width:6px; height:6px; border-radius:50%;
  background:var(--blue); flex:none;
}
/* Ringen animeras med transform och opacity, inte box-shadow. box-shadow
   kan inte komponeras — den ritade om menyn varje bildruta, hela besöket. */
.nav-ai .pip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--blue); animation:pip 2.6s ease-out infinite;
}
@keyframes pip{
  0%   { transform:scale(1);   opacity:.55; }
  70%  { transform:scale(3.6); opacity:0; }
  100% { transform:scale(3.6); opacity:0; }
}
.nav-links a.nav-ai[aria-current="page"]{ background:var(--blue); color:#fff; border-color:var(--blue); }
.nav-links a.nav-ai[aria-current="page"] .pip{ background:#fff; animation:none; }

.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:61;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  will-change:transform;
}

/* hamburgare + helskärmsmeny */
.burger{ display:none; width:2.75rem; height:2.75rem; border:1px solid var(--line); border-radius:999px; place-items:center; flex:none; background:var(--paper); }
.burger i{ display:block; width:16px; height:1.5px; background:var(--ink); position:relative; transition:background .3s var(--ease); }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), top .25s var(--ease);
}
.burger i::before{ top:-5px; } .burger i::after{ top:5px; }
.menu-open .burger i{ background:transparent; }
.menu-open .burger i::before{ top:0; transform:rotate(45deg); }
.menu-open .burger i::after{ top:0; transform:rotate(-45deg); }

.sheet{
  position:fixed; inset:0; z-index:55; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding:5rem var(--pad) 3rem;
  opacity:0; visibility:hidden; transform:translateY(-1.5rem);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.menu-open .sheet{ opacity:1; visibility:visible; transform:none; }
.sheet a{
  font-family:var(--display); font-weight:750; letter-spacing:-.03em; color:var(--ink);
  font-size:clamp(2rem,9vw,3.2rem); line-height:1.2; text-decoration:none;
  border-bottom:1px solid var(--line); padding-block:.7rem;
}
.sheet a:last-child{ border-bottom:0; color:var(--blue); }

@media (max-width:1180px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
  .nav > .btn{ display:none; }
  /* Nav ligger över fotot på mobil — utan vit botten drunknar loggan. */
  .nav{ background:rgba(255,255,255,.96); box-shadow:0 1px 0 var(--line); }
}
@media (min-width:1181px){ .sheet{ display:none; } }

/* ─────────────────────────────────────────────────────────────
   KNAPPAR
   ───────────────────────────────────────────────────────────── */
.btn{ font-weight:600;
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1.02rem 1.6rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--line); color:var(--ink); background:var(--paper);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
/* Knappen i menyn skalar med samma uttryck som flikarna bredvid den —
   annars vaxer flikarna pa en stor skarm medan knappen star kvar och
   raden ser sned ut. Innermatten i em, sa de foljer med av sig sjalva.
   Gäller BARA i .nav; .btn pa resten av sajten ar oforandrad. */
.nav > .btn{
  font-size:clamp(.78rem, .5rem + .34vw, 1.06rem);
  padding:1.3em 2.1em; gap:.6em;
}
.btn--solid{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn--solid:hover{ background:var(--blue-dk); border-color:var(--blue-dk); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.band--dark .btn{ background:transparent; color:#fff; border-color:var(--line-dk); }
.band--dark .btn--solid{ background:var(--blue); border-color:var(--blue); }

/* ─────────────────────────────────────────────────────────────
   HERO — stort foto, vit ridå till vänster
   ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(6rem,13vh,9rem);
  /* Sifferraden bildade tidigare golv i hero:n. Nu ligger den utanfor, och
     utan den har luften hade rubriken och knapparna stott i underkanten. */
  padding-bottom:clamp(2.5rem,6vh,4.5rem);
  overflow:hidden; background:var(--paper);
}
/* Lager i hero:n, underifrån: signalfält → foto (poster) → video → ridå → text */
#field, .hero-photo, .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 42%; z-index:0;
}
.hero-photo{ z-index:1; }
.hero.no-photo .hero-photo{ display:none; }
/* Videon visas OBESKUREN — hela bildrutan, ingen zoom, ingen beskärning.
   Klippet är 16:9 och hero:n smalare än så, så cover kapade bort en remsa i
   sidled och delade Senzum-skylten på väggen. Utsnittet var därför tidigare
   förskjutet till 28 % för att rädda logotypen; med contain behövs ingen
   sådan justering alls och skylten står hel i klippets båda tagningar.
   Bilden ligger mot ovankanten (0 %) så att det vita bandet hamnar nedtill,
   där rubriken, knapparna och sifferraden redan står på vitt.
   Bakgrunden MÅSTE vara vit: bandet är genomskinligt annars, och då lyser
   signalfältets mörkblå ruta igenom under videon. */
.hero-video{
  z-index:2; opacity:0; transition:opacity .45s var(--ease);
  /* FYLLER hero:n. Klippet ar 16:9 och hero:n ar 100svh, sa nagot maste ge
     vika: cover beskar en remsa, contain lamnade tomma falt. Salar har valt
     att den ska tacka hela skarmen.
     Utsnittet ar forskjutet uppat (38 %) darfor att Senzum-skylten pa vaggen
     sitter i bildens ovre tredjedel. Med 50 % kapades den. Byts klippet
     maste utsnittet provas om, mot flera tidpunkter och flera fonsterformat. */
  object-fit:cover; object-position:64% 38%;
  /* 64 % i sidled, inte 50 %. Pa ett smalt fonster (matt: 1100x900) kapar
     cover 32 procent av bredden, och med centrerat utsnitt skars skylten
     av vid hogerkanten. Pa breda fonster kapas det vertikalt i stallet,
     sa varde i sidled spelar ingen roll dar. */
  background:var(--paper);
  /* Videon låses till ett eget lager. Utan hinten hamnar den i webbläsarens
     snabba överläggsspår, som har en egen färgpipeline — och den kastas ur
     överlägget så fort sidan scrollar. Hero:n blev då ljusare under scroll och
     mörknade igen när man slutade.

     Hinten togs bort en gång på misstanke om att den kostade bildrutor. Den
     misstanken höll inte. MÄTT under scroll, fem upprepningar per villkor,
     växelvis:

         utan hinten   46,7 fps median (34,2–57,5)   20 %   tappade rutor
         med hinten    52,7 fps median (46,0–57,6)   12,2 % tappade rutor

     Den är alltså inte dyrare, och framför allt jämnare. En tidigare mätning
     med bara tre upprepningar pekade åt andra hållet — den var brus.
     Mät med minst fem upprepningar om du ifrågasätter den här raden.
     translateZ(0) i stället mätte sämst av alla tre: 41,8 fps, 23,9 % tapp. */
  will-change:transform;

  /* ETT FILTER SOM INTE GÖR NÅGOT, och det är hela poängen.

     will-change ovan räckte så länge videon var letterboxad med contain. När
     den började fylla hero:n med cover kom ljusskiftet tillbaka: en video som
     täcker hela vyn är precis vad webbläsaren lägger i sitt överläggsspår, och
     eftersom ridån ligger ovanpå används "underlay" med hål stansat i sidan.
     Det spåret har en egen färgpipeline, och det överges så fort sidan
     scrollar. Därav: ljusare under scroll, normal igen när man slutar.

     Ett filter, även `brightness(1)`, diskvalificerar elementet från
     överlägget och tvingar det genom vanlig komposition i båda lägena.
     Bilden låser sig då i det MÖRKARE, mättade utseendet, alltså det man
     redan hade i vila.

     Kostnaden är mätt under scroll, fyra upprepningar per villkor växelvis:
         utan filter   59,9 fps median (16,4–59,9)   0 % tappade rutor
         med filter    60,0 fps median (54,4–60,0)   0 % tappade rutor
     Allttså ingen mätbar kostnad, och jämnare spridning.

     Ta inte bort raden för att den ser meningslös ut. Verifiera i så fall så
     här: håll sidan i scrollande tillstånd med en rAF-loop som anropar
     scrollTo(0, i++ % 2), och jämför en skärmbild då med en i vila. */
  filter:brightness(1);
}
.hero-video.is-playing{ opacity:1; }
/* KLIPP 2 HAR ETT EGET UTSNITT, och 45 % ar matt fram, inte valt pa kanslan.
   Kameran vandrar at hoger genom klippet. Med klipp 1:s 64 % gar Senzum-
   skylten ut ur bild: pa det smalaste tidigare uppmatta fonstret (1100x900,
   dar cover kapar 32 % av bredden) ar markets vanstra halva borta vid 3,5 s
   och hela market borta vid 4,3 s. Vid 45 % star det kvar hela klippet.
   Pa breda fonster kapar cover i hojdled i stallet, och da spelar siffran
   ingen roll — det ar bara det smala fallet som styr raden.
   Byts klipp 2: prova om, mot flera tidpunkter och inte bara bildruta ett. */
.hero-video--2{ object-position:45% 38%; }
/* Postern ska synas UTAN att JavaScript hunnit köra. Elementet bär bildruta
   ett ur klippet som poster, och över 900 px — samma gräns som site.js
   räknar med — laddas videon alltid, så där står elementet synligt redan
   vid första målningen. Under gränsen laddas ingen video och hjältefotot
   gäller; då ska elementet fortsätta vara osynligt.

   Det här är halva svaret på att hero:n visade ett randigt mönster i början:
   signalfältet låg framme medan videon var osynlig. Andra halvan är att
   #field inte längre målas förrän det faktiskt behövs — se site.js. */
@media (min-width:900px){ .hero-video{ opacity:1; } }

/* Signalfältets duk är opak (alpha:false), alltså svart innan något ritats.
   Den ska därför ligga dold tills fältet verkligen tänds — annars är den
   ett svart lager under en video som ännu inte har någon bildruta. */
#field{ opacity:0; }
/* Går videon igång får det blå signalfältet stå som förspel i stället
   för fotot — annars byter hero:n motiv mitt framför ögonen på besökaren. */
.hero.has-video .hero-photo{ display:none; }
/* Ridån: solid vit till vänster, klar mot höger — därav vit sida med fotohero.
   translateZ tvingar den till ett eget GPU-lager. Utan den blandas två
   helskärmsgradienter om på nytt för varje videoruta — mätt 5 bildrutor
   på 1,5 s mot 73 när ridån var avstängd. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  transform:translateZ(0);
  background:
    linear-gradient(96deg,
      #FFFFFF 0%, rgba(255,255,255,.98) 26%, rgba(255,255,255,.86) 40%,
      rgba(255,255,255,.42) 55%, rgba(255,255,255,.06) 72%, rgba(255,255,255,0) 88%),
    linear-gradient(0deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 26%);
}
/* Hero-texten foljer INTE sidans centrerade maxbredd. Med max-width 1560
   centrerad hamnade rubriken 260 px in pa en 1920-skarm, alltsa 14 % fran
   kanten, och lases som nastan mittstalld. Har galler bara --pad fran
   vansterkanten, oavsett hur bred skarmen ar. Sektionerna nedanfor behaller
   sin centrerade kolumn. */
.hero-inner{ position:relative; z-index:4; width:100%; max-width:none; }

.hero-eyebrow{ margin-bottom:clamp(1.1rem,2.2vw,1.8rem); color:var(--blue); }
.hero-title .ln{ display:block; overflow:hidden; }
.hero-title .ln > i{
  display:block; font-style:normal;
  transform:translateY(105%); opacity:0;
  transition:transform 1.05s var(--ease), opacity 1.05s var(--ease);
}
.hero-title .ln:nth-child(2) > i{ transition-delay:.1s; }
.hero-title .ln:nth-child(3) > i{ transition-delay:.2s; }
.hero-title .ln--accent > i{ color:var(--blue); }
.is-ready .hero-title .ln > i{ transform:translateY(0); opacity:1; }

.hero-body{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(1.4rem,3.5vw,3.5rem);
  margin-top:clamp(1.5rem,2.8vw,2.4rem); max-width:62rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
}
.is-ready .hero-body{ opacity:1; transform:none; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Ligger inte langre ovanpa videon utan pa egen vit botten direkt under
   hero:n, sa den bryter vyn precis vid skarmkanten. */
.hero-rail{
  position:relative; z-index:4;
  border-block:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--paper);
  opacity:0; transition:opacity 1s var(--ease) .75s;
}
.is-ready .hero-rail{ opacity:1; }
.hero-rail div{ font-weight:600;
  padding:1.1rem var(--pad) 1.3rem; border-left:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.hero-rail div:first-child{ border-left:0; }
.hero-rail b{
  display:block; color:var(--ink); font-size:1.55rem; letter-spacing:-.025em;
  font-family:var(--display); font-weight:750; margin-bottom:.1rem;
}
.hero-rail b em{ font-style:normal; color:var(--blue); }
@media (max-width:760px){
  .hero-rail{ grid-template-columns:repeat(2,1fr); }
  .hero-rail div:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .hero-rail div:nth-child(odd){ border-left:0; }
  /* På smal skärm staplas hero:n: fotot tar toppen, texten står på
     vitt under. Den stående ridån räcker inte — rubriken hamnar mitt
     i bilden och tappar kontrast. */
  #field,.hero-photo,.hero-video{ inset:0 0 auto 0; height:34svh; object-position:58% 26%; }
  .hero{ padding-top:calc(34svh + 1.75rem); }
  .hero::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 20%,
      rgba(255,255,255,0) 26%, #FFFFFF 34%, #FFFFFF 100%);
  }
  .hero-title{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .hero-eyebrow{ margin-bottom:.9rem; }
  /* margin-top behovs inte langre, raden ligger utanfor hero:n */
}

.scrollcue{ font-weight:600;
  position:absolute; right:var(--pad); bottom:9.5rem; z-index:5;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); writing-mode:vertical-rl; display:flex; align-items:center; gap:.8rem;
}
.scrollcue::after{ content:""; width:1px; height:54px; background:linear-gradient(var(--mute),transparent); }
@media (max-width:900px){ .scrollcue{ display:none; } }

/* ─────────────────────────────────────────────────────────────
   MARQUEE — branscher
   ───────────────────────────────────────────────────────────── */
/* Bannern satt tidigare klistrad mot hero:n, och hela luften låg efter
   den i stället. Nu andas den på båda sidor. */
.marquee{
  overflow:hidden; padding-block:1.4rem;
  background:var(--paper); margin-top:clamp(2.5rem,4.5vw,3.5rem);
}
/* Sektionen direkt efter bannern behöver inte full topp-padding — luften
   ovanför bannern gör redan jobbet. */
.marquee + .band{ padding-top:clamp(2.75rem,5vw,4.5rem); }
.marquee-track{ display:flex; width:max-content; animation:slide 40s linear infinite; }
.marquee-track span{
  font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.9rem);
  letter-spacing:-.022em; color:#9DAEB9; padding-inline:1.4rem; white-space:nowrap;
}
.marquee-track span::after{ content:"·"; color:var(--blue); margin-left:2.8rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ─────────────────────────────────────────────────────────────
   SIFFERBAND
   ───────────────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stats > div{ background:var(--paper); padding:clamp(1.6rem,3vw,2.8rem); }
.stats .figure{
  font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(2.6rem,6vw,5rem); line-height:1; color:var(--ink);
  display:flex; align-items:baseline; gap:.04em;
}
.stats .figure em{ font-style:normal; color:var(--blue); font-size:.44em; }
.stats p{ margin:.7rem 0 0; font-size:.94rem; color:var(--mute); max-width:23ch; }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stats{ grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────────────────
   TJÄNSTER — pinnad vänsterkolumn
   ───────────────────────────────────────────────────────────── */
.svc{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,7rem); align-items:start; }
.svc-sticky{ position:sticky; top:22vh; }
.svc-index{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.15rem; }
.svc-index li{ font-weight:600;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:#8B9BA6; padding:.5rem 0 .5rem 1.5rem; position:relative;
  transition:color .4s var(--ease);
}
.svc-index li::before{
  content:""; position:absolute; left:0; top:50%; width:.7rem; height:1px;
  background:currentColor; transform:scaleX(.3); transform-origin:left;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.svc-index li.on{ color:var(--ink); }
.svc-index li.on::before{ transform:scaleX(1); background:var(--blue); height:2px; }

.svc-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.svc-item{ background:var(--paper-2); padding:clamp(2rem,4vw,3.4rem) 0; display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1.5rem; }
.svc-item .no{ font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; color:var(--blue); padding-top:.45rem; }
.svc-item p{ margin:.75rem 0 0; color:#41525D; max-width:52ch; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.15rem; }
.svc-tags span{ font-weight:600;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .7rem; border:1px solid var(--line); border-radius:999px; color:var(--mute); background:var(--paper);
}
@media (max-width:900px){
  .svc{ grid-template-columns:1fr; }
  .svc-sticky{ position:static; }
  .svc-index{ display:none; }
  .svc-item{ grid-template-columns:3rem minmax(0,1fr); gap:1rem; }
}

/* ─────────────────────────────────────────────────────────────
   PROCESS — horisontell scroll, det enda mörka bandet
   ───────────────────────────────────────────────────────────── */
.track{ height:220vh; position:relative; background:var(--ink-2); }
.track-view{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.track-head{ padding-inline:var(--pad); margin-bottom:clamp(2rem,4vw,3.5rem); }
.track-rail{ display:flex; gap:clamp(1rem,2vw,2rem); padding-inline:var(--pad); will-change:transform; contain:layout; }
.step{
  flex:0 0 min(80vw,31rem); border:1px solid var(--line-dk); border-radius:4px;
  padding:clamp(1.6rem,3vw,2.4rem); background:linear-gradient(160deg,var(--ink-3),#0E1720);
  display:flex; flex-direction:column; gap:1rem; min-height:20rem;
}
.step .no{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:#4FB3E8;
  border-bottom:1px solid var(--line-dk); padding-bottom:1rem;
}
.step h3{ color:#fff; }
.step p{ margin:0; color:#93A8B6; font-size:.99rem; }
.step .wave{ margin-top:auto; height:26px; width:100%; opacity:.65; }
@media (max-width:900px){
  .track{ height:auto; }
  .track-view{ position:static; height:auto; padding-block:clamp(4rem,10vw,7rem); }
  .track-rail{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.5rem; transform:none !important; }
  .step{ scroll-snap-align:start; }
}

/* ─────────────────────────────────────────────────────────────
   MANIFEST — ord som tänds vid scroll
   ───────────────────────────────────────────────────────────── */
.manifest{ padding-block:clamp(4rem,8vw,7rem); background:var(--paper); }
.manifest-text{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,4.1vw,3.3rem); line-height:1.24; letter-spacing:-.024em;
  max-width:22ch; margin:2.5rem 0 0;
}
.manifest-text w{ color:#C9D6DF; transition:color .28s linear; }
.manifest-text w.lit{ color:var(--ink); }
.manifest-text w.hot{ color:var(--blue); }

/* ─────────────────────────────────────────────────────────────
   KARRIÄR
   ───────────────────────────────────────────────────────────── */
.culture{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.culture > div{ background:var(--paper); padding:clamp(1.5rem,2.6vw,2.2rem); }
.culture .k{ font-weight:600; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.culture h3{ margin-top:.9rem; }
.culture p{ margin:.6rem 0 0; font-size:.96rem; color:var(--mute); }

.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.5rem,1.2vw,1rem); margin-top:clamp(1rem,2vw,1.5rem); }
.shot{
  position:relative; overflow:hidden; border-radius:4px; margin:0;
  background:linear-gradient(150deg,var(--blue) 0%,#0E4E76 55%,var(--ink-2) 100%);
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot.no-photo img{ display:none; }
.shot figcaption{ font-weight:600;
  position:absolute; left:0; right:0; bottom:0; padding:.75rem .95rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:linear-gradient(transparent,rgba(11,17,22,.78));
}
.shot--a{ grid-column:span 7; aspect-ratio:16/10; }
.shot--b{ grid-column:span 5; aspect-ratio:16/10; }
@media (max-width:760px){ .shot{ grid-column:span 12 !important; aspect-ratio:16/10 !important; } }

/* ── lediga tjänster ─────────────────────────────────────────── */
.jobs{ border-top:1px solid var(--line); margin-top:clamp(3rem,6vw,5rem); }
.job{ border-bottom:1px solid var(--line); }
.job-btn{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  gap:1.5rem; align-items:center; text-align:left; padding:clamp(1.3rem,2.6vw,2rem) 0;
}
.job-btn:hover .job-title{ color:var(--blue); }
.job-title{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2.6vw,2rem); letter-spacing:-.024em; color:var(--ink); transition:color .3s var(--ease); }
.job-meta{ font-weight:600; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.job-plus{ width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--ink); flex:none; transition:transform .4s var(--ease), border-color .4s, color .4s; }
.job-btn[aria-expanded="true"] .job-plus{ transform:rotate(45deg); border-color:var(--blue); color:var(--blue); }
.job-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.job-panel > div{ overflow:hidden; }
.job.open .job-panel{ grid-template-rows:1fr; }
.job-panel p{ margin:0 0 1.4rem; max-width:58ch; color:var(--mute); }
@media (max-width:640px){
  .job-btn{ grid-template-columns:minmax(0,1fr) auto; }
  .job-meta{ grid-column:1; grid-row:2; }
  .job-plus{ grid-row:1/3; }
}

/* ─────────────────────────────────────────────────────────────
   AVTALSMODELLER
   ───────────────────────────────────────────────────────────── */
.models{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.models > div{ background:var(--paper); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; gap:.9rem; }
.models .k{ font-weight:600; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.models p{ margin:0; color:#41525D; font-size:.97rem; }
.models .fit{ font-weight:600; margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
@media (max-width:820px){ .models{ grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────────────────
   KONTAKT + FOOTER
   ───────────────────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,6vw,6rem); align-items:end; }
.contact-list{ display:grid; gap:1.4rem; margin:0; }
.contact-list div{ display:grid; gap:.25rem; }
.contact-list dt{ font-weight:600; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#7D96A6; }
.contact-list dd{ margin:0; font-size:1.12rem; color:#fff; }
.contact-list a{ text-decoration:none; border-bottom:1px solid var(--line-dk); padding-bottom:2px; }
.contact-list a:hover{ border-color:var(--blue); color:#4FB3E8; }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; } }

/* SIDFOTEN ÄR EN SMAL REMSA — inget mer.
   Tidigare var den ett helt mörkt band: utmärkelserna i en egen sektion med
   rubrik och stora märken, och textraden under. Det blev för tjockt. Nu finns
   bara textraden kvar, och märkena ligger inbakade i samma rad. Lägg inte
   tillbaka något block här — höjden är hela poängen. */
/* Höjden är uppskruvad 30 % mot den första smala versionen, eftersom märkena
   blev oläsligt små. Ändrar du den här raden måste .foot-cert img följa med i
   samma proportion — annars blir det luft runt märken som inte växer. */
.band--foot{ padding-block:clamp(1.05rem,1.95vw,1.5rem); }

.foot{ font-weight:600;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem clamp(1rem,2.4vw,2rem); justify-content:space-between;
  margin:0; border:0;
  /* Chattbubblan ar fixerad i nedre hogra hornet och ligger over foten nar
     man scrollat hela vagen ner. Utan den har luften hamnade adminknappen
     under den. Matt: bubblan ar 3,5rem bred plus sitt eget avstand fran
     kanten, sa 5,5rem racker med marginal. */
  padding:0 5.5rem 0 0;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#7D96A6;
}

/* Utmärkelserna är ritade för ljus botten och får därför en vit platta på det
   mörka bandet i stället för att inverteras till oigenkännlighet.
   OBS: märkena bär text — org.nr och årtal. I remsan är de för små för att den
   texten ska gå att läsa; här fungerar de som märken, inte som dokument.
   Innebörden bärs av alt-texten. Vill man kunna läsa dem krävs ~60 px höjd,
   och då är vi tillbaka i ett tjockt band. */
.foot-cert{ display:flex; align-items:center; gap:.5rem; }
.foot-cert figure{
  margin:0; background:#fff; border-radius:6px; padding:.32rem .45rem;
  display:grid; place-items:center;
}
.foot-cert img{ height:2.2rem; width:auto; display:block; }

/* Adminknappen sist i fotraden. Diskret med flit: den vander sig till en
   person, inte till besokarna. Ingen animerad skugga, bara farg och ram. */
.foot-admin{
  font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:#7D96A6; white-space:nowrap;
  padding:.45rem .9rem; border:1px solid var(--line-dk); border-radius:999px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot-admin:hover{ color:#fff; border-color:var(--blue); }

/* TVA KNAPPAR I ROTT, pa Salars uttryckliga begaran. Rott finns inte i
   paletten (vitt, Senzumblatt, svart) — det ar med flit att just de har
   sticker ut mot de gra i samma rad.

   #FF7A7A och inte en mattad rod: mot fotens #0B1116 ger den ett
   kontrastforhallande pa ca 7,4:1, alltsa val over AA-kravet 4,5:1. En
   morkare rod hade bade brutit mot kravet och forsvunnit i det svarta.
   Vikt 700 mot 600 pa de gra, sa de laser som en egen grupp. */
.foot-admin--rod{
  color:#FF7A7A; font-weight:700;
  border-color:rgba(255,122,122,.42);
}
.foot-admin--rod:hover{
  color:#0B1116; background:#FF7A7A; border-color:#FF7A7A;
}
/* Halls ihop som ett par. .foot ar flex med wrap, och losa knappar bryts isar
   pa smal skarm — Admin blev kvar sist pa en rad och Power BI hamnade ensam
   pa nasta. Behallaren gor att de bryter tillsammans i stallet. */
.foot-lankar{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
@media (max-width:560px){
  .foot{ justify-content:flex-start; }
  .foot-cert img{ height:1.9rem; }
}

/* ─────────────────────────────────────────────────────────────
   CHATTBUBBLAN — finns på alla sidor, längst ner till VÄNSTER.
   Markupen byggs av site.js; den ska inte dupliceras i sex filer.
   Läget är nedre HÖGER — flytta både .cw-launch och .cw-panel om det ska
   ändras, annars öppnas rutan på andra sidan skärmen än knappen.
   Ingen backdrop-filter och ingen animerad box-shadow — samma husregler
   som resten av sajten. Allt som rör sig är transform och opacity.
   ───────────────────────────────────────────────────────────── */
.cw-launch{
  position:fixed; right:clamp(1rem,2vw,1.75rem); bottom:clamp(1rem,2vw,1.75rem);
  z-index:70; width:3.5rem; height:3.5rem; border-radius:50%; flex:none;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  box-shadow:0 16px 34px -14px rgba(0,120,185,.75);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.cw-launch:hover{ transform:translateY(-2px); background:var(--blue-dk); }
.cw-launch svg{ width:1.55rem; height:1.55rem; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cw-launch .cw-close-i{ display:none; }
.chat-open .cw-launch .cw-open-i{ display:none; }
.chat-open .cw-launch .cw-close-i{ display:block; }
/* Mobilmenyn täcker hela skärmen — bubblan ska inte ligga och sväva ovanpå. */
.menu-open .cw-launch{ opacity:0; visibility:hidden; }

.cw-panel{
  position:fixed; right:clamp(1rem,2vw,1.75rem);
  bottom:calc(clamp(1rem,2vw,1.75rem) + 4.25rem);
  z-index:70; width:min(23rem, calc(100vw - 2rem));
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 44px 80px -50px rgba(11,17,22,.55), 0 2px 10px -5px rgba(11,17,22,.16);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.chat-open .cw-panel{ opacity:1; visibility:visible; transform:none; }

.cw-head{ display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--paper-2); }
.cw-avatar{ width:2rem; height:2rem; border-radius:50%; flex:none;
  background:linear-gradient(150deg,var(--blue),#4FB3E8); display:grid; place-items:center;
  color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.06em; }
.cw-who{ display:grid; gap:.05rem; margin-right:auto; }
.cw-who b{ font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--ink); letter-spacing:-.01em; }
.cw-who span{ font-weight:600; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }

.cw-log{ display:flex; flex-direction:column; gap:.5rem;
  padding:1rem; height:17rem; overflow-y:auto; overscroll-behavior:contain; }
.cw-msg{ max-width:85%; padding:.65rem .9rem; border-radius:13px; font-size:.92rem; line-height:1.5; }
.cw-msg--bot{ background:var(--paper-2); border:1px solid var(--line); color:#33434E; border-bottom-left-radius:4px; align-self:flex-start; }
.cw-msg--user{ background:var(--blue); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.cw-msg a{ color:inherit; }
.cw-msg--bot a{ color:var(--blue-dk); }
.cw-typing{ display:flex; gap:.28rem; align-items:center; padding:.8rem .9rem; }
.cw-typing i{ width:6px; height:6px; border-radius:50%; background:#A9B9C4; display:block; animation:blink 1.3s infinite; }
.cw-typing i:nth-child(2){ animation-delay:.18s; }
.cw-typing i:nth-child(3){ animation-delay:.36s; }

.cw-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--line); }
.cw-form input{ font:inherit; font-size:.93rem; flex:1; min-width:0; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.6rem .9rem; }
.cw-form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-lt); }
.cw-form button{ width:2.4rem; height:2.4rem; border-radius:50%; flex:none;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  transition:background .25s var(--ease); }
.cw-form button:hover{ background:var(--blue-dk); }
.cw-form button svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.cw-foot{ font-weight:600; padding:.5rem 1rem .7rem; text-align:center;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }

@media (max-width:520px){
  .cw-panel{ width:calc(100vw - 1.5rem); right:.75rem; }
  .cw-log{ height:14rem; }
}

/* ── generisk scroll-avslöjning ──────────────────────────────── */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; } .rv-d3{ transition-delay:.27s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* site.js plockar bort videoelementet helt vid reducerad rörelse. Regeln
     här hinner före och gör att postern inte blinkar till dessförinnan. */
  .hero-video{ opacity:0; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  .hero-title .ln > i{ transform:none; opacity:1; }
  .hero-body,.hero-rail{ opacity:1; transform:none; }
  .track{ height:auto; }
  .track-view{ position:static; height:auto; padding-block:5rem; }
  .track-rail{ overflow-x:auto; transform:none !important; }
  .manifest-text w{ color:var(--ink); }
}