/* ══════════════════════════════════════════════════════════════════
   VENYA CONSULTING AB — stilark
   Byggt av Agir Recruitment. Egen dräkt, inte verktygets: Venya är
   kund, inte en vy i Agir Recruiter.

   FÄRGERNA ÄR MÄTTA, INTE VALDA PÅ KÄNSLA. Varje textfärg ligger över
   4,5:1 mot varje yta den faktiskt används på:
     bläck   #10181E  17,9:1 vit · 16,2:1 grund
     petrol  #0E4C5B   9,5:1 vit ·  8,6:1 grund ·  8,2:1 platta
     text    #46504F   8,3:1 vit ·  7,5:1 grund ·  7,2:1 platta
     svag    #5F6968   5,7:1 vit ·  5,1:1 grund ·  4,9:1 platta
     ockra-text #955413 5,9:1 vit · 5,3:1 grund · 5,3:1 sand
     vit på petrol 9,5:1 · vit på petrol-djup 13,0:1
     dis #A9C6CD 7,2:1 och sand #E9B876 7,2:1 på petrol-djup
   OCKRA #C1701F ÄR EN GRAFISK FÄRG, ALDRIG TEXT — den mäter 3,75:1
   mot vitt. Ska ockra bära ord används #955413.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --blackk:#10181E;
  --petrol:#0E4C5B;
  --petrol-djup:#093642;
  --petrol-platta:#E7F0F2;
  --ockra:#C1701F;
  --ockra-text:#955413;
  --sand:#FBF1E4;
  --sand-ljus:#E9B876;
  --dis:#A9C6CD;
  --grund:#F5F3EF;
  --panel:#FFFFFF;
  --linje:#E1DDD6;
  --linje-stark:#CFC9BF;
  --text:#46504F;
  --svag:#5F6968;

  --rubrik:'Archivo','Archivo Expanded',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --brod:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --omslag:1180px;
  --ram:0;                       /* raka hörn: det är ett ritbord, inte en app */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--grund);color:var(--text);
  font:400 16px/1.65 var(--brod);
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                       /* ingen vågrät rullning, någonsin */
}
img,svg{max-width:100%}
a{color:var(--petrol)}

h1,h2,h3,h4{font-family:var(--rubrik);color:var(--blackk);margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.1}
h1{font-size:clamp(34px,5.2vw,58px);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(18px,2vw,21px);letter-spacing:-.015em}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.omslag{max-width:var(--omslag);margin:0 auto;padding:0 24px;width:100%}
.sektion{padding:88px 0}
.sektion--tat{padding:64px 0}
.sektion--platta{background:var(--panel);border-block:1px solid var(--linje)}
.sektion--djup{background:var(--petrol-djup);color:#fff}
.sektion--djup h2,.sektion--djup h3{color:#fff}

/* ─── Etiketten: mono, versal, spärrad. Metaspråket på hela sajten ─── */
.etikett{
  font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ockra-text);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.etikett::before{content:'';width:22px;height:2px;background:var(--ockra);flex:none}
.sektion--djup .etikett{color:var(--sand-ljus)}
.sektion--djup .etikett::before{background:var(--sand-ljus)}

.ingress{font-size:clamp(17px,1.7vw,19px);line-height:1.6;color:var(--text);max-width:62ch}
.sektion--djup .ingress{color:var(--dis)}
.sektionshuvud{max-width:72ch;margin-bottom:44px}

/* ─── Knappar ─── */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--ram);border:1.5px solid transparent;
  font:600 14.5px/1 var(--brod);letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.knapp:focus-visible{outline:3px solid var(--ockra);outline-offset:3px}
.knapp--primar{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.knapp--primar:hover{background:var(--petrol-djup);border-color:var(--petrol-djup);transform:translateY(-1px)}
.knapp--linje{background:transparent;color:var(--petrol);border-color:var(--linje-stark)}
.knapp--linje:hover{border-color:var(--petrol);background:var(--petrol-platta)}
.knapp--ljus{background:#fff;color:var(--petrol);border-color:#fff}
.knapp--ljus:hover{background:var(--petrol-platta);border-color:var(--petrol-platta);transform:translateY(-1px)}
.knapp--kant{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.knapp--kant:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.knapprad{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ═══ TOPPRADEN ═══ */
.topp{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--linje);
}
.topp__inre{display:flex;align-items:center;gap:26px;height:76px}
.logga{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.logga svg{display:block;height:34px;width:auto}
.logga__ord{display:flex;flex-direction:column;gap:2px}
.logga__namn{font:700 19px/1 var(--rubrik);letter-spacing:.03em;color:var(--blackk)}
.logga__under{font:500 9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--svag)}
.meny{display:flex;align-items:center;gap:4px;margin-left:auto}
.meny a{
  padding:9px 14px;text-decoration:none;color:var(--text);
  font:500 14.5px/1 var(--brod);border-radius:var(--ram);
  transition:color .15s ease,background-color .15s ease;
}
.meny a:hover{color:var(--petrol);background:var(--petrol-platta)}
.meny a[aria-current="page"]{color:var(--petrol);font-weight:600;box-shadow:inset 0 -2px 0 var(--ockra)}
.topp .knapp{padding:11px 20px;font-size:14px}
.menyknapp{
  display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--linje-stark);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0;
}
.menyknapp span{display:block;width:19px;height:1.5px;background:var(--blackk);position:relative}
.menyknapp span::before,.menyknapp span::after{content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--blackk)}
.menyknapp span::before{top:-6px}
.menyknapp span::after{top:6px}
.mobilmeny{display:none;border-top:1px solid var(--linje);background:var(--panel);padding:10px 0 20px}
.mobilmeny.pa{display:block}
.mobilmeny a{display:block;padding:14px 24px;text-decoration:none;color:var(--blackk);font-weight:500;border-bottom:1px solid var(--linje)}
.mobilmeny .knapp{margin:16px 24px 0;width:calc(100% - 48px)}

/* ═══ HJÄLTEN ═══ */
.hjalte{position:relative;overflow:hidden;background:var(--grund);padding:74px 0 84px}
.hjalte::before{                          /* ritnätet, mycket svagt */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linje) 1px,transparent 1px),linear-gradient(90deg,var(--linje) 1px,transparent 1px);
  background-size:64px 64px;opacity:.55;
  -webkit-mask-image:radial-gradient(115% 85% at 78% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(115% 85% at 78% 30%,#000 0%,transparent 72%);
}
.hjalte__inre{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center}
.hjalte h1{margin-bottom:22px;text-wrap:balance}
.hjalte .ingress{max-width:52ch}
.hjalte__rit{border:1px solid var(--linje-stark);background:var(--panel);padding:22px}
.hjalte__rit svg{display:block;width:100%;height:auto}

/* Faktaremsan under hjälten */
.fakta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linje);background:var(--panel)}
.fakta__ruta{padding:26px 24px;border-right:1px solid var(--linje)}
.fakta__ruta:last-child{border-right:0}
.fakta__ord{font:600 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--svag);margin-bottom:9px}
.fakta__varde{font:600 17px/1.35 var(--rubrik);color:var(--blackk);letter-spacing:-.015em}

/* ═══ KORT OCH RUTNÄT ═══ */
.rutnat{display:grid;gap:1px;background:var(--linje);border:1px solid var(--linje)}
.rutnat--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rutnat--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kort{background:var(--panel);padding:32px 30px;display:flex;flex-direction:column;gap:12px}
.kort__nr{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--ockra-text)}
.kort h3{margin-bottom:2px}
.kort p{font-size:15px;line-height:1.62;color:var(--text)}
.kort ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.kort li{
  font:500 12.5px/1 var(--mono);letter-spacing:.01em;color:var(--petrol);
  background:var(--petrol-platta);padding:6px 9px;
}

/* Uppdragsområden — listrader med linjer i stället för kort */
.omraden{border-top:1px solid var(--linje)}
.omrade{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--linje);
}
.omrade__nr{font:600 12px/1.7 var(--mono);letter-spacing:.1em;color:var(--ockra-text)}
.omrade h3{padding-top:1px}
.omrade p{font-size:15px;color:var(--text);margin:0}

/* Arbetssättet — trappan */
.steg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16)}
.steg__ruta{background:var(--petrol-djup);padding:30px 26px 32px}
.steg__nr{
  font:600 12px/1 var(--mono);letter-spacing:.12em;color:var(--sand-ljus);
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.22);
}
.steg h3{font-size:18px;margin-bottom:9px}
.steg p{font-size:14.5px;line-height:1.6;color:var(--dis);margin:0}

/* Myndighetsblocket */
.myndighet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.punktlista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linje);border:1px solid var(--linje)}
.punktlista li{background:var(--panel);padding:20px 22px;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;font-size:15px}
.punktlista li::before{
  content:'';width:16px;height:16px;margin-top:4px;flex:none;
  background:var(--ockra);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.6 L6.2 12.8 L14 4.2' fill='none' stroke='black' stroke-width='2.4'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.6 L6.2 12.8 L14 4.2' fill='none' stroke='black' stroke-width='2.4'/></svg>") center/contain no-repeat;
}
.punktlista strong{display:block;color:var(--blackk);font-weight:600;margin-bottom:3px}

/* ═══ JOBBEN ═══ */
.jobblista{display:grid;gap:1px;background:var(--linje);border:1px solid var(--linje)}
.jobb{
  background:var(--panel);padding:26px 28px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  text-decoration:none;color:inherit;
  transition:background-color .16s ease;
}
.jobb:hover{background:var(--petrol-platta)}
.jobb:focus-visible{outline:3px solid var(--ockra);outline-offset:-3px}
.jobb h3{margin-bottom:9px}
.jobb__meta{display:flex;flex-wrap:wrap;gap:8px 16px;font:500 13px/1.5 var(--mono);color:var(--svag)}
.jobb__meta span{display:inline-flex;align-items:center;gap:7px}
.jobb__meta span::before{content:'';width:5px;height:5px;background:var(--ockra);flex:none}
.jobb__ny{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ockra-text);background:var(--sand);padding:6px 9px;margin-left:2px}
.jobb__ingress{margin:12px 0 0;font-size:15px;color:var(--text);max-width:64ch}
.jobb__pil{
  flex:none;width:46px;height:46px;border:1.5px solid var(--linje-stark);
  display:grid;place-items:center;color:var(--petrol);
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.jobb:hover .jobb__pil{border-color:var(--petrol);background:var(--petrol);color:#fff}
.jobb__pil svg{display:block}

.tomt{background:var(--panel);border:1px solid var(--linje);padding:56px 40px;text-align:center}
.tomt h3{margin-bottom:10px}
.tomt p{color:var(--svag);max-width:56ch;margin:0 auto 8px}
.laddar{background:var(--panel);border:1px solid var(--linje);padding:44px;text-align:center;color:var(--svag);font:500 14px/1 var(--mono)}

/* ═══ KONTAKT ═══ */
/* Antalet rutor ändras med vilka uppgifter som är ifyllda — ett fast
   tvåspaltsnät lämnade ett tomt kvarter när de var tre. auto-fit
   fyller raden oavsett om de är två, tre eller fem. */
.kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(255,255,255,.16);margin-top:40px}
.kontakt__ruta{background:var(--petrol-djup);padding:30px 28px}
.kontakt__ord{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-ljus);margin-bottom:12px}
.kontakt__varde{font:500 17px/1.5 var(--brod);color:#fff}
.kontakt__varde a{color:#fff;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}
.kontakt__varde a:hover{box-shadow:inset 0 -2px 0 var(--sand-ljus)}

/* ═══ FOTEN ═══ */
.fot{background:var(--blackk);color:#B3BBBE;padding:60px 0 30px;font-size:14.5px}
.fot a{color:#B3BBBE;text-decoration:none}
.fot a:hover{color:#fff}
.fot__inre{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:44px}
.fot h4{color:#fff;font-size:12px;font-family:var(--mono);font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.fot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fot .logga__namn{color:#fff}
.fot .logga__under{color:#8C9598}
.fot__streck{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px;color:#8C9598}
.fot__drivs{display:inline-flex;align-items:center;gap:7px}

/* ═══ BREDDERNA ═══ */
@media (max-width:1080px){
  .meny,.topp .knapp{display:none}
  .menyknapp{display:flex}
}
@media (max-width:1024px){
  .sektion{padding:68px 0}
  .hjalte__inre{grid-template-columns:1fr;gap:40px}
  .hjalte{padding:56px 0 64px}
  .rutnat--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .myndighet{grid-template-columns:1fr;gap:36px}
  .fakta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fakta__ruta:nth-child(2){border-right:0}
  .fakta__ruta:nth-child(-n+2){border-bottom:1px solid var(--linje)}
  .fot__inre{grid-template-columns:1fr 1fr;gap:36px}
  .fot__inre>*:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .sektion{padding:56px 0}
  .sektion--tat{padding:44px 0}
  .omslag{padding:0 20px}
  .rutnat--3,.rutnat--2,.steg,.kontakt,.fakta{grid-template-columns:1fr}
  .fakta__ruta{border-right:0;border-bottom:1px solid var(--linje)}
  .fakta__ruta:last-child{border-bottom:0}
  .omrade{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .omrade__nr{line-height:1.2}
  .jobb{grid-template-columns:1fr;gap:16px}
  .jobb__pil{width:42px;height:42px}
  .kort{padding:26px 22px}
  .fot__inre{grid-template-columns:1fr}
  .knapprad .knapp{flex:1 1 100%}
}

/* ═══ ANNONSSIDAN ═══
   Ett steg under sidroten (/jobb/<titel>-<id>), i kundens egen dräkt.
   Ansökan sker fortfarande hos Agir — knappen leder dit. */
.annons{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.annons h1{font-size:clamp(28px,3.8vw,44px);margin-bottom:18px;text-wrap:balance}
.annons h1 .jobb__ny{vertical-align:middle;margin-left:6px}
.annons .ingress{margin-bottom:28px}
.annons__brod{font-size:16px;line-height:1.72;color:var(--text);max-width:68ch}
.annons__brod p{margin:0 0 18px}
.annons__brod p:last-child{margin-bottom:0}

/* Faktarutan följer med i sidled på stora skärmar — annonsen är lång,
   och ansökningsknappen ska aldrig hamna utom räckhåll. */
.annons__fakta{position:sticky;top:100px}
.annons__kort{background:var(--panel);border:1px solid var(--linje);padding:26px 24px}
.annons__rad{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--linje)}
.annons__rad:first-child{padding-top:0}
.annons__rad span{font:600 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--svag);flex:none}
.annons__rad strong{font-weight:500;color:var(--blackk);text-align:right;font-size:15px}
.annons__kort .knapp{width:100%;margin-top:22px}
.annons__not{margin-top:16px;font-size:13px;line-height:1.6;color:var(--svag)}

@media (max-width:1024px){
  .annons{grid-template-columns:1fr;gap:36px}
  .annons__fakta{position:static}
}

/* Avsändarraden längst ner: stapelmärket och namnet ihop, som på Agirs
   egen karriärsida. Diskret — den ska märka vem som byggt sidan, inte
   konkurrera med kundens eget varumärke. */
.fot__drivs a{display:inline-flex;align-items:center;gap:6px}
.fot__drivs svg{flex:none}