:root{
  --paper:#F2F2F2;
  --panel:#E8E8EA;
  --ink:#191923;
  --ink-60:rgba(25,25,35,.62);
  --ink-15:rgba(25,25,35,.16);
  --dusk:#373741;
  --gray-light:#D2D2D4;
  --green:#50F09B;
  --green-hover:#3BDC86;
  --green-deep:#0E9755;
  --radius:4px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 100;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- eyebrows & headings ---------- */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:.12em;
  color:var(--dusk);
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--dusk);flex:none;
}
h1,h2,h3{
  font-variation-settings:'wdth' 118;
  font-weight:640;
  letter-spacing:-.015em;
  line-height:1.08;
  text-wrap:balance;
}
h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px}
h3{font-size:19px;font-variation-settings:'wdth' 112;line-height:1.25}
.lede{color:var(--ink-60);max-width:56ch}

/* ---------- statusremsa (signatur) ---------- */
.statusbar{
  background:var(--ink);color:var(--paper);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.10em;
  display:flex;justify-content:space-between;gap:16px;
  padding:7px 24px;
}
.statusbar .dot{color:var(--gray-light)}
.statusbar span:last-child{opacity:.75}
@media(max-width:640px){.statusbar span:last-child{display:none}}

/* ---------- navigation ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1.5px solid var(--ink);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:28px;height:64px;
}
.wordmark{display:inline-flex;align-items:center;text-decoration:none}
.logo{
  display:block;height:32px;width:auto;
  --l-txt:var(--ink);--l-base:var(--ink);--l-bar:var(--green);
}
footer .logo{height:34px;--l-txt:var(--paper);--l-base:#828288}
.nav-links{display:flex;gap:24px;align-items:center;margin-left:auto}
.nav-links a{
  text-decoration:none;font-size:15px;font-weight:500;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--dusk)}
.nav-links a.btn,.nav-cta a.btn{padding:8px 14px;border-bottom:1.5px solid var(--ink)}
.nav-links a.btn:hover,.nav-cta a.btn:hover{border-bottom:1.5px solid var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center;margin-left:8px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:var(--radius);
  border:1.5px solid var(--ink);cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s;
  background:transparent;color:var(--ink);
}
.btn-primary{background:var(--green);color:var(--ink);border-color:var(--ink);font-weight:650}
.btn-primary:hover{background:var(--green-hover)}
.hero-actions .btn-primary,.form .btn-primary{padding:13px 24px;font-size:16px;box-shadow:4px 4px 0 rgba(25,25,35,.15)}
.btn-ghost:hover{background:var(--panel)}
.btn-small{padding:8px 14px;font-size:14px}
:focus-visible{outline:3px solid var(--dusk);outline-offset:2px}
.takeover :focus-visible,.usp :focus-visible,footer :focus-visible{outline-color:var(--gray-light)}

/* Mobilmenyn styrs av :target, inte av en dold kryssruta. Skälet är att en
   kryssruta bara kan avmarkeras av sin egen etikett: tappade man en ankarlänk
   i menyn (#om, #kontakt) bytte sidan position medan menyn låg kvar ovanpå
   målet. Med :target släcks menyn av själva fragmentbytet, vilket är precis
   det som händer när man följer en länk i den.

   Fyra element bär mekaniken: .ham-open pekar på #menu och öppnar, .ham-close
   och .nav-scrim pekar på #stang — ett fragment utan motsvarande element, så
   menyn stängs utan att sidan hoppar. Öppna- och stäng-hamburgaren byter
   plats med varandra, så knappen fortsätter fungera som växel.

   Sajten har script-src 'none'; ingenting här kräver JavaScript. */
.hamburger{display:none}
.nav-scrim{display:none}
/* Målet för #menu: 0x0 och fixerat, alltså alltid i vy. Ett :target-mål som
   redan syns får webbläsaren att scrolla noll pixlar — utan det hoppade sidan
   till dokumentets topp varje gång menyn öppnades. Själva menyn förblir
   absolut placerad i headern, så den hamnar rätt oavsett scrollposition. */
.nav-anchor{position:fixed;top:0;left:0;width:0;height:0}
@media(max-width:960px){
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--paper);border-bottom:1.5px solid var(--ink);
    flex-direction:column;align-items:flex-start;padding:20px 24px;gap:16px;
  }
  #menu:target ~ .nav-links{display:flex}
  .hamburger{
    display:flex;flex-direction:column;gap:5px;margin-left:auto;
    cursor:pointer;padding:10px;
  }
  .hamburger span{width:22px;height:2px;background:var(--ink)}
  /* Växeln: bara en av de två hamburgarna syns åt gången. */
  .ham-close{display:none}
  .nav-inner:has(#menu:target) .ham-open{display:none}
  .nav-inner:has(#menu:target) .ham-close{display:flex}
  /* Ytan under menyn fångar tapp utanför. Ligger före menyn i DOM och målas
     därför under den; börjar under headern så hamburgaren förblir nåbar. */
  .nav-inner:has(#menu:target) .nav-scrim{
    display:block;position:fixed;inset:64px 0 0;
  }
  .nav-cta{margin-left:0}
  .nav-cta .btn-ghost{display:none}
}

/* ---------- hero ---------- */
.hero{padding:72px 0 64px;border-bottom:1.5px solid var(--ink)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;align-items:center;
}
.hero h1{font-size:clamp(40px,6vw,76px);font-weight:720;font-variation-settings:'wdth' 120;letter-spacing:-.025em;line-height:1.02;margin-bottom:26px}
.hero .lede{margin-bottom:30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.microtext{font-size:14px;color:var(--ink-60);margin-bottom:22px}
.meta-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
  border:1px solid var(--ink-15);border-radius:var(--radius);
  padding:6px 10px;background:var(--panel);
}

/* instrumentpanel med nyckeltal */
.panel-card{
  border:1.5px solid var(--ink);border-radius:var(--radius);
  background:#fff;overflow:hidden;
  box-shadow:6px 6px 0 var(--panel);
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1.5px solid var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.10em;
}
.panel-head .live{display:flex;align-items:center;gap:7px;color:var(--dusk)}
.panel-head .live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--green-deep);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.stat{
  padding:20px 16px 18px;
  border-bottom:1px solid var(--ink-15);
}
.stat:last-child{border-bottom:none}
.stat-label{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.11em;color:var(--ink-60);margin-bottom:6px;
}
.stat-value{
  display:flex;align-items:baseline;gap:10px;
}
.stat-value strong{
  font-size:clamp(30px,3.2vw,40px);font-weight:700;
  font-variation-settings:'wdth' 118;letter-spacing:-.02em;line-height:1;
}
.stat-value span{font-size:14.5px;color:var(--ink-60)}
@media(max-width:860px){
  .hero{padding:48px 0}
  .hero-grid{grid-template-columns:1fr;gap:36px}
}

/* ---------- sektioner allmänt ---------- */
section{padding:76px 0}
.section-line{border-bottom:1.5px solid var(--ink)}
@media(max-width:640px){section{padding:56px 0}}

/* ---------- kundrad ---------- */
.clients{padding:36px 0;border-bottom:1.5px solid var(--ink);background:var(--panel)}
.clients .eyebrow{margin-bottom:16px}
.client-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--ink-15);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;
}
.client-grid div{
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.06em;
  padding:16px 12px;text-align:center;color:var(--ink-60);
  border-right:1px solid var(--ink-15);border-bottom:1px solid var(--ink-15);
}
.client-grid div:nth-child(4n){border-right:none}
.client-grid div:nth-child(n+5){border-bottom:none}
.client-grid div{display:flex;align-items:center;justify-content:center}
/* Loggorna är 44 px höga och får ta högst 80 % av cellens bredd. De två
   villkoren kan krocka, och de gjorde det: en replaced element-box som kläms i
   bara en riktning sträcker sitt innehåll så länge height står fast. Mätt i
   Chrome renderades ppi 110x44 i stället för 174,5x44 — 37 % för smal — och
   defekten fanns i hela bandet under ~1020 px, alltså på fyrkolumnsrastret
   också och inte bara i mobilläget.

   object-fit:contain skiljer boxen från innehållet. Boxen behåller sina 44 px,
   så rastrets radhöjder och cellramarna står orörda på varje bredd, medan
   logotypen skalas proportionellt inuti den. Alternativet max-height:44px utan
   fast height ger också rätt proportioner men låter boxen krympa, och då blev
   cellhöjderna 71,2/76/77 vid 375 px i stället för 76/77 — en synlig
   layoutändring i ett raster med ramar. Vid full bredd fyller innehållet boxen
   och contain är utan verkan; för de fyra SVG-loggorna landar Chromes avrundade
   intrinsic-mått ~0,6 px in, vilket syns som en kantutjämningshårlinje och
   ingenting annat. Kundvarumärken renderas aldrig med fel proportioner. */
.client-grid img{height:44px;width:auto;max-width:80%;object-fit:contain;
  filter:grayscale(1);opacity:.65;transition:filter .2s,opacity .2s}
.client-grid div:hover img{filter:none;opacity:1}
@media(max-width:640px){
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .client-grid div:nth-child(4n){border-right:1px solid var(--ink-15)}
  .client-grid div:nth-child(2n){border-right:none}
  .client-grid div:nth-child(n+5){border-bottom:1px solid var(--ink-15)}
  .client-grid div:nth-child(n+7){border-bottom:none}
}

/* ---------- öppna system ---------- */
.usp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
.principles{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.principle{
  display:grid;grid-template-columns:64px 1fr;gap:18px;
  padding:22px 0;border-bottom:1.5px solid var(--ink);align-items:start;
}
.principle .num{
  font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--dusk);
  border:1.5px solid var(--dusk);border-radius:var(--radius);
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
}
.principle p{font-size:18px;font-weight:500;line-height:1.4;padding-top:9px}
@media(max-width:860px){.usp-grid{grid-template-columns:1fr;gap:32px}}

/* USP kontrastvänd: dusk, stora numrerade principer */
.usp{background:var(--dusk);color:var(--paper)}
.usp .eyebrow{color:var(--gray-light)}
.usp .eyebrow::before{background:var(--gray-light)}
.usp .lede{color:rgba(242,242,242,.72)}
.usp .principles{border-top:1.5px solid rgba(242,242,242,.35)}
.usp .principle{grid-template-columns:110px 1fr;padding:26px 0;border-bottom:1.5px solid rgba(242,242,242,.35)}
.usp .principle .num{
  border:none;width:auto;height:auto;display:block;
  font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:0;
  color:var(--gray-light);
}
.usp .principle p{font-size:clamp(18px,2vw,21px);color:var(--paper);padding-top:6px}
@media(max-width:640px){.usp .principle{grid-template-columns:72px 1fr}}

/* ---------- tjänster ---------- */
.services{background:var(--panel)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.service-card{
  background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:5px 5px 0 rgba(25,25,35,.08);
}
.service-card .num{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--dusk);letter-spacing:.08em;
}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;
  border:1px solid var(--ink-15);border-radius:3px;padding:4px 8px;background:var(--panel);
}
.service-card p{font-size:15px;color:var(--ink-60)}
.specialist{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--ink-15);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;
}
.specialist .eyebrow{margin:0}
.specialist .eyebrow::before{display:none}
.specialist p{font-size:14.5px;color:var(--ink-60);flex:1;min-width:280px}
.arrow-link{
  font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:2px solid var(--dusk);padding-bottom:2px;white-space:nowrap;
}
.arrow-link:hover{color:var(--dusk)}
@media(max-width:860px){.service-grid{grid-template-columns:1fr}}

/* ---------- mörk sektion ---------- */
.takeover{background:var(--ink);color:var(--paper)}
.takeover .eyebrow{color:var(--gray-light)}
.takeover .eyebrow::before{background:var(--gray-light)}
.takeover .lede{color:rgba(242,242,242,.65)}
/* ---------- kundcase ---------- */
.case-tag{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.10em;
  color:var(--ink-60);border:1px dashed var(--ink-15);border-radius:3px;
  padding:5px 10px;display:inline-block;margin-bottom:20px;
}
.case-card{
  border:1.5px dashed var(--ink-15);border-radius:var(--radius);
  padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px;
  background:#fff;
}
.case-card .ph{
  background:var(--panel);border-radius:var(--radius);
  min-height:200px;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--ink-60);
}
.case-fields{display:flex;flex-direction:column;gap:14px}
.case-fields .row{border-bottom:1px solid var(--ink-15);padding-bottom:12px}
.case-fields .k{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.10em;
  color:var(--dusk);display:block;margin-bottom:3px;
}
.case-fields .v{font-size:14.5px;color:var(--ink-60)}
@media(max-width:860px){.case-card{grid-template-columns:1fr}}

/* ---------- om propella ---------- */
.about{background:var(--panel)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
blockquote{
  border-left:4px solid var(--dusk);padding:6px 0 6px 22px;
  font-size:clamp(20px,2.4vw,26px);font-weight:560;
  font-variation-settings:'wdth' 110;line-height:1.35;
  margin-bottom:16px;
}
.attribution{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.11em;color:var(--ink-60);
}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- jobb ---------- */
.jobs-list{border-top:1.5px solid var(--ink);margin-top:36px}
.job-row{
  display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;
  padding:18px 4px;border-bottom:1.5px solid var(--ink);
  text-decoration:none;transition:background .15s;
}
.job-row:hover{background:var(--panel)}
.job-row strong{font-weight:600;font-size:17px}
.job-row .meta{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-60);letter-spacing:.06em}
.job-row .go{color:var(--dusk);font-weight:700}
.jobs-more{margin-top:26px}
@media(max-width:640px){
  .job-row{grid-template-columns:1fr auto}
  .job-row .meta{grid-column:1;font-size:12px}
  .job-row .go{grid-row:1;grid-column:2}
}

/* ---------- kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-top:12px}
.form{display:flex;flex-direction:column;gap:18px}
.field label{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.11em;
  color:var(--dusk);display:block;margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;font-family:'Archivo',sans-serif;font-size:16px;
  padding:13px 14px;border:1.5px solid var(--ink);border-radius:var(--radius);
  background:#fff;color:var(--ink);
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--dusk);outline-offset:1px}
.form .btn{align-self:flex-start}
.contact-direct{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  border:1.5px solid var(--ink);border-radius:var(--radius);
  background:#fff;padding:24px;
}
.contact-direct .btn-primary{padding:13px 24px;font-size:16px}
.contact-direct a.tel{
  font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;
  text-decoration:none;border-bottom:2px solid var(--dusk);
}
.contact-direct p{font-size:14.5px;color:var(--ink-60)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- serviceanmälan ---------- */
.service-report{
  background:var(--panel);border-top:1.5px solid var(--ink);
  padding:30px 0;
}
.service-report .inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.service-report p{font-size:15px;color:var(--ink-60);display:flex;align-items:center;gap:12px}
.service-report p::before{
  content:"";width:8px;height:8px;border-radius:2px;background:var(--dusk);flex:none;
}

/* ---------- footer ---------- */
/* Footerns textvalörer är kontrastmätta mot footerbakgrunden #191923
   (var(--ink)). WCAG AA kräver 4.5:1 för normal text. Ordningen mellan
   valörerna är bevarad — beskrivningen ljusast, juridiken diskretast — bara
   nivån är lyft:
     .footer-desc                 .60 -> .68  #ADADB0  7.79:1
     .footer-badges .footer-cert  .50 -> .62  #A0A0A3  6.68:1
     .legal-entities (+länken)    .42 -> .58  #97979B  3.75:1 -> 5.99:1
   Endast textfärgen är ändrad; den mörka basen är orörd. .legal-diven är tom
   på samtliga sidor — bara hårlinjen renderas — så dess färg står kvar. */
footer{background:var(--ink);color:var(--paper);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:40px;margin-bottom:44px}
.footer-desc{font-size:15px;color:rgba(242,242,242,.68);max-width:34ch;margin-top:12px}
/* Footerkolumnernas etiketter ligger på h2 för att rubrikordningen ska hålla
   på varje sida: som h4 hoppade de över h3 på varje sida vars sista
   sektionsrubrik är h2, och h3 hade hoppat över h2 på 404-sidan, som bara har
   en h1 före footern. Utseendet bärs av klassen och inte av elementnivån:
   line-height, text-wrap och font-variation-settings sätts explicit så att
   basens h1,h2,h3-regel inte kan läcka in. */
.footer-col .footer-h{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.11em;
  font-weight:500;color:var(--gray-light);margin-bottom:14px;
  line-height:1.55;text-wrap:wrap;font-variation-settings:normal;
}
.footer-col a,.footer-col span{
  display:block;font-size:14.5px;color:rgba(242,242,242,.8);
  text-decoration:none;margin-bottom:9px;
}
.footer-col a:hover{color:var(--paper);text-decoration:underline}
.legal{
  border-top:1px solid rgba(242,242,242,.2);padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;
  color:rgba(242,242,242,.5);
}
.legal a{color:inherit}
.legal-entities{
  margin-top:14px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.05em;line-height:1.7;
  color:rgba(242,242,242,.58);
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- undersida tjänster ---------- */
/* Undersidan /tjanster/ — endast tillägg, inga befintliga regler berörda. */
.page-head{padding:68px 0 56px}
.page-head h1{
  font-size:clamp(38px,5.2vw,62px);font-weight:720;
  font-variation-settings:'wdth' 120;letter-spacing:-.025em;line-height:1.03;
  margin-bottom:22px;
}
.tj-area-alt{background:var(--panel)}
.tj-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.tj-head{display:flex;flex-direction:column;gap:12px}
.tj-head .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:0;
  color:var(--dusk);
}
.tj-body .lede{max-width:60ch}
.tj-included{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.10em;
  color:var(--dusk);margin-top:26px;padding-top:18px;
  border-top:1px solid var(--ink-15);
}
.tj-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:11px}
.tj-list li{
  position:relative;padding-left:24px;
  font-size:15.5px;color:var(--ink-60);line-height:1.5;
}
.tj-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:8px;height:8px;border-radius:2px;background:var(--dusk);
}
.tj-specialist{padding:40px 0;background:var(--panel)}
.tj-specialist .specialist{margin-top:0;padding-top:0;border-top:none}
.tj-cta{padding:64px 0}
.tj-cta-card{
  border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;
  box-shadow:6px 6px 0 var(--panel);
  padding:28px;display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.tj-cta-card p{
  font-size:clamp(18px,2vw,22px);font-weight:500;line-height:1.4;
  max-width:52ch;text-wrap:pretty;
}
.tj-cta-card .btn-primary{padding:13px 24px;font-size:16px;flex:none}
@media(max-width:860px){
  .tj-grid{grid-template-columns:1fr;gap:26px}
  .tj-head{flex-direction:row;align-items:baseline;gap:16px}
}
@media(max-width:640px){
  .page-head{padding:48px 0 40px}
  .tj-cta{padding:48px 0}
  .tj-cta-card{padding:22px}
}

/* ---------- undersida karriär ---------- */
/* Undersidan /karriar/ — endast tillägg, inga befintliga regler berörda. */
.ka-area-alt{background:var(--panel)}
.ka-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.ka-head h2{margin-bottom:0}
.ka-head .lede{margin-top:16px;max-width:34ch}
.ka-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.ka-list li{
  position:relative;padding-left:24px;
  font-size:15.5px;color:var(--ink-60);line-height:1.55;
}
.ka-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:8px;height:8px;border-radius:2px;background:var(--dusk);
}
.ka-list strong{color:var(--ink);font-weight:640}
.ka-roles li{font-size:16px}
.ka-roles strong{font-variation-settings:'wdth' 112}
.ka-apply{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ka-apply p{font-size:16px;color:var(--ink-60);max-width:58ch}
.ka-apply .btn-primary{
  margin-top:8px;padding:13px 24px;font-size:16px;
  font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.02em;
}
@media(max-width:860px){
  .ka-grid{grid-template-columns:1fr;gap:26px}
  .ka-head .lede{max-width:56ch}
}

/* ---------- footerbadges ---------- */
/* Medlemskaps- och partnermärken i footern. Endast tillägg. */
.footer-badges{margin-bottom:36px}
/* Samma etikettform som .footer-col .footer-h, egen margin-bottom. */
.footer-badges .footer-h{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.11em;
  font-weight:500;color:var(--gray-light);margin-bottom:18px;
  line-height:1.55;text-wrap:wrap;font-variation-settings:normal;
}
.badge-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
/* Certifieringsmärken visas i original — ingen gråskala, ingen nedtoning.
   Höjden är den fasta storleken; bredden följer varje märkes egen balans.
   Filerna är 104 px höga (2x) — nedskalade från 3x för vikten. */
.badge-row img{height:52px;width:auto;display:block}
/* Certifieringsmeningen under badge-raden: footerns PROSA-register, en nivå mer diskret
   än .footer-desc. Inte .legal-entities form — den är mono och juridisk, och det här är
   en löptextmening. Scopad under .footer-badges så den inte kan träffa annan footertext. */
.footer-badges .footer-cert{
  margin-top:18px;max-width:72ch;
  font-size:13px;line-height:1.65;
  color:rgba(242,242,242,.62);
}

/* ---------- kontaktkort ---------- */
/* "Vad händer sen?" i .contact-direct. Nivån är h3: rubriken hör under
   sektionens h2 "Hör av er." — som h4 hoppade den över h3. Utseendet
   bärs av klassen — varje värde sätts explicit, inklusive text-wrap som
   annars ärvs som balance ur basens h1,h2,h3-regel, så nivåbytet syns inte.
   Graden är personkortets namnrubrik i mindre grad. Hårlinjen ovanför skiljer
   uppföljningen från kontaktvägarna och motiverar kortets 18px flex-gap
   just där; negativ margin-bottom drar i stället rubriken närmare sitt
   eget stycke, som den hör till. width:100% behövs eftersom kortet är
   align-items:flex-start — utan den spänner linjen bara över texten. */
.contact-direct .contact-sub{
  width:100%;padding-top:18px;border-top:1px solid var(--ink-15);
  font-size:15.5px;font-weight:640;font-variation-settings:'wdth' 112;
  line-height:1.25;letter-spacing:-.005em;color:var(--ink);
  margin-bottom:-8px;text-wrap:wrap;
}

/* ---------- korta sektionsingresser ---------- */
/* Basens .lede har max-width:56ch. Det taket är rätt för de nio långa
   ingresserna (149-247 tecken, tre till fem rader) och rörs inte, lika lite
   som .tj-body 60ch eller .ka-head 34ch.

   Fyra ingresser är däremot en enda mening på 77-98 tecken. Mot 56ch bryts de
   i två rader mitt i tanken; med taket höjt löper de ut på en rad. 100ch i
   stället för none ger utrymmet utan att lämna radlängden helt fri — en
   framtida längre text bromsas vid 100ch i stället för att löpa hela .wrap
   (1132px, ~130 tecken). Alla fyra sitter direkt i .wrap, så inget grid
   begränsar dem.

   Karriärsidans #roller är medvetet inte med: dess ingress ligger i
   .ka-grid:s smala huvudkolumn (~430px), där kolumnen bryter före taket.
   Ett höjt tak ger den två rader i stället för tre, aldrig en. */
#tjanster .lede,
#sa-arbetar-vi .lede,
#jobb .lede,
#kontakt .lede{max-width:100ch}

/* ---------- om-sektionen ---------- */
/* .about-grid har align-items:start, vilket förankrar båda kolumnerna i
   överkant. Citatkolumnen är mycket kortare än brödtexten och hängde därför
   högt upp i en halvtom kolumn. Bara citatkolumnen centreras — brödtexten
   ska ligga kvar mot rubriken ovanför, så containerns align-items rörs inte.

   Scopat till desktop med min-width:861px, komplementet till sektionens
   befintliga max-width:860px-brytpunkt: i stapelläget står korten under
   varandra och centrering skulle bara flytta luft. Selektorn pekar på andra
   och sista div:en i griden — den innehåller blockquote och byline. */
@media(min-width:861px){
  .about-grid>div:last-child{align-self:center}
}

/* ---------- undersidornas huvudingresser ---------- */
/* Tjänste- och karriärsidan inleds båda med <section class="page-head">, och
   deras ingress låg på basens 56ch. Det taket är satt för ingresser inne i
   textkolumner; här står stycket ensamt i full .wrap-bredd och bröts i fyra
   rader i onödan. 78ch ger tre rader utan att radlängden blir hero-bred.

   Varken .ka-head 34ch eller .tj-body 60ch berörs: de sitter på ingresser
   inne i griddkolumner (#roller respektive områdena 01-03), som är smala med
   avsikt. .page-head finns bara på de två undersidorna, så selektorn träffar
   exakt de två huvudingresserna och inget annat. */
.page-head .lede{max-width:78ch}

/* ---------- så arbetar vi ---------- */
/* Tre likvärdiga block i .takeover, utan processuttryck. Ersätter .steps/.step
   i markupen: de bar tidslinjen — delad överlinje plus en grön punkt per steg
   via .step::before — och en ordningsföljd som inte längre finns här.

   Bygger på samma delar som resten av den mörka sektionen: .takeover ger
   botten och färgerna, .eyebrow och .lede är redan omfärgade för mörk botten
   (rad 279-281), och .num-typografin är .step .num:s, oförändrad. Endast
   rutnätet och de tre textnivåerna behövde sättas. */
.approach{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.approach-item .num{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.10em;
  color:var(--gray-light);display:block;margin-bottom:10px;
}
.approach-item h3{margin-bottom:8px;color:var(--paper)}
.approach-item p{font-size:15px;color:rgba(242,242,242,.7)}
@media(max-width:860px){
  .approach{grid-template-columns:1fr;gap:28px}
}

/* ---------- länkade tjänstekort ---------- */
/* Kortens h3 är länkar till respektive block på tjänstesidan. Rubriklänk och
   inte omslutande <a> runt <article>: ett <a> hade blivit griditemet och
   .service-card hade behövt height:100% eller display:flex för att fortsatt
   sträcka sig lika högt som sina grannar. Rubriken kräver ingen sådan
   omställning — bara att arvet från a{color:inherit} kompletteras med att
   webbläsarens understrykning stängs av.

   Hovertillståndet lånar navets idiom: genomskinlig underkant som får färg,
   så att linjen inte flyttar texten när den tänds. */
/* Hela kortet är länken, inte bara rubriken. Länken blir griditem och måste
   därför själv sträcka sig: display:flex plus flex:1 på kortet, annars slutar
   korten vara lika höga. Rubrikens hovermarkering flyttas till ett span, så
   understrykningen fortsätter hugga om texten och inte om hela raden.
   :focus-visible ärvs från den globala regeln och ramar in hela kortet. */
.service-grid>a{display:flex;text-decoration:none;border-radius:var(--radius)}
.service-grid>a>.service-card{flex:1}
.service-card h3 span{border-bottom:2px solid transparent}
.service-grid>a:hover h3 span{border-bottom-color:var(--dusk)}

/* Ankarmål i listor hamnar annars under den klistrade headern. */
[id^="roll-"]{scroll-margin-top:84px}

/* ---------- integritetspolicy ---------- */
/* Löpande text utan punktlistor. Rubriknivån är sidans vanliga h2 — storleken
   rörs inte — men den behöver luft ovanför när stycken och rubriker varvas i
   ett enda flöde i stället för att ligga i var sin sektion.
   Styckebredden är satt för läsning, inte för sidbredden. */
.policy h2{margin-top:40px}
.policy h2:first-child{margin-top:0}
.policy p{font-size:16px;color:var(--ink-60);max-width:68ch;margin-bottom:0}

/* ---------- principer med rubrik ---------- */
/* .principle är ett tvåkolumnsgrid: nummer, sedan innehåll. Punkterna har nu
   rubrik OCH text, så de två elementen ligger i en div — annars hade h3 och p
   blivit var sitt griditem och hamnat i fel kolumn.

   Rubriknivån följer .approach-item: h3 med sektionens ärvda färg. Den optiska
   nedskjutningen som .principle p bar (padding-top:9px, som linjerar texten
   mot det stora numret) flyttas till rubriken när en sådan finns. */
.usp .principle h3{padding-top:9px;margin-bottom:4px}
.usp .principle h3 + p{padding-top:0}

/* ---------- driftnettoanalys ---------- */
/* Sidans tes och erbjudandet i ett block: rubriken påstår, andra stycket
   säger vad vi gör åt det. Ljus botten (arvet från body, paper) mellan .usp
   (dusk) och .services (panel) — ett tredje mörkt block direkt efter .usp
   hade slagit sönder sidans växling mörkt/ljust.

   Basen saknar avstånd mellan två efterföljande stycken: p har margin:0 från
   resetten och .lede sätter bara färg och mått. 16px är samma steg som h2:ns
   egen margin-bottom och som .ka-apply:s gap mellan stycken. Syskonselektor i
   stället för en flexkolumn: då behöver h2:ns margin inte nollas.

   Läsmåttet är 78ch, inte basens 56ch. Samma steg som .page-head .lede och av
   samma skäl: styckena står ensamma i full .wrap-bredd, inte i en smal
   griddkolumn som .tj-body 60ch eller .ka-head 34ch. Mot 56ch bröts de långt
   innanför rubrikens spännvidd och blocket såg avhugget ut. 100ch-taket för de
   korta ingresserna är fel håll här — det är satt för enmeningsingresser som
   ska rymmas på en rad, inte för löpande text i två stycken.

   Etiketten är ett produktnamn, inte en kategori som sidans övriga eyebrows
   ("VÅRA TJÄNSTER", "OM PROPELLA"). Namnet står därför med sin riktiga
   versalisering i källan och versaliseras i presentationen, så att remsan ser
   likadan ut som alla andra. Scopat hit — de övriga är redan skrivna med
   versaler i markupen och ska inte röras. */
.statement .eyebrow{text-transform:uppercase}
.statement .lede{max-width:78ch}
.statement .lede + .lede{margin-top:16px}

/* ---------- typsnitt ---------- */
/* Självvärdade woff2 i stället för Google Fonts. Filerna är Googles egna
   subsetter, hämtade från fonts.gstatic.com och oförändrade: Archivo som
   variabel font (vikt 100-900, bredd 62-125 %) och IBM Plex Mono i 400 och
   500 — exakt de axlar och vikter sajten använder.

   Två subsetter per familj, latin och latin-ext, med Googles unicode-range
   bevarad. Latin räcker för svenskan; latin-ext laddas bara om ett tecken
   utanför U+00FF dyker upp i texten, så den kostar ingenting i normalfallet.
   Pilen → och punkten ● ligger utanför båda subsetten och renderas av
   systemtypsnittet — samma sak som med Google Fonts, ingen förändring.

   font-display:swap som förut: texten syns direkt i reservtypsnittet och
   byts när filen laddat. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('/assets/fonts/archivo-100-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('/assets/fonts/archivo-100-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}