/* ==========================================================================
   SVERIGES BYGGKONSULTER — "BYGGNORM"
   Designsystem v1. Teknisk-redaktionell riktning: nära-svart grafitbas,
   varmvitt papper, signalgul bygghjälm-accent och elektriskt ritningsblått.
   Monospace används som "teknisk notation" (mått, löpnummer, etiketter),
   Archivo i extra bred/tung skärning för rubriker, Inter Tight för brödtext.
   Genomgående motiv: ritningsrutnät, måttstreck, löpnumrering.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
/* "ANVISNINGEN" — arbetsplatsens egen märkning som designsystem.
   Asfaltsgrå grund, varselgul signal, reflexband som material,
   varningsdiagonal som avgränsare, betongljus inversyta.
   De gamla tokennamnen finns kvar och pekar på de nya värdena, så att
   sidor och sektioner som inte byggts om ändå följer med in i den nya
   världen. --amber är numera varselgul, inte guld. */
:root{
  /* ytor — asfalt */
  --ink:#15181A;
  --ink-2:#1C2023;
  --ink-3:#262B2F;
  --ink-4:#333A3F;

  /* betong — inversyta */
  --paper:#E9E7E1;
  --paper-2:#DCD9D1;
  --paper-3:#C7C3B9;

  /* signal */
  --hv:#D6F500;               /* varselgul */
  --hv-dim:#A9C200;
  --amber:var(--hv);          /* gammalt namn, nytt värde */
  --amber-deep:var(--hv-dim);
  --reflex:#C8D0D4;           /* reflexband */
  --reflex-hi:#F4F8F9;
  --blue:#4257CF;             /* ritningsblå — konsultvägen */
  --blue-lo:#2C3BA2;
  --blue-soft:#8E9BEC;
  --rust:#FF5A1F;             /* utsättningsorange — endast obligatoriskt/larm */
  --mark:var(--rust);

  /* semantiska — webbplatsen har ETT tema: mörkt.
     Kontrastvärdena är kontrollerade mot WCAG AA. */
  --bg:var(--ink);
  --bg-2:var(--ink-2);
  --surface:var(--ink-2);
  --surface-2:var(--ink-3);
  --fg:#EFF1F1;               /* 15:1 mot --bg */
  --fg-2:#A7AFB3;             /* 7,6:1 mot --bg */
  --fg-3:#848D92;             /* 5,0:1 mot --bg */
  --line:rgba(200,208,212,.18);
  --line-2:rgba(200,208,212,.09);
  --accent:var(--hv);
  --accent-fg:#0B0D0E;
  --fel:#FF8E6B;

  /* typografi — skyltbokstäver, grotesk brödtext, mono som notation */
  --display:'Big Shoulders Display','Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'Chivo','Inter Tight',ui-sans-serif,system-ui,sans-serif;
  --mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rytm — inga rundade hörn någonstans: allt är plåt och skylt */
  --gut:clamp(18px,4vw,44px);
  --max:1320px;
  --max-text:68ch;
  --r:0px;
  --r-lg:0px;
  --sec:clamp(72px,9vw,132px);

  color-scheme:dark;
}

/* ---------- 2. RESET ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:94px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.55;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:-.03em;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
::selection{background:var(--amber);color:#2A1C00;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---------- 3. LAYOUTPRIMITIV ------------------------------------------- */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);}
.shell--narrow{max-width:900px;}
.sec{padding-block:var(--sec);position:relative;}
.sec--tight{padding-block:clamp(44px,7vw,84px);}
.sec--ink{background:var(--ink);color:var(--paper);--bg:var(--ink);--bg-2:var(--ink-3);--fg:var(--paper);--fg-2:#A7ADB6;--fg-3:#767D87;--line:rgba(245,243,238,.16);--line-2:rgba(245,243,238,.07);--surface:var(--ink-2);--accent:var(--amber);--accent-fg:#2A1C00;}
.sec--alt{background:var(--bg-2);}
.hr{height:1px;background:var(--line);border:0;margin:0;}

/* Ritningsrutnät som bakgrundslager */
.grid-bg{position:relative;isolation:isolate;}
.grid-bg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-2) 1px,transparent 1px);
  background-size:clamp(44px,6vw,88px) clamp(44px,6vw,88px);
  mask-image:radial-gradient(130% 100% at 50% 0%,#000 35%,transparent 85%);
}

/* Måttstreck-remsa (dekorativ "linjal") */
.ruler{height:22px;display:flex;align-items:stretch;gap:0;overflow:hidden;border-block:1px solid var(--line);opacity:.7;}
.ruler i{flex:1 0 11px;border-right:1px solid var(--line);}
.ruler i:nth-child(5n){border-right-color:var(--fg-3);}

/* ---------- 4. TYPOGRAFISKA KLASSER ------------------------------------- */
.kicker{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  display:inline-flex;align-items:center;gap:9px;
}
.kicker::before{content:'';width:22px;height:1px;background:currentColor;flex:none;}
.kicker--bare::before{display:none;}
.h-mega{font-size:clamp(42px,9vw,132px);font-weight:900;letter-spacing:-.045em;line-height:.9;}
.h-xl{font-size:clamp(32px,6.2vw,76px);letter-spacing:-.04em;}
.h-lg{font-size:clamp(26px,4vw,46px);letter-spacing:-.032em;}
.h-md{font-size:clamp(20px,2.3vw,27px);letter-spacing:-.025em;}
.h-sm{font-size:clamp(17px,1.5vw,19.5px);letter-spacing:-.018em;font-weight:700;}
.lede{font-size:clamp(17px,1.9vw,21.5px);line-height:1.5;color:var(--fg-2);max-width:48ch;letter-spacing:-.012em;}
.body-txt{color:var(--fg-2);max-width:var(--max-text);}
.body-txt + .body-txt{margin-top:1em;}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--fg-3);}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.hl{color:var(--accent);}
/* understruket nyckelord med ritningspenna-känsla */
.pen{position:relative;white-space:nowrap;}
.pen::after{content:'';position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.3em;background:var(--amber);z-index:-1;border-radius:2px;}
.sec--ink .pen::after{opacity:.9;}

/* sektionshuvud */
.sec-head{display:grid;gap:16px;margin-bottom:clamp(30px,5vw,58px);}
.sec-head--split{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:end;gap:clamp(20px,4vw,56px);}
@media (max-width:860px){.sec-head--split{grid-template-columns:1fr;align-items:start;}}

/* ---------- 5. KNAPPAR -------------------------------------------------- */
.btn{
  --bh:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:650;font-size:14.5px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;
  background:transparent;color:var(--fg);white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn svg{width:15px;height:15px;flex:none;transition:transform .22s cubic-bezier(.2,.8,.2,1);}
.btn:hover svg{transform:translateX(3px);}
.btn--amber{background:var(--amber);color:#2A1C00;box-shadow:0 1px 0 rgba(0,0,0,.08);}
.btn--amber:hover{box-shadow:0 10px 26px -8px rgba(255,194,71,.65);}
.btn--solid{background:var(--fg);color:var(--bg);}
.btn--solid:hover{box-shadow:0 10px 26px -10px rgba(0,0,0,.45);}
.btn--ghost{border-color:var(--line);color:var(--fg);}
.btn--ghost:hover{border-color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent);}
.btn--sm{padding:11px 18px;font-size:13px;}
.btn--lg{padding:18px 32px;font-size:16px;}
.btn--block{width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

/* textlänk med pil */
.lnk{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;border-bottom:1.5px solid var(--line);padding-bottom:2px;transition:border-color .18s,gap .18s;}
.lnk:hover{border-color:var(--accent);gap:11px;}
.lnk svg{width:14px;height:14px;flex:none;}

/* ---------- 6. NAVIGATION ----------------------------------------------- */
/* Sidhuvudet är alltid mörkt och går omärkligt ihop med hero och sidhuvuden
   på undersidorna. Först när man rullat förbi dem läggs en diskret kant till
   så att det skiljer sig från ljust innehåll. */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.nav[data-scrolled="true"]{border-bottom-color:rgba(245,243,238,.12);box-shadow:0 10px 30px -22px rgba(0,0,0,.9);}
.nav .brand__txt{color:var(--paper);}
.nav__links a{color:#A7ADB6;}
.nav__links a:hover{color:var(--paper);}
.nav .nav .nav .nav__burger{border-color:rgba(245,243,238,.22);color:var(--paper);}
.nav .btn--ghost{border-color:rgba(245,243,238,.26);color:var(--paper);}
.nav .btn--ghost:hover{border-color:var(--paper);background:rgba(245,243,238,.08);}
.nav__in{max-width:var(--max);margin-inline:auto;padding:14px var(--gut);display:flex;align-items:center;gap:clamp(14px,3vw,40px);}
.brand{display:flex;align-items:center;gap:11px;flex:none;}
/* Varumärket ritas från ett enda snippet — samma låsning överallt. */
.brand__lockup{display:flex;align-items:center;gap:11px;}
.brand__mark{width:30px;height:30px;flex:none;}
.brand__txt{font-family:var(--display);font-weight:800;font-size:13.5px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;}
.brand__txt small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase;margin-top:3px;}
.nav__links{display:flex;gap:clamp(14px,2vw,28px);margin-inline:auto;}
.nav__links a{font-size:14px;font-weight:550;color:var(--fg-2);position:relative;padding-block:4px;}
.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right .25s cubic-bezier(.2,.8,.2,1);}
.nav__links a:hover{color:var(--fg);}
.nav__links a:hover::after{right:0;}
.nav__act{display:flex;align-items:center;gap:9px;flex:none;}
.nav__burger{display:none;width:44px;height:44px;border-radius:var(--r);border:1.5px solid var(--line);background:transparent;cursor:pointer;place-items:center;color:var(--fg);}
@media (max-width:860px){
  .nav__links{display:none;}
  .nav__burger{display:grid;}
  .nav__act{margin-left:auto;}
}
/* mobilmeny */
.msheet{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:var(--gut);transform:translateY(-100%);transition:transform .42s cubic-bezier(.76,0,.24,1);}
.msheet[data-open="true"]{transform:translateY(0);}
.msheet__top{display:flex;justify-content:space-between;align-items:center;}
.msheet__top .brand__txt{color:var(--paper);}
.msheet__close{width:40px;height:40px;border-radius:999px;border:1.5px solid rgba(245,243,238,.25);background:transparent;color:var(--paper);display:grid;place-items:center;cursor:pointer;}
.msheet nav{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:6px;}
.msheet nav a{font-family:var(--display);font-weight:800;font-size:clamp(30px,9vw,52px);letter-spacing:-.04em;line-height:1.05;color:var(--paper);}
.msheet nav a span{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.1em;vertical-align:super;margin-right:10px;font-weight:400;}
.msheet__act{display:grid;gap:10px;}

/* ---------- 7. HERO ----------------------------------------------------- */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;padding-block:clamp(48px,7vw,88px) clamp(48px,7vw,88px);}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(245,243,238,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(245,243,238,.055) 1px,transparent 1px);
  background-size:clamp(52px,7vw,104px) clamp(52px,7vw,104px);
  mask-image:radial-gradient(120% 90% at 18% 10%,#000 10%,transparent 72%);
}
/* mjuk ljuskägla */
.hero::after{
  content:'';position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;pointer-events:none;
  background:radial-gradient(circle,rgba(255,194,71,.16),transparent 62%);filter:blur(10px);
}
.hero__in{position:relative;z-index:2;}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,64px);align-items:center;}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;align-items:start;}}
/* Rubriken skalar efter sin egen spalt, inte efter hela fönstret — annars
   spiller den över fotot i 7/5-delningen. */
.hero__title{color:var(--paper);margin-top:0;font-size:clamp(38px,5.4vw,82px);}
@media (max-width:900px){.hero__title{font-size:clamp(36px,9vw,64px);}}
/* Gult bär nu understrykningen i rubriken i stället för hela ordet — då
   konkurrerar den inte med den gula primärknappen om blicken. */
.hero__title em{
  font-style:normal;color:inherit;
  position:relative;display:inline-block;
  background-image:linear-gradient(var(--amber),var(--amber));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:100% .12em;
  padding-bottom:.06em;
}
.hero__lede{color:#B3B9C2;margin-top:24px;max-width:46ch;}
.hero__cta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;}
/* Sekundär handling är en textlänk — en knapp till skulle konkurrera med den
   gula primärknappen om blicken. */
.hero__lnk{color:var(--paper);border-bottom-color:rgba(245,243,238,.3);font-size:15.5px;padding-bottom:3px;}
.hero__lnk:hover{border-bottom-color:var(--amber);}
.hero__side{display:grid;gap:14px;padding-bottom:6px;}
/* fakta-kort i hero */
.fact{border:1px solid rgba(245,243,238,.16);border-radius:var(--r-lg);padding:18px 20px;background:rgba(245,243,238,.035);backdrop-filter:blur(6px);display:grid;gap:4px;}
.fact__v{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.035em;color:var(--paper);line-height:1;}
.fact__v span{color:var(--amber);}
.fact__l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A9099;}
/* hero-botten: rullande rollista */
.hero__foot{position:relative;z-index:2;margin-top:clamp(44px,7vw,84px);border-top:1px solid rgba(245,243,238,.14);}

/* marquee */
.mq{overflow:hidden;display:flex;gap:0;padding-block:16px;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}
.mq__track{display:flex;gap:0;flex:none;animation:mq 46s linear infinite;will-change:transform;}
.mq:hover .mq__track{animation-play-state:paused;}
.mq__track span{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A9099;padding-inline:20px;display:inline-flex;align-items:center;gap:20px;white-space:nowrap;}
.mq__track span::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--amber);flex:none;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 8. BILDBAND (duoton) --------------------------------------- */
.band{position:relative;overflow:hidden;background:var(--ink);}
.band__img{width:100%;height:clamp(240px,42vw,560px);object-fit:cover;object-position:center 36%;filter:grayscale(1) contrast(1.12) brightness(.72);mix-blend-mode:luminosity;}
.band::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,rgba(43,75,255,.4),rgba(11,12,14,.25) 42%,rgba(255,194,71,.3));mix-blend-mode:color;pointer-events:none;}
.band__cap{position:absolute;left:var(--gut);bottom:22px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,238,.78);display:flex;align-items:center;gap:10px;}
.band__cap::before{content:'';width:28px;height:1px;background:var(--amber);}

/* ---------- 9. UPPDRAGSTAVLA ------------------------------------------- */
.board{border-top:1px solid var(--line);}
.board__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;align-items:center;}
.fchip{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--fg-2);cursor:pointer;transition:all .16s;}
.fchip:hover{border-color:var(--fg);color:var(--fg);}
.fchip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg);}
.board__count{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);}

.job{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:clamp(14px,3vw,30px);align-items:center;
  padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line);position:relative;
  text-align:left;width:100%;background:transparent;border-inline:0;border-top:0;cursor:pointer;
  transition:background .2s,padding-inline .25s cubic-bezier(.2,.8,.2,1);}
.job:first-child{border-top:1px solid var(--line);}
.job:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);padding-inline:clamp(8px,1.4vw,18px);}
.job__no{font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:.04em;align-self:start;padding-top:5px;}
.job__main{min-width:0;}
.job__t{display:block;font-family:var(--display);font-weight:750;font-size:clamp(19px,2.5vw,29px);letter-spacing:-.028em;line-height:1.08;transition:color .18s;}
.job:hover .job__t{color:var(--accent);}
.job__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);}
.job__meta b{color:var(--fg-2);font-weight:500;}
.job__go{width:46px;height:46px;border-radius:999px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;color:var(--fg-2);transition:all .22s cubic-bezier(.2,.8,.2,1);}
.job:hover .job__go{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);transform:rotate(-45deg);}
.job__go svg{width:16px;height:16px;}
.job__flag{display:flex;width:fit-content;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:9px;}
.sec--ink .job__flag{color:var(--amber);}
.job__flag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (max-width:620px){
  .job{grid-template-columns:36px minmax(0,1fr);}
  .job__go{display:none;}
}
.board__empty{padding:48px 0;text-align:center;color:var(--fg-3);font-family:var(--mono);font-size:13px;}
.board__foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}

/* ---------- 10. PROCESS (numrerad) ------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
@media (max-width:880px){.steps{grid-template-columns:1fr;}}
.step{background:var(--bg);padding:clamp(24px,3.4vw,38px);display:grid;gap:12px;align-content:start;position:relative;transition:background .25s;}
.step:hover{background:var(--surface);}
.step__no{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--fg-3);}
.step__no b{color:var(--accent);font-weight:500;}
.step h3{font-size:clamp(19px,2.1vw,24px);}
.step p{color:var(--fg-2);font-size:15.5px;}
.step__bar{position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .45s cubic-bezier(.2,.8,.2,1);}
.step:hover .step__bar{width:100%;}

/* ---------- 11. TVÅ VÄGAR ---------------------------------------------- */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);}
@media (max-width:820px){.paths{grid-template-columns:1fr;}}
.path{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;gap:16px;background:var(--surface);position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;}
.path:hover{transform:translateY(-4px);box-shadow:0 22px 50px -24px rgba(11,12,14,.3);}
.path::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--c,var(--blue));}
.path--consultant{--c:var(--amber);}
.path__tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--blue));}
.path h3{font-size:clamp(23px,2.9vw,34px);}
.path p{color:var(--fg-2);font-size:16px;}
.path ul{display:grid;gap:11px;margin-top:2px;}
.path li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:15.5px;color:var(--fg-2);}
.path li svg{width:14px;height:14px;margin-top:5px;color:var(--c,var(--blue));flex:none;}
.path .btn{margin-top:auto;align-self:flex-start;}
.path__quote{font-family:var(--display);font-weight:750;font-size:clamp(17px,1.8vw,20px);letter-spacing:-.022em;color:var(--fg);line-height:1.25;border-left:3px solid var(--c,var(--amber));padding-left:16px;}

/* ---------- 12. VARFÖR OSS (rutnät) ------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.card{background:var(--bg);padding:clamp(22px,2.8vw,32px);display:grid;gap:11px;align-content:start;transition:background .25s;}
.card:hover{background:var(--surface);}
.card__ic{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);}
.sec--ink .card__ic{background:rgba(255,194,71,.14);color:var(--amber);}
.card__ic svg{width:19px;height:19px;}
.card h3{font-size:17.5px;letter-spacing:-.02em;}
.card p{font-size:15px;color:var(--fg-2);}

/* ---------- 13. KUNDLOGOTYPER ------------------------------------------ */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.logos__cell{background:var(--bg);display:grid;place-items:center;padding:26px 20px;min-height:104px;transition:background .25s;}
.logos__cell:hover{background:var(--surface);}
.logos__cell img{max-height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s,transform .25s;}
.logos__cell:hover img{filter:none;opacity:1;transform:scale(1.04);}
.sec--ink .logos__cell img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.55;}
.sec--ink .logos__cell:hover img{filter:grayscale(1) invert(1) brightness(1.9);opacity:.95;}

/* ---------- 14. CITAT / VISION ----------------------------------------- */
.vision{text-align:center;position:relative;overflow:hidden;}
.vision .kicker{display:block;margin-bottom:26px;}
.vision blockquote{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,5.4vw,66px);letter-spacing:-.04em;line-height:1.02;max-width:22ch;margin-inline:auto;}
.vision blockquote em{font-style:normal;color:var(--amber);}
.vision cite{display:block;margin-top:28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);font-style:normal;}
.vision__mark{font-family:var(--display);font-size:clamp(120px,24vw,320px);font-weight:900;line-height:.6;color:rgba(245,243,238,.045);position:absolute;top:8%;left:50%;transform:translateX(-50%);pointer-events:none;user-select:none;z-index:0;}
.vision blockquote,.vision cite,.vision .kicker{position:relative;z-index:1;}

/* ---------- 15. STATISTIK --------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line);}
.stat{background:var(--bg);padding:clamp(22px,3vw,34px) clamp(18px,2vw,26px);display:grid;gap:7px;}
.stat__v{font-family:var(--display);font-weight:850;font-size:clamp(30px,4.4vw,54px);letter-spacing:-.045em;line-height:1;}
.stat__v small{font-size:.45em;font-weight:700;letter-spacing:-.01em;color:var(--fg-3);margin-left:.15em;}
.stat__l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}

/* ---------- 16. FORMULÄR ---------------------------------------------- */
.tabs{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);margin-bottom:clamp(22px,3vw,34px);max-width:100%;overflow:auto;}
.tab{padding:11px 22px;border-radius:999px;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--fg-2);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;}
.tab[aria-selected="true"]{background:var(--fg);color:var(--bg);}
.panel[hidden]{display:none;}

.form{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:clamp(22px,3.6vw,46px);}
.form__hd{display:grid;gap:9px;margin-bottom:clamp(20px,3vw,30px);}
.form__hd h3{font-size:clamp(21px,2.5vw,30px);}
.form__hd p{color:var(--fg-2);font-size:15.5px;max-width:52ch;}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;}
@media (max-width:660px){.fgrid{grid-template-columns:1fr;}}
.f{display:grid;gap:7px;min-width:0;}
.f--full{grid-column:1/-1;}
/* Etiketter i vanlig brödtext: lättare att läsa än spärrad versal mono,
   och ljusare för att klara AA mot fältens bakgrund. */
.f > label{font-family:var(--body);font-size:14px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--fg-2);}
.f > label .req{color:var(--fel);}
.f input,.f select,.f textarea{
  font-family:var(--body);font-size:16px;padding:13px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg);color:var(--fg);width:100%;
  transition:border-color .16s,box-shadow .16s;
}
.f input::placeholder,.f textarea::placeholder{color:#8E959F;opacity:1;}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.f textarea{min-height:120px;resize:vertical;}
.f input[type=file]{padding:10px;font-family:var(--mono);font-size:12.5px;}
.f__hint{font-size:12.5px;color:var(--fg-3);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:9px 15px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:var(--fg-2);font-size:13.5px;font-weight:550;cursor:pointer;transition:all .14s;}
.chip:hover{border-color:var(--fg-2);}
.chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#2A1C00;}
.err{font-size:12.5px;color:var(--fel);}
.err[hidden]{display:none;}
.range{display:flex;align-items:center;gap:14px;}
.range input[type=range]{flex:1;accent-color:var(--accent);height:4px;}
.range output{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;min-width:12ch;text-align:right;color:var(--accent);white-space:nowrap;}
@media (max-width:520px){.range{flex-wrap:wrap;}.range output{min-width:0;width:100%;text-align:left;}}
.radios{display:flex;flex-wrap:wrap;gap:16px;}
.radios label{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;cursor:pointer;}
.radios input{accent-color:var(--accent);}
.form__foot{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}
.form__foot .fine{font-size:12.5px;color:var(--fg-3);max-width:40ch;}
.ok{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:18px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--amber) 18%,transparent);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);margin-top:20px;}
.ok[hidden]{display:none;}
.ok svg{width:20px;height:20px;color:var(--amber-deep);margin-top:2px;}
.ok svg{color:var(--amber);}
.ok .t{font-weight:700;font-size:15px;}
.ok .d{font-size:14px;color:var(--fg-2);margin-top:3px;}
.formbox{display:grid;gap:8px;border:1px dashed var(--line);border-radius:var(--r);padding:15px;background:var(--bg-2);grid-column:1/-1;}
.formbox[hidden]{display:none;}

/* ---------- 17. UPPDRAGSDETALJ (vy) ----------------------------------- */
body.view-job > main > *:not(#uppdrag-detalj){display:none;}
#uppdrag-detalj{display:none;}
body.view-job #uppdrag-detalj{display:block;}
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);background:0;border:0;padding:0;cursor:pointer;margin-bottom:28px;transition:color .16s,gap .16s;}
.back:hover{color:var(--fg);gap:12px;}
.jd__hd{display:grid;gap:14px;padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--line);}
.jd__hd h1{font-size:clamp(28px,5vw,58px);}
.jd__meta{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);}
.jd__meta b{display:block;color:var(--fg);font-weight:500;font-size:14px;letter-spacing:-.01em;text-transform:none;margin-top:3px;font-family:var(--body);}
.jd__body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:start;padding-top:clamp(28px,4vw,48px);}
@media (max-width:900px){.jd__body{grid-template-columns:1fr;}}
.jd__col h2{font-size:clamp(19px,2.1vw,24px);margin-bottom:12px;}
.jd__col h2:not(:first-child){margin-top:34px;}
.jd__col p{color:var(--fg-2);}
.jd__terms{display:grid;gap:10px;}
.jd__terms li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;color:var(--fg-2);font-size:15.5px;}
.jd__terms li svg{width:14px;height:14px;margin-top:5px;color:var(--accent);flex:none;}
.note{margin-top:30px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);padding:18px 20px;background:var(--bg-2);}
.note .t{font-weight:700;font-size:14.5px;margin-bottom:6px;}
.note .d{font-size:14px;color:var(--fg-2);}
.jd__aside{position:sticky;top:96px;}
@media (max-width:900px){.jd__aside{position:static;}}

/* ---------- 18. FOOTER ------------------------------------------------- */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(48px,7vw,88px) 28px;position:relative;overflow:hidden;}
/* Ordet ritas som SVG med fast textLength — då fyller det alltid exakt
   hela bredden, oavsett skärmstorlek, utan att klippas. */
.foot__big{margin-bottom:clamp(24px,4vw,44px);user-select:none;pointer-events:none;color:rgba(245,243,238,.07);}
.foot__big svg{display:block;width:100%;height:auto;overflow:visible;}
.foot__big text{font-family:var(--display);font-weight:900;font-size:108px;letter-spacing:-.04em;fill:currentColor;}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr;}}
.foot .brand__txt{color:var(--paper);}
.foot .brand__lockup,.msheet .brand__lockup{color:var(--paper);}
.foot__col{display:grid;gap:9px;align-content:start;font-size:14.5px;color:#9BA2AC;}
.foot__col .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6C737D;margin-bottom:4px;}
.foot__col a:hover{color:var(--paper);}
.foot__col address{font-style:normal;display:grid;gap:4px;}
.foot__social{display:flex;gap:9px;margin-top:18px;}
.foot__social a{width:36px;height:36px;border-radius:999px;border:1px solid rgba(245,243,238,.2);display:grid;place-items:center;color:var(--paper);transition:background .18s,border-color .18s;}
.foot__social a:hover{background:var(--amber);border-color:var(--amber);color:#2A1C00;}
.foot__social svg{width:15px;height:15px;}
.foot__bar{margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid rgba(245,243,238,.14);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#6C737D;}

/* ---------- 19. SCROLLAVSLÖJNING -------------------------------------- */
/* Innehållet är synligt som utgångsläge. Först när skriptet har tagit över
   (klassen js-reveal på <html>) får något döljas, och då bara tills det
   rullats in. Utan JavaScript, eller om skriptet fallerar, syns allt. */
[data-reveal]{opacity:1;transform:none;}
.js-reveal [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);}
.js-reveal [data-reveal].is-in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.js-reveal [data-reveal]{opacity:1;transform:none;}}

/* ---------- 20. DIVERSE ----------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#2A1C00;padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:650;}
.skip:focus{left:0;}
.stack{display:grid;gap:clamp(14px,2vw,22px);}

/* ---------- 21. FORMULÄRETS INTROPUNKTER -------------------------------- */
/* Säljargumenten som tidigare låg i "Två vägar in" bor nu i formulärhuvudet. */
.form__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,3vw,40px);align-items:start;margin-bottom:clamp(22px,3vw,32px);padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--line);}
@media (max-width:760px){.form__intro{grid-template-columns:1fr;gap:20px;}}
.form__intro h3{font-size:clamp(21px,2.5vw,30px);}
.form__intro > div > p{color:var(--fg-2);font-size:15.5px;margin-top:10px;max-width:46ch;}
.form__intro .path__quote{margin-top:16px;--c:var(--blue);}
.form__punkter{display:grid;gap:11px;}
.form__punkter li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:15px;color:var(--fg-2);}
.form__punkter li svg{width:14px;height:14px;margin-top:4px;color:var(--accent);flex:none;}
/* utan punktlista faller introt tillbaka till en kolumn */
.form__intro:not(:has(.form__punkter)){grid-template-columns:1fr;}

/* ---------- 22. "GÅ MED I NÄTVERKET"-RUTA (uppdragssidan) --------------- */
.join{margin-top:clamp(36px,6vw,72px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:clamp(24px,4vw,46px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,52px);align-items:center;}
@media (max-width:820px){.join{grid-template-columns:1fr;gap:24px;}}
.join::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--amber);}
.join__tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
.join h2{font-size:clamp(23px,3.2vw,38px);margin-top:12px;}
.join > div > p{color:var(--fg-2);font-size:16px;margin-top:14px;max-width:44ch;}
.join .btn{margin-top:24px;}
.join__punkter{display:grid;gap:12px;}
.join__punkter li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:15.5px;color:var(--fg-2);}
.join__punkter li svg{width:14px;height:14px;margin-top:4px;color:var(--amber);flex:none;}

/* ---------- 23. SIDHUVUD FÖR UNDERSIDOR -------------------------------- */
.pagehead{background:var(--ink);color:var(--paper);padding-block:clamp(52px,8vw,104px) clamp(36px,5vw,64px);position:relative;overflow:hidden;}
.pagehead::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(to right,rgba(245,243,238,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(245,243,238,.055) 1px,transparent 1px);
  background-size:clamp(52px,7vw,104px) clamp(52px,7vw,104px);
  mask-image:radial-gradient(120% 90% at 20% 10%,#000 10%,transparent 72%);}
.pagehead::after{content:'';position:absolute;top:-40%;right:-8%;width:52vw;height:52vw;pointer-events:none;
  background:radial-gradient(circle,rgba(255,194,71,.14),transparent 62%);}
.pagehead .shell{position:relative;z-index:2;}
.pagehead .kicker{color:var(--amber);}
.pagehead h1{color:var(--paper);margin-top:18px;}
.pagehead p{color:#B3B9C2;margin-top:18px;}

/* ---------- 24. BILDLEK I HERO ------------------------------------------
   En uppslagen kortlek med konsultporträtt. Dra musen i sidled över leken
   så bläddras korten fram. Fungerar även med tangentbord och på pekskärm.
   ----------------------------------------------------------------------- */
.deck{
  position:relative;
  width:min(100%,480px);
  aspect-ratio:4/3.3;
  margin-inline:auto;
  touch-action:pan-y;
  cursor:pointer;
}
@media (max-width:1000px){.deck{margin-top:clamp(28px,6vw,48px);}}
.deck:focus-visible{outline:2px solid var(--amber);outline-offset:14px;border-radius:var(--r-lg);}

.deck__card{
  position:absolute;
  top:50%;left:50%;
  width:clamp(150px,44%,210px);
  aspect-ratio:9/13;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(245,243,238,.14);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75);
  transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) rotate(var(--rot,0deg)) scale(var(--s,1));
  z-index:var(--z,1);
  opacity:var(--o,1);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease,box-shadow .4s ease;
  will-change:transform;
}
.deck__card[data-front="true"]{box-shadow:0 30px 70px -22px rgba(0,0,0,.85);}
.deck__card img{width:100%;height:100%;object-fit:cover;display:block;}
/* tunt varmt skimmer så porträtten hör ihop med resten av sidan */
.deck__card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(170deg,transparent 45%,rgba(11,12,14,.55));
}
.deck__card figcaption{
  position:absolute;left:12px;right:12px;bottom:11px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(245,243,238,.9);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
}
.deck__card[data-front="true"] figcaption{opacity:1;transform:none;}
/* saknas bildfilen göms kortet hellre än att visa en trasig ruta */
.deck__card[hidden]{display:none;}

/* liten ledtråd om att leken går att bläddra i */
.deck__hint{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,243,238,.4);
  transition:opacity .3s ease;
}
.deck[data-rord="true"] .deck__hint{opacity:0;}
.deck__hint svg{width:26px;height:8px;}

@media (prefers-reduced-motion:reduce){
  .deck__card{transition:none;}
}


/* ---------- 25. HERO-FOTO ------------------------------------------------ */
.hero__foto{border-radius:var(--r);overflow:hidden;background:var(--ink-2);}
.hero__foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;}
@media (max-width:900px){
  /* på mobil hamnar bilden under knapparna och blir liggande */
  .hero__foto{margin-top:clamp(26px,6vw,36px);}
  .hero__foto img{aspect-ratio:16/10;}
}

/* ---------- 26. REFERENSREMSA -------------------------------------------- */
/* Loggorna normaliseras: samma höjd, monokrom behandling, ingen egen platta
   per logotyp. Multiply mot den mörka botten släcker de gråa bakgrunder som
   ligger inbakade i några av PNG-filerna. */
.ref{padding-block:clamp(30px,5vw,52px);border-bottom:1px solid var(--line-2);}
.ref__rubrik{font-size:14px;color:var(--fg-2);margin-bottom:clamp(16px,2.5vw,24px);}
.ref__rad{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(12px,2.4vw,30px);align-items:center;}
.ref__rad img{
  width:100%;height:40px;object-fit:contain;
  /* Bakgrunderna är borttagna ur själva filerna. Här görs logotyperna bara
     monokroma och ljusa, så att de får samma vikt mot den mörka botten. */
  filter:grayscale(1) invert(1) contrast(1.15);
  opacity:.78;transition:opacity .2s ease;
}
.ref__rad img:hover{opacity:1;}
.ref__rad a:hover img,.ref__rad img:hover{opacity:1;}
@media (max-width:760px){
  .ref__rad{grid-template-columns:repeat(2,1fr);gap:20px 24px;}
  .ref__rad img{height:34px;}
}

/* ---------- 27. ROLLER ---------------------------------------------------- */
.roller__intro{color:var(--fg-2);font-size:16.5px;max-width:52ch;margin-top:12px;}
.roller__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(26px,4vw,40px);}
@media (max-width:860px){.roller__grid{grid-template-columns:1fr;}}
.roller__kort{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,28px);}
.roller__kort h3{font-size:17px;letter-spacing:-.018em;margin-bottom:14px;}
.roller__lista{display:flex;flex-direction:column;gap:9px;}
.roller__lista li{font-size:15.5px;color:var(--fg-2);}
@media (max-width:860px){
  /* på mobil blir rollerna chips som radbryts */
  .roller__lista{flex-direction:row;flex-wrap:wrap;gap:8px;}
  .roller__lista li{
    border:1px solid var(--line);border-radius:var(--r);
    padding:9px 13px;font-size:14px;color:var(--fg-2);
  }
}

/* ---------- 28. KONSULTBLOCK --------------------------------------------- */
.konsultblock{background:var(--amber);color:#2A1C00;border-radius:var(--r);
  padding:clamp(24px,3.4vw,34px) clamp(22px,3vw,34px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,32px);flex-wrap:wrap;}
.konsultblock h2{font-size:clamp(22px,2.8vw,30px);color:#2A1C00;}
.konsultblock p{font-size:16px;margin-top:6px;color:#4A3200;max-width:46ch;}
.konsultblock .btn{background:var(--ink);color:var(--paper);min-height:48px;flex:none;}
.konsultblock .btn:hover{background:#000;}

/* ---------- 29. FILUPPLADDNING -------------------------------------------- */
.filfalt{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1.5px dashed var(--line);border-radius:var(--r);
  padding:14px 16px;background:var(--bg);
  transition:border-color .18s ease,background .18s ease;
}
.filfalt:hover,.filfalt:focus-within{border-color:var(--accent);}
.filfalt svg{width:20px;height:20px;color:var(--fg-3);flex:none;}
.filfalt input[type=file]{flex:1;min-width:0;padding:0;border:0;background:transparent;font-family:var(--mono);font-size:12.5px;color:var(--fg-2);}
.filfalt input[type=file]::file-selector-button{
  font-family:var(--body);font-size:13.5px;font-weight:600;
  padding:9px 14px;margin-right:12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--fg);cursor:pointer;
}
.filfalt input[type=file]::file-selector-button:hover{border-color:var(--fg-2);}

/* ---------- 30. TRYCKYTOR PÅ MOBIL ---------------------------------------- */
@media (max-width:760px){
  .btn,.f input,.f select,.f textarea,.chip,.fchip,.tab{min-height:44px;}
  .f input,.f select{padding-block:12px;}
  .btn{padding-block:13px;}
}

/* felruta */
.ok--fel{background:color-mix(in srgb,var(--fel) 14%,transparent);border-color:color-mix(in srgb,var(--fel) 38%,transparent);}
.ok--fel svg{color:var(--fel);}

/* ---------- 31. VANLIGA FRÅGOR ------------------------------------------- */
.faq{border-top:1px solid var(--line);}
.faq__post{border-bottom:1px solid var(--line);}
.faq__fraga{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.2vw,24px) 0;min-height:44px;cursor:pointer;
  font-family:var(--display);font-weight:750;letter-spacing:-.02em;
  font-size:clamp(17px,1.9vw,21px);color:var(--fg);
  list-style:none;transition:color .18s ease;
}
.faq__fraga::-webkit-details-marker{display:none;}
.faq__fraga:hover{color:var(--accent);}
.faq__fraga svg{width:16px;height:16px;flex:none;color:var(--fg-3);transition:transform .25s ease,color .18s ease;}
.faq__post[open] .faq__fraga svg{transform:rotate(180deg);color:var(--accent);}
.faq__svar{padding:0 0 clamp(20px,2.4vw,26px);color:var(--fg-2);font-size:16px;max-width:70ch;}

/* ---------- 32. BRÖDSMULOR ----------------------------------------------- */
.brodsmulor{margin-bottom:18px;}
.brodsmulor ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);}
.brodsmulor li{display:flex;align-items:center;gap:8px;}
.brodsmulor li + li::before{content:'/';color:var(--fg-3);opacity:.6;}
.brodsmulor a{color:var(--fg-3);}
.brodsmulor a:hover{color:var(--fg);}
.brodsmulor [aria-current]{color:var(--fg-2);}

/* roller som länkar till sin egen sida */
.roller__lista a{color:var(--fg-2);border-bottom:1px solid transparent;transition:color .16s,border-color .16s;}
.roller__lista a:hover{color:var(--fg);border-bottom-color:var(--accent);}

/* ---------- 33. BEVISREMSA ----------------------------------------------- */
.bevis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.bevis__post{background:var(--bg);padding:clamp(22px,3vw,32px) clamp(18px,2vw,26px);display:grid;gap:7px;}
.bevis__v{font-family:var(--display);font-weight:850;font-size:clamp(28px,4vw,46px);
  letter-spacing:-.045em;line-height:1;color:var(--fg);}
.bevis__v small{font-size:.45em;font-weight:700;letter-spacing:-.01em;color:var(--fg-3);margin-left:.15em;}
.bevis__l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.bevis__tom{border:1.5px dashed var(--fel);border-radius:var(--r);padding:20px;color:var(--fel);font-size:14.5px;}

/* Fritextrollen: chippet sist i listan öppnar en ruta för en roll som
   inte finns bland de valbara. Streckad kant skiljer det från de övriga. */
.chip--annan{border-style:dashed;}
.annanroll{margin-top:10px;}

/* Personuppgiftstexten under formulären. Ska synas men inte konkurrera. */
.fine--integritet{margin-top:14px;max-width:62ch;line-height:1.5;}

/* ==========================================================================
   34. ANVISNINGEN — lagret som bär den nya världen
   Skrivet sist med flit: det vinner över reglerna ovanför utan att de
   behöver rivas ut, så att undersidor som ännu inte byggts om fortsätter
   fungera men ändå ärver nytt formspråk.
   ========================================================================== */

/* ---- typografi: skyltbokstäverna är smala, de tål inte gammal knipning -- */
h1,h2,h3,h4,.h-mega,.h-xl,.h-lg,.h-md,.h-sm{
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.004em;line-height:.93;text-wrap:balance;
}
.h-mega{font-size:clamp(2.9rem,7.2vw,5.6rem);font-weight:900;}
.h-xl{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:900;}
.h-lg{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;}
.h-md{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:800;}
.h-sm{font-size:1.1rem;font-weight:700;}
.lede{font-size:clamp(16px,1.25vw,18.5px);line-height:1.62;letter-spacing:0;max-width:58ch;}
.kicker{font-size:10.5px;letter-spacing:.16em;}
.pen::after{border-radius:0;height:.26em;}
.mono,.num{font-family:var(--mono);letter-spacing:.06em;}

/* ---- varningsdiagonal och reflexsvep: världens två återkommande material */
.hazard{height:7px;background:repeating-linear-gradient(-45deg,var(--hv) 0 11px,#0B0D0E 11px 22px);}
.hazard--thin{height:5px;}
.reflex{position:relative;overflow:hidden;}
.reflex::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(244,248,249,.42) 48%,rgba(255,255,255,.72) 50%,rgba(244,248,249,.42) 52%,transparent 64%);
  transform:translateX(-130%);
}
.reflex.swept::after{transform:translateX(130%);transition:transform 1150ms cubic-bezier(.16,.84,.3,1);}
@media (prefers-reduced-motion:reduce){.reflex::after{display:none;}}

/* ---- webbläsarytor ------------------------------------------------------ */
::selection{background:var(--hv);color:var(--accent-fg);}
:focus-visible{outline:2px solid var(--hv);outline-offset:2px;border-radius:0;}
.sec--bet :focus-visible{outline-color:var(--blue-lo);}
*{scrollbar-color:var(--ink-4) var(--bg);scrollbar-width:thin;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--ink-4);border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--hv-dim);}

/* ---- knappar: plåtar, inte piller -------------------------------------- */
.btn{
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;padding:16px 24px;border-width:1px;border-radius:0;
  justify-content:flex-start;gap:12px;
}
.btn:hover{transform:translateX(3px);}
.btn:active{transform:translateX(0) scale(.99);}
.btn svg{width:17px;height:17px;}
.btn--amber{background:var(--hv);border-color:var(--hv);color:var(--accent-fg);box-shadow:none;}
.btn--amber:hover{background:#E6FF2E;box-shadow:none;}
.btn--ghost{border-color:var(--line);color:var(--fg);background:transparent;}
.btn--ghost:hover{border-color:var(--reflex);background:rgba(200,208,212,.08);}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn--blue:hover{background:#4F63DE;}
.btn--sm{padding:11px 16px;font-size:15px;}
.btn--lg{padding:18px 28px;font-size:21px;}
.btn--block{justify-content:space-between;}
.lnk{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.03em;border-bottom-width:1px;}

/* ---- sidhuvudet: grindskylten ------------------------------------------ */
.nav{background:rgba(21,24,26,.93);backdrop-filter:blur(8px) saturate(1.1);border-bottom:0;}
.nav[data-scrolled="true"]{box-shadow:none;border-bottom:0;}
.nav::after{content:"";display:block;height:5px;background:repeating-linear-gradient(-45deg,var(--hv) 0 11px,#0B0D0E 11px 22px);}
.nav__in{padding:0 var(--gut);height:72px;gap:22px;}
.brand__mark{width:26px;height:30px;}
.brand__txt{font-family:var(--display);font-weight:800;font-size:17px;line-height:.9;letter-spacing:.02em;}
.nav__links{margin-inline:0;margin-left:auto;gap:4px;}
.nav__links a{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-2);padding:9px 12px;border:1px solid transparent;
}
.nav__links a::after{display:none;}
.nav__links a:hover{color:var(--fg);border-color:var(--line);}
.nav__act{gap:12px;}
.nav__burger{width:38px;height:38px;border-width:1px;background:var(--ink-3);border-color:var(--line);}
/* löftesplattan i sidhuvudet */
.nav__loft{
  flex:none;display:flex;align-items:center;gap:8px;height:34px;padding:0 13px;
  background:var(--ink-3);border:1px solid var(--line);white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg);
}
.nav__loft i{width:7px;height:7px;background:var(--hv);display:block;flex:none;}
@media (max-width:860px){
  .nav__in{height:62px;gap:12px;}
  .nav__act{margin-left:auto;}
}
@media (max-width:560px){.nav__loft em{display:none;}}
@media (max-width:420px){.nav__loft{display:none;}}
.msheet{background:var(--ink);}
.msheet__close{border-radius:0;border-width:1px;border-color:var(--line);}
.msheet nav a{font-size:clamp(28px,8vw,46px);letter-spacing:.01em;text-transform:uppercase;line-height:1;}
.msheet nav a span{color:var(--hv);}

/* ---- HERO: anvisningsskylten vid grinden ------------------------------- */
.hero{position:relative;padding:clamp(20px,2.4vw,30px) 0 0;background:var(--bg);}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 92% at 50% -16%,rgba(214,245,0,.07),transparent 58%),
    repeating-linear-gradient(0deg,rgba(200,208,212,.045) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(200,208,212,.045) 0 1px,transparent 1px 72px);
}
.hero__in{position:relative;z-index:1;}
.skylt{position:relative;background:var(--surface);border:1px solid var(--line);}
.skylt__top{height:13px;background:var(--hv);}
.skylt__edge{position:absolute;left:0;top:0;bottom:0;width:17px;z-index:2;
  background:repeating-linear-gradient(-45deg,var(--hv) 0 10px,#0B0D0E 10px 20px);}
.skylt__in{padding:clamp(22px,3.2vw,40px) clamp(24px,3.4vw,46px) 0 clamp(40px,4.6vw,64px);}
@media (min-width:1180px){
  .skylt__in{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,14vw,208px);
    gap:0 clamp(30px,3vw,46px);align-items:stretch;}
  .skylt__main{min-width:0;}
}
.skylt__meta{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--fg-3);
  padding-bottom:clamp(16px,2vw,24px);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;}
.skylt__meta span{display:flex;align-items:center;gap:8px;}
.skylt__meta span::before{content:"";width:5px;height:5px;background:var(--fg-3);flex:none;}
.hero__title{max-width:17ch;}
.hero__title em{font-style:normal;color:var(--hv);}
.hero__lede{margin-top:clamp(14px,1.7vw,20px);color:var(--fg-2);}
.hero__lede strong{color:var(--fg);font-weight:500;}


/* legendpanelen — rollvalet är en riktig kontroll, inte en kortrad */
.legend{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line);}
.legend__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;padding:12px 0;color:var(--fg-3);}
.legend__cap b{color:var(--fg);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;}
.legend__cap span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;}
.grp{display:grid;grid-template-columns:158px 1fr;gap:0 20px;border-top:1px solid var(--line-2);padding:9px 0;align-items:start;}
.grp__lab{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);padding-top:11px;display:flex;align-items:center;gap:9px;}
.grp__lab::before{content:"";width:9px;height:2px;background:var(--hv-dim);flex:none;}
.plates{display:flex;flex-wrap:wrap;gap:2px;}
.plate{
  flex:1 1 150px;min-width:132px;text-align:left;cursor:pointer;
  background:var(--ink-3);border:1px solid rgba(200,208,212,.12);padding:12px 13px 11px;
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1.02;
  letter-spacing:.012em;text-transform:uppercase;color:var(--fg);
  transition:background .16s,color .16s,transform .22s cubic-bezier(.16,.84,.3,1),
             box-shadow .22s,opacity .22s,border-color .16s;
}
.plate span{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;
  font-weight:500;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase;}
.plate:hover{background:var(--ink-4);border-color:rgba(200,208,212,.3);}
.plate--other{background:transparent;border:1px dashed rgba(200,208,212,.3);color:var(--fg-2);}
.plate--other:hover{background:rgba(200,208,212,.07);color:var(--fg);}
.plate[aria-pressed="true"]{background:var(--hv);color:var(--accent-fg);border-color:var(--hv);
  transform:translateY(-4px);box-shadow:0 12px 26px -8px rgba(0,0,0,.75);}
.plate[aria-pressed="true"] span{color:rgba(11,13,14,.66);}
.legend[data-vald] .plate:not([aria-pressed="true"]){opacity:.46;}
.legend[data-vald] .plate:not([aria-pressed="true"]):hover{opacity:1;}

/* handlingsraden */
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  padding:clamp(18px,2.2vw,24px) 0 clamp(20px,2.4vw,28px);border-top:1px solid var(--line);margin-top:6px;}
.hero__note{color:var(--fg-3);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.hero__note b{color:var(--hv);font-weight:600;}

/* ---- referensremsan: skyltens underkant i betong ----------------------- */
.ref{background:var(--paper);color:#0B0D0E;padding:0;margin-top:-1px;position:relative;z-index:1;}
.ref .shell{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  padding-top:16px;padding-bottom:16px;}
.ref__rubrik{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#4A4E4F;flex:none;margin:0;}
.ref__rad{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:0;}
.ref__rad img{height:30px;width:auto;opacity:.52;filter:grayscale(1);
  transition:opacity .2s,filter .2s;}
.ref__rad img:hover{opacity:1;filter:none;}
.ref + .sec--bet{padding-top:clamp(44px,5vw,72px);}

/* ---- sektioner: betong som inversyta ----------------------------------- */
.sec--bet{background:var(--paper);color:#0B0D0E;position:relative;}
.sec--bet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:repeating-linear-gradient(-45deg,var(--hv) 0 11px,#0B0D0E 11px 22px);}
.sec--bet h1,.sec--bet h2,.sec--bet h3{color:#0B0D0E;}
.sec--bet .body-txt,.sec--bet .lede,.sec--bet p{color:#44494B;}
.sec--bet .kicker{color:#6B6F71;}
.sec--alt{background:var(--bg-2);}

/* ---- formulär: en blankett fastklämd på skylten ------------------------ */
.form{border:0;background:transparent;padding:0;}
.f label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.f .req{color:var(--rust);}
.f input,.f select,.f textarea{border-radius:0;}
.sec--bet .f label{color:#4A4E4F;}
.sec--bet .f input,.sec--bet .f select,.sec--bet .f textarea{
  background:#F6F5F2;border:1px solid var(--paper-3);border-bottom:2px solid #9FA29B;
  color:#0B0D0E;padding:13px 14px;caret-color:var(--blue-lo);
  transition:border-color .16s,background .16s;
}
.sec--bet .f input::placeholder,.sec--bet .f textarea::placeholder{color:#7C8082;}
.sec--bet .f input:hover,.sec--bet .f select:hover,.sec--bet .f textarea:hover{background:#FBFAF8;}
.sec--bet .f input:focus,.sec--bet .f select:focus,.sec--bet .f textarea:focus{
  outline:none;border-color:var(--blue-lo);border-bottom-color:var(--blue-lo);background:#fff;}
.sec--bet .f__hint{color:#6B6F71;font-family:var(--mono);font-size:10px;letter-spacing:.08em;}
.sec--bet .filfalt{background:#F6F5F2;border:1px solid var(--paper-3);border-radius:0;color:#44494B;}
.sec--bet .range output{font-family:var(--mono);font-size:12.5px;font-weight:600;color:#0B0D0E;}
.sec--bet .range input[type=range]{background:var(--paper-3);}
.sec--bet .form__foot{border-top:1px solid var(--paper-3);}
.sec--bet .form__foot .btn--amber{border-color:#0B0D0E;}
.sec--bet .form__foot .btn--amber:hover{background:#0B0D0E;color:var(--hv);}
.sec--bet .fine,.sec--bet .form__foot span{color:#5C6163;}
.sec--bet .tab{color:#5C6163;border-color:var(--paper-3);}
.sec--bet .tab[aria-selected="true"]{background:var(--hv);color:#0B0D0E;border-color:var(--hv);}

/* ---- rollväggen --------------------------------------------------------- */
.roller__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border-block:1px solid var(--line);margin-top:clamp(30px,4vw,48px);}
.roller__kort{background:var(--bg);border:0;border-radius:0;padding:24px clamp(14px,1.6vw,26px) 28px;}
.roller__kort h3{font-size:1.45rem;color:var(--fg);}
.roller__lista{margin-top:18px;display:flex;flex-direction:column;gap:0;}
.roller__lista li+li{border-top:1px solid var(--line-2);}
.roller__lista li{padding:0;}
.roller__lista a,.roller__lista li>span{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 2px;color:var(--fg-2);font-size:15.5px;transition:color .16s,padding .16s;}
.roller__lista a::after{content:"";width:13px;height:13px;flex:none;opacity:0;background:var(--hv);
  clip-path:polygon(0 38%,62% 38%,62% 14%,100% 50%,62% 86%,62% 62%,0 62%);transition:opacity .16s;}
.roller__lista a:hover{color:var(--fg);padding-left:7px;}
.roller__lista a:hover::after{opacity:1;}
@media (max-width:980px){.roller__grid{grid-template-columns:1fr;}}

/* ---- vanliga frågor ----------------------------------------------------- */
.faq{border-top:1px solid var(--line);}
.faq__post{border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0;}
.faq__fraga{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:20px 2px;
  font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.6rem);
  text-transform:uppercase;letter-spacing:.01em;color:var(--fg-2);transition:color .16s;}
.faq__fraga::-webkit-details-marker{display:none;}
.faq__post[open] .faq__fraga,.faq__fraga:hover{color:var(--fg);}
.faq__fraga svg{width:16px;height:16px;margin-left:auto;flex:none;color:var(--hv);
  transition:transform .25s cubic-bezier(.16,.84,.3,1);}
.faq__post[open] .faq__fraga svg{transform:rotate(180deg);}
.faq__svar{padding:0 46px 24px 2px;color:var(--fg-2);font-size:15.5px;line-height:1.68;max-width:72ch;}

/* ---- konsultporten ------------------------------------------------------ */
.konsultblock{display:grid;grid-template-columns:1fr auto;gap:30px 48px;align-items:end;
  background:var(--bg-2);border:0;border-top:1px solid var(--line);border-radius:0;
  padding:clamp(34px,4.6vw,56px) clamp(24px,3vw,44px);}
.konsultblock h2{font-size:clamp(1.9rem,3.6vw,3rem);}
.konsultblock p{margin-top:14px;color:var(--fg-2);max-width:48ch;}
.konsultblock .btn{background:var(--blue);border-color:var(--blue);color:#fff;}
.konsultblock .btn:hover{background:#4F63DE;}
@media (max-width:860px){.konsultblock{grid-template-columns:1fr;align-items:start;}}

/* ---- sidfot ------------------------------------------------------------- */
.foot{border-top:0;position:relative;overflow:hidden;}
.foot::before{content:"";display:block;height:7px;margin-bottom:clamp(40px,5vw,66px);
  background:repeating-linear-gradient(-45deg,var(--hv) 0 11px,#0B0D0E 11px 22px);}
.foot__col .h,.foot__col h3{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);}
.foot a:hover{color:var(--hv);}
.foot__big{font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.005em;line-height:.78;}
.foot__big svg text{font-family:var(--display);font-weight:900;
  fill:none;stroke:rgba(200,208,212,.16);stroke-width:1;}

/* ---- mobil -------------------------------------------------------------- */
@media (max-width:760px){
  .skylt__edge{width:11px;}
  .skylt__in{padding:20px 18px 0 24px;}
  .ref .shell{padding-left:24px;padding-right:18px;}
  .ref__rad img{height:24px;}
  .hero__title{max-width:none;}
  .grp{grid-template-columns:1fr;gap:10px;padding:16px 0;}
  .grp__lab{padding-top:0;}
  .plate{flex:1 1 calc(50% - 1px);min-width:0;font-size:17px;padding:11px 11px 10px;}
  .hero__cta{gap:12px;}
  .hero__cta .btn{width:100%;justify-content:space-between;}
  .faq__svar{padding-right:2px;}
}

/* ---- rättelser efter första granskningen -------------------------------- */
/* Rubrikens nyckelord är gult i färg, inte en gul platta bakom texten. */
.hero__title{color:var(--fg);font-size:clamp(2.9rem,7.2vw,5.6rem);}
.hero__title em{font-style:normal;color:var(--hv);background:none;box-shadow:none;padding:0;}
.hero__title em::after,.hero__title em::before{display:none;content:none;}

/* Plattorna är EN rad med gemensam skala — ett rutnät, inte fria kort. */
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;}
.plate{flex:none;min-width:0;}
.grp:has(.plate--other) .plates{grid-template-columns:repeat(4,minmax(0,1fr));}
.plate--other{grid-column:span 1;}

/* Löftesplattans inledning är inte kursiv. */
.nav__loft em{font-style:normal;}

/* Innehållet står still. Rörelsen i den här världen är reflexsvepet. */
.js-reveal [data-reveal]{opacity:1;transform:none;transition:none;}

@media (max-width:760px){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---- rättelser, andra granskningen -------------------------------------- */
/* Konsultporten ligger på mörk yta nu — texten måste följa med. */
.konsultblock h2{color:var(--fg);}
.konsultblock p{color:var(--fg-2);}

/* Omfattningsreglaget på betong: blå i stället för varselgul helyta. */
.sec--bet .range input[type=range]{accent-color:var(--blue-lo);background:transparent;}
.sec--bet .range output{color:#0B0D0E;}

/* Citatet i formulärets intro är en mening, inte en färgad list. */
.form__intro .path__quote{border-left:0;padding-left:0;}
.sec--bet .path__quote{color:#0B0D0E;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;
  font-size:clamp(1.15rem,1.7vw,1.45rem);max-width:30ch;}

@media (max-width:760px){
  /* Ensam platta i sin rad tar hela bredden i stället för att radbryta illa. */
  .plate--other{grid-column:1 / -1;}
}

/* ==========================================================================
   35. UNDERSIDORNA — lediga uppdrag och om oss i samma värld
   ========================================================================== */

/* ---- sidhuvudet på undersidor: samma skylt, utan rollpanelen ----------- */
.pagehead{background:var(--bg);padding-block:clamp(20px,2.4vw,30px) 0;}
.pagehead::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;
  mask-image:none;background-size:auto;
  background:
    radial-gradient(130% 92% at 50% -16%,rgba(214,245,0,.07),transparent 58%),
    repeating-linear-gradient(0deg,rgba(200,208,212,.045) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(200,208,212,.045) 0 1px,transparent 1px 72px);
}
.pagehead::after{display:none;}
.pagehead h1{color:var(--fg);margin-top:0;}
.pagehead p{color:var(--fg-2);margin-top:16px;max-width:58ch;}
.skylt--smal .skylt__in{display:block;padding-bottom:clamp(26px,3.4vw,42px);}
.skylt--smal .skylt__meta{padding-bottom:clamp(14px,1.8vw,20px);}

/* ---- uppdragstavlan ---------------------------------------------------- */
.board{border-top:0;}
.board__filters{gap:2px;margin-bottom:26px;}
.fchip{
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.03em;
  text-transform:uppercase;padding:10px 16px;border-radius:0;
  border:1px solid rgba(200,208,212,.14);background:var(--surface-2);color:var(--fg-2);
}
.fchip:hover{background:var(--ink-4);border-color:rgba(200,208,212,.3);color:var(--fg);}
.fchip[aria-pressed="true"]{background:var(--hv);border-color:var(--hv);color:var(--accent-fg);}
.board__count{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;}

.job{border-bottom:1px solid var(--line-2);}
.job:first-child{border-top:1px solid var(--line);}
.job:last-child{border-bottom:1px solid var(--line);}
.job:hover{background:rgba(200,208,212,.045);}
.job__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;}
.job__t{font-family:var(--display);font-weight:800;letter-spacing:.008em;line-height:1.02;
  text-transform:uppercase;font-size:clamp(1.2rem,2.3vw,1.85rem);}
.job__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;}
.job__go{width:42px;height:42px;border-radius:0;border-width:1px;}
.job:hover .job__go{transform:none;background:var(--hv);border-color:var(--hv);color:var(--accent-fg);}
.job__flag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;}
.job__flag::before{border-radius:0;}
.board__empty{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;}
.board__foot{border-top:0;margin-top:24px;}

/* ---- gå med i nätverket ------------------------------------------------- */
.join{border-radius:0;background:var(--surface);border-color:var(--line);}
.join::before{height:13px;background:var(--hv);}
.join__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--fg-3);}
.join h2{letter-spacing:.006em;}
.join__punkter li svg{color:var(--hv);}

/* ---- valbara chips i konsultformuläret --------------------------------- */
.chip{border-radius:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.sec--bet .chip{border:1px solid var(--paper-3);background:#F6F5F2;color:#44494B;}
.sec--bet .chip:hover{background:#fff;border-color:#9FA29B;color:#0B0D0E;}
.sec--bet .chip[aria-pressed="true"]{background:var(--hv);border-color:#0B0D0E;color:#0B0D0E;}
.sec--bet .chip--annan{border-style:dashed;}

/* ---- uppdragsdetaljen --------------------------------------------------- */
.jd__hd{border-bottom:1px solid var(--line);}
.jd__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;}
.jd__terms li{border-top:1px solid var(--line-2);padding-block:11px;}
.jd__aside{background:var(--surface);border:1px solid var(--line);border-radius:0;}

/* ---- vision och siffror ------------------------------------------------- */
.vision blockquote{letter-spacing:.006em;line-height:.95;text-transform:uppercase;}
.vision blockquote em{color:var(--hv);}
.vision__mark{color:transparent;-webkit-text-stroke:1px rgba(200,208,212,.08);}
.vision cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;}
.stats{background:var(--line-2);}
.stat__v{letter-spacing:.004em;}
.stat__l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;}

/* ---- kort och steg ------------------------------------------------------ */
.card{border-radius:0;background:var(--surface);border:1px solid var(--line);}
.card__ic{border-radius:0;color:var(--hv);}
.step__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--hv);}
.step__bar{background:var(--line-2);}

/* ---- rättelser, undersidorna -------------------------------------------- */
/* Citatet är en mening i skyltsnitt, inte en färgad list. Gäller överallt. */
.path__quote{border-left:0;padding-left:0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.008em;line-height:1.04;
  font-size:clamp(1.25rem,2.1vw,1.7rem);color:var(--fg);max-width:26ch;}
.sec--bet .path__quote{color:#0B0D0E;}

/* Bakgrundsmärket i visionen ska ligga bakom texten, inte tävla med den. */
.vision__mark{top:2%;font-size:clamp(90px,17vw,230px);
  -webkit-text-stroke:1px rgba(200,208,212,.055);}

/* Bildbandet: gråskala med ett varselgult anslag i stället för blå/guld. */
.band{background:var(--bg);}
.band__img{filter:grayscale(1) contrast(1.1) brightness(.78);mix-blend-mode:luminosity;}
.band::after{background:linear-gradient(118deg,rgba(66,87,207,.22),rgba(11,13,14,.2) 46%,rgba(214,245,0,.26));}
.band__cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;}
.band__cap::before{background:var(--hv);}

/* Bildbandet låg som luminositet mot mörk grund och blev nästan svart.
   Här är fotot i stället gråskala med ett varselgult anslag ovanpå. */
.band__img{mix-blend-mode:normal;filter:grayscale(1) contrast(1.08) brightness(.86);}
.band::after{mix-blend-mode:normal;
  background:linear-gradient(118deg,rgba(66,87,207,.16),rgba(11,13,14,.42) 55%,rgba(214,245,0,.1));}

/* Bildtexten måste hålla mot ljusa partier i fotot. */
.band::before{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;z-index:2;
  background:linear-gradient(to top,rgba(11,13,14,.72),transparent);pointer-events:none;}
.band__cap{color:var(--fg);}

/* Långa rollnamn (Projekt/Entreprenadingenjör) måste få bryta rad
   i stället för att klippas av vid plattans kant. */
.plate{overflow-wrap:anywhere;hyphens:auto;}
.plate span{overflow-wrap:anywhere;}

/* ---- skylten går kant till kant, som sidans övriga sektioner ----------- */
/* Betongbandet och formuläret har alltid haft helbredd bakgrund medan
   skylten var en fristående ruta mitt på sidan. Nu bär den hela bredden,
   medan innehållet stannar i samma 1320-kolumn som resten — bakgrunden
   löper ut, texten håller linjen. */
.hero .shell{max-width:none;padding-inline:0;}
.skylt{border-left:0;border-right:0;}
.skylt__in{
  max-width:var(--max);margin-inline:auto;
  padding-left:max(var(--gut),40px);padding-right:var(--gut);
}

/* Skyltens innehållskolumn. Fotopanelen ligger utanför rutnätet — se
   avsnittet om fotoplåten längst ned, där bredden och dess plats hänger
   ihop i en och samma variabel. */

/* Rollnamn får bryta rad, men utan avstavning mitt i ordet. */
.plate{hyphens:manual;overflow-wrap:break-word;}

/* ---- logotypens egna färger ---------------------------------------------
   Hämtade ur originalfilen. Märket ska behålla dem även om designsystemets
   signalfärg ändras — därför egna variabler, inte --blue och --amber. */
:root{
  --marke-bla:#3D51B5;
  --marke-gul:#F5C060;
}

/* ---- kundlogotyperna i full färg ---------------------------------------- */
.ref__rad img{opacity:1;filter:none;}

/* ---- fotoplåten ---------------------------------------------------------
   Bilden är en tryckt panel i skylten, inte en tavla på den. Den börjar
   under den varselgula överkanten, går ned till skyltens underkant och
   löper ut genom sidans högerkant. Kvar blir EN synlig kant: ett rakt
   lodrätt snitt mot asfalten.

   Ingen ram och ingen uttoning. Allt annat i den här världen är hårda
   kanter och platta ytor — en mjuk övergång hade varit det enda undantaget
   och hade lästs som ett misstag. Att bilden går ut genom kanten är också
   svaret på varför den slutar där den slutar: den gör inte det.

   --foto-bredd styr både panelen och den plats innehållet lämnar åt den,
   så de kan aldrig glida isär.
   ------------------------------------------------------------------------ */
.skylt{position:relative;overflow:hidden;}
.skylt__foto{display:none;}

@media (min-width:1180px){
  .skylt{--foto-bredd:clamp(260px,24vw,460px);--skylt-bar:13px;}

  .skylt__foto{
    display:block;position:absolute;z-index:1;
    top:var(--skylt-bar);right:0;bottom:0;
    width:var(--foto-bredd);
    margin:0;padding:0;
  }
  .skylt__foto figure{margin:0;padding:0;border:0;background:none;height:100%;}
  .skylt__foto img{
    width:100%;height:100%;object-fit:cover;object-position:52% 16%;
    display:block;
  }

  /* Innehållet lämnar plats åt panelen. Uttrycket drar bort den del av
     bredden som redan ligger i sidans högermarginal, så att mellanrummet
     mellan plattorna och bilden blir detsamma oavsett skärmbredd. */
  .skylt__in{
    display:block;
    padding-right:max(
      var(--gut),
      calc(var(--foto-bredd) + var(--gut) - (100vw - min(100vw, var(--max))) / 2)
    );
  }
  .skylt__main{min-width:0;}
}

/* ---- undersidornas sidhuvud i helbredd ----------------------------------
   Samma plåt som startsidan: bakgrunden går kant till kant medan texten
   stannar i sidans 1320-kolumn. Utan det här låg sidhuvudet som en
   fristående ruta mitt på sidan medan allt annat bredde ut sig.

   Sidhuvudet har ingen fotopanel, så det ska heller inte lämna plats åt
   någon — därför nollställs den reserverade högermarginalen här. */
.pagehead .shell{max-width:none;padding-inline:0;}
.skylt--smal .skylt__in{padding-right:var(--gut);}
@media (min-width:1180px){
  .skylt--smal .skylt__in{padding-right:var(--gut);}
}

/* ---- plattor utan underrad ----------------------------------------------
   Gruppnamnet står i radetiketten till vänster, så plattan bär bara rollen.
   Rutnätet hålls kvar på fyra kolumner: grupperna har olika många roller,
   och gemensamma kolumner är det som får raderna att läsas som EN tavla i
   stället för tre fristående rader. En ojämn sista rad är priset, och det
   är ett lägre pris än att kolumnerna hoppar mellan grupperna. */
.plate{padding:13px 13px 12px;line-height:1.05;}
.plate span{margin-top:4px;}

/* ---- tätare rytm när alla roller ska rymmas ----------------------------
   Med samtliga roller från panelen blir skylten hög. I stället för att
   stryka roller stramas rytmen upp: plattorna får en lägre höjd och
   rutnätet fyller bredden med så många kolumner som ryms i stället för
   att låsa sig vid fyra. Alla grupprader är lika breda, så kolumnerna
   linjerar fortfarande mellan grupperna — det är det som gör att raden
   läses som en tavla. */
/* Fyra kolumner, inte auto-fit: auto-fit packar cellerna till minimibredden
   och då bryts långa rollnamn mitt i ordet. En extra rad är ett lägre pris
   än "Entreprenadingenjö-r". Vid fyra kolumner får namnen plats på en rad. */
@media (min-width:761px){
  .plates{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* 17px i stället för 18: vid 17 får branschens längsta rollnamn
   (Installationssamordnare) plats på en rad i en fyrkolumnscell. */
.plate{padding:10px 12px 9px;font-size:17px;}
.legend{margin-top:clamp(16px,1.8vw,22px);}
.legend__cap{padding:9px 0;}
.grp{padding:6px 0;}
.hero__lede{margin-top:clamp(11px,1.3vw,15px);}
.hero__cta{padding:clamp(14px,1.7vw,18px) 0 clamp(16px,1.9vw,22px);}

@media (max-width:760px){
  /* Två kolumner ger 165 px celler. Vid 15px ryms även branschens längsta
     rollnamn på en rad; plattans höjd räcker ändå gott som tryckyta. */
  .plate{font-size:15px;padding:10px 10px 9px;}
}