/* ============================================================
   KES Drag & Gripstrumpor
   Färg: galvaniserad zink + grafit + signalorange (ur logotypen)
   Rubriker: Archivo expanded (ekar logotypens utsträckta versaler)
   Brödtext och gränssnitt: IBM Plex Sans
   Mono (IBM Plex Mono) bara där det bär information: modellkoder, tabeller, org.nr
   ============================================================ */

/* typsnitt: start */
/* Skrivet av verktyg/typsnitt.py ur underlag/typsnitt-original/. Ändra där och kör om, inte här. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-stretch:100% 125%;font-display:swap;src:url('/fonts/archivo-latin-ext.woff2?v=2970148e') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-stretch:100% 125%;font-display:swap;src:url('/fonts/archivo-latin.woff2?v=d27b9f2d') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-mono-400-latin-ext.woff2?v=8450d594') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-mono-400-latin.woff2?v=79936b18') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-mono-500-latin-ext.woff2?v=fa8d8838') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-mono-500-latin.woff2?v=b1c8a895') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-mono-600-latin-ext.woff2?v=f2fe87d5') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-mono-600-latin.woff2?v=5a2ce779') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('/fonts/plex-sans-latin-ext.woff2?v=f0e2925b') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('/fonts/plex-sans-latin.woff2?v=b2c9031d') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* typsnitt: slut */

:root{
  /* färg */
  --graphite:#16181A;
  --graphite-2:#202427;
  --graphite-3:#2B3034;
  --ink:#101214;
  --text:#2E3438;
  --muted:#4A5055;
  --zinc:#F1F2F1;
  --zinc-2:#E4E6E5;
  --photo:#EEEFEE;          /* fotonas bakgrund, samma som BAKGRUND i verktyg/bilder.py */
  --line:#D5D8D7;
  --line-dark:rgba(255,255,255,.14);
  --wire:#5F666B;
  --wire-dark:#A2AAAF;
  --signal:#EB702D;
  --signal-deep:#B94D18;
  --signal-lift:#F5813C;
  --signal-soft:rgba(235,112,45,.12);

  /* mått */
  --wrap:1180px;
  --gut:clamp(20px,5vw,40px);
  --r:4px;
  --sect:clamp(64px,9vw,124px);
  --nav-h:72px;

  /* typ */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zinc);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
p,li,dd{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut)}
section[id],main [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.section{padding-block:var(--sect)}
.mono{font-family:var(--mono);font-size:.94em;letter-spacing:.01em}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;
  background:var(--signal);color:var(--ink);border-radius:var(--r);font-weight:600;
}
.skip:focus{top:12px}

/* ikoner: outline, 24-rutnät, stroke 1,75 */
.ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* --- typografi ------------------------------------------------- */
.display{
  font-family:var(--display);font-weight:800;font-stretch:125%;
  letter-spacing:-.03em;line-height:1.02;margin:0;
  text-wrap:balance;
}
h1.display{font-size:clamp(2rem,5.4vw,4.4rem);line-height:1;letter-spacing:-.036em;font-weight:840}
h2.display{font-size:clamp(1.75rem,3.4vw,2.85rem)}
h3{font-family:var(--display);font-weight:680;font-stretch:115%;letter-spacing:-.02em;margin:0}

/* accentordet finns bara i heron, där det ekar logotypens orangea E */
.hero .accent{font-style:normal;color:var(--signal)}
.hero__claim{
  font-family:var(--display);font-size:clamp(1.22rem,2.2vw,1.75rem);font-weight:680;
  font-stretch:115%;letter-spacing:-.02em;line-height:1.15;margin:18px 0 0;color:#fff;
}

.kicker{
  font-size:.86rem;font-weight:500;letter-spacing:.01em;
  color:var(--signal-deep);margin:0 0 14px;
}
.kicker--dark{color:var(--signal)}

.lead{font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.62;color:var(--text);max-width:56ch;margin:18px 0 0}
.lead--dark{color:#C3C9CD}

.txtlink{border-bottom:1px solid var(--signal);padding-bottom:1px;transition:color .2s var(--ease)}
.txtlink:hover{color:var(--signal-deep)}

/* --- knappar --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border:1px solid transparent;border-radius:var(--r);
  font-family:var(--body);font-size:.94rem;font-weight:600;line-height:1.2;
  letter-spacing:.005em;cursor:pointer;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),color .22s var(--ease);
}
.btn--sm{padding:10px 16px;font-size:.88rem}
.btn--block{width:100%}
.btn--primary{background:var(--signal);color:var(--ink)}
.btn--primary:hover{background:var(--signal-lift)}
.btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--zinc-2)}
.btn:active{transform:translateY(1px)}
.btn .ico{transition:transform .22s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

/* --- header ---------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;color:#fff;
  background:rgba(20,22,24,.92);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;line-height:1;margin:0;flex:none}
.brand__logo{display:block;height:44px;width:auto}
.brand--lg .brand__logo{height:62px}
.nav__links{--nav-gap:26px;display:flex;align-items:center;gap:var(--nav-gap)}
/* De engelska menyorden är längre; med sökknappen får de plats först vid 18 px. */
html[lang="en"] .nav__links{--nav-gap:18px}
.nav__links a{
  font-size:.93rem;font-weight:500;color:#D9DDDF;position:relative;padding-block:6px;white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--signal);transition:width .24s var(--ease);
}
.nav__links a:hover::after{width:100%}
.nav__links .btn,.nav__links .lang{margin-left:4px}
.nav__links .btn::after,.nav__links .lang::after{display:none}
.nav__links .btn{color:var(--ink)}
.lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:32px;padding:0 9px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;color:#fff;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.lang:hover{border-color:#fff;background:rgba(255,255,255,.07)}
/* Storleksguiden: menypunkten är en länk till hubben som js/main.js uppgraderar
   till en panelöppnare. Egen ram och tabellikon, så den läser som ett verktyg och
   inte som ännu en textlänk, men ljus och tunn så den inte tävlar med offertknappen. */
.navguide{position:relative;display:flex;align-items:center}
.nav__links .navguide__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  color:#fff;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.nav__links .navguide__link::after{display:none}
.nav__links .navguide__link:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.navguide__link[aria-expanded="true"]{border-color:#fff;background:rgba(255,255,255,.1)}
.navguide__ico{width:15px;height:15px;flex:none;color:var(--signal)}
.navguide__caret{width:11px;height:11px;flex:none;transition:transform .22s var(--ease)}
.navguide__link[aria-expanded="true"] .navguide__caret{transform:rotate(180deg)}
.navguide__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:min(460px,90vw);padding:8px;z-index:70;
  background:#141618;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
}
.navguide__fam{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 14px;
  padding:9px 12px;border-radius:var(--r);
  transition:background .18s var(--ease);
}
.navguide__fam:hover{background:rgba(255,255,255,.07)}
.navguide__fam[aria-current="page"]{background:rgba(235,112,45,.14)}
.navguide__fam b{font-size:.92rem;font-weight:600;color:#fff}
.navguide__serie{font-size:.78rem;font-weight:600;color:var(--signal)}
.navguide__koder{
  grid-column:1/-1;font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;
  color:var(--wire-dark);
}
.navguide__all{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.88rem;font-weight:600;color:#fff;
}
.navguide__all .ico{width:16px;height:16px;color:var(--signal);transition:transform .22s var(--ease)}
.navguide__all:hover .ico{transform:translateX(3px)}
.navguide__guide{margin-top:0;border-top:0;padding-top:4px;font-weight:500;color:#D9DDDF}
.nav__mobiletools{display:none;align-items:center;gap:10px}

/* --- sök ----------------------------------------------------------- */
/* Knappen i menyn har samma ram som språkknappen. Rutan byggs av js/main.js. */
.sokknapp{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:32px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  background:none;color:#fff;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.sokknapp:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.sokknapp .ico{width:16px;height:16px}
.nav__links .sokknapp{margin-left:4px}
/* I den breda menyn bär bara storleksguiden och offertknappen ram. Sök och språk är
   tysta ikonknappar som tänds vid hover, så raden läser som två verktyg, inte fyra
   lådor. Måtten är desamma, så brytpunkten vid 1160 px står sig. */
.nav__links .sokknapp,.nav__links .lang{border-color:transparent;color:#D9DDDF}
.nav__links .sokknapp:hover,.nav__links .lang:hover{border-color:transparent;background:rgba(255,255,255,.09);color:#fff}
.nav__links .sokknapp + .lang{margin-left:calc(2px - var(--nav-gap))}
.nav__mobiletools .sokknapp{height:38px;width:42px}
.sok{
  width:min(640px,calc(100% - 32px));max-height:min(78vh,720px);margin:10vh auto auto;padding:0;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
  box-shadow:0 24px 64px rgba(0,0,0,.32);overflow:hidden;
}
.sok[open]{display:flex;flex-direction:column}
.sok::backdrop{background:rgba(16,18,20,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sok__bar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--line)}
.sok__ico{width:20px;height:20px;flex:none;color:var(--signal-deep)}
.sok__bar input{
  flex:1;min-width:0;height:44px;border:0;background:none;outline:none;
  font:inherit;font-size:1.05rem;color:var(--ink);
}
.sok__bar input::-webkit-search-cancel-button{display:none}
.sok__stang{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r);
  background:none;color:var(--muted);cursor:pointer;
}
.sok__stang:hover{background:var(--zinc);color:var(--ink)}
.sok__stang .ico{width:18px;height:18px}
.sok__res{overflow-y:auto;padding:8px 8px 12px;overscroll-behavior:contain}
.sok__res ul{list-style:none;margin:0;padding:0}
.sok__res a{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r);transition:background .15s var(--ease)}
.sok__res a:hover,.sok__res a:focus-visible{background:var(--zinc);outline-offset:-2px}
.sok__res b{font-size:.95rem;font-weight:600;color:var(--ink)}
.sok__res a span{font-size:.84rem;line-height:1.55;color:var(--muted)}
.sok__rubrik{margin:6px 12px 4px;font-size:.78rem;font-weight:600;color:var(--signal-deep)}
.sok__tips{margin:8px 12px 10px;font-size:.9rem;color:var(--muted)}
.sok__res .sok__kod{font-family:var(--mono);font-size:.84em;font-weight:600;color:var(--signal-deep)}
.menu-btn{
  width:44px;height:40px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);background:transparent;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.menu-btn span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav__mobile{display:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(20,22,24,.98);color:#fff}
.nav__mobile.is-open{display:block;animation:menuOpen .24s var(--ease)}
.nav__mobile{max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
@keyframes menuOpen{from{opacity:0;transform:translateY(-8px)}}
.navguide__panel:not([hidden]){animation:guideOpen .24s var(--ease)}
@keyframes guideOpen{from{opacity:0;transform:translate(-50%,-8px)}}
.nav__mobile a{
  display:block;padding:15px var(--gut);border-bottom:1px solid rgba(255,255,255,.09);
  font-size:1rem;font-weight:500;
}
.nav__mobile a:last-child{border-bottom:0;color:var(--signal)}
/* Familjerna indragna under guiden, i mindre grad: nio rader till utan att
   menyn läser som nio jämbördiga sidor. */
.nav__mobile .mobfam{
  display:flex;align-items:baseline;gap:10px;
  padding:11px var(--gut) 11px calc(var(--gut) + 16px);
  font-size:.9rem;font-weight:400;color:#D9DDDF;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__mobile .mobfam[aria-current="page"]{color:#fff;box-shadow:inset 2px 0 0 var(--signal)}
.nav__mobile .mobfam span{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--wire-dark)}
.nav__mobile .mobfam--guide{color:#fff;font-weight:500}

/* --- hero ------------------------------------------------------ */
.hero{position:relative;background:var(--graphite);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,18,20,.96) 0%,rgba(16,18,20,.83) 35%,rgba(16,18,20,.26) 64%,rgba(16,18,20,.06) 100%);
}
.hero::after{ /* varmt ljus från produktsidan */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(66% 68% at 85% 30%,rgba(235,112,45,.18),transparent 64%);
}

/* Ögla, presslås och korsande vajertrådar. Väven förlängs och smalnar kring kabeln. */
.hero__weave{position:absolute;left:calc(50% + 60px);top:50%;width:min(57vw,800px);height:auto;transform:translateY(-50%);pointer-events:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.3));mask-image:linear-gradient(90deg,#000 82%,transparent)}
.hero__weave path{fill:none;stroke-linecap:round}
.sock__wire{stroke:#c2ced4;stroke-width:1.7;stroke-linejoin:round;opacity:.85}
.sock__wire--back{stroke:#84939d;opacity:.6}
.sock__wire-detail{stroke:#a4b3bc;stroke-width:.8;opacity:.6}
.sock__eye{stroke:url(#sockSteel);stroke-width:6}
.sock__eye-detail{stroke:#46535c;stroke-width:6;stroke-dasharray:1 4;opacity:.65}
.sock__grip{transform-origin:620px 250px;animation:sockGrip 9s var(--ease) 1s infinite}
@keyframes sockGrip{
  0%,15%,100%{transform:scale(1,1)}
  40%,70%{transform:scale(1.035,.88)}
}
@media(max-width:1040px){
  .hero__weave{left:48%;width:75vw;opacity:.48}
}
@media(max-width:640px){
  .hero__weave{left:34%;top:35%;width:110vw;opacity:.22}
}

.hero__inner{position:relative;z-index:2;padding-block:clamp(64px,9vw,128px);max-width:calc(var(--wrap))}
.hero h1{max-width:15ch}
.hero .lead{max-width:54ch;margin-top:22px}
@keyframes heroRise{from{opacity:0;transform:translateY(14px)}}
.hero .kicker{animation:heroRise .5s var(--ease) both}
.hero h1{animation:heroRise .65s var(--ease) .08s both}
.hero .lead{animation:heroRise .6s var(--ease) .16s both}
.hero .actions{animation:heroRise .6s var(--ease) .24s both}
.hero__spec{animation:heroRise .6s var(--ease) .32s both}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__spec{
  display:flex;flex-wrap:wrap;gap:6px 0;margin:30px 0 0;
  font-size:.88rem;font-weight:500;color:var(--wire-dark);
}
.hero__spec span + span::before{content:"·";margin:0 12px;color:var(--signal)}

/* --- i korthet (datastripen) ---------------------------------- */
.strip{background:var(--graphite-2);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.strip__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.strip__cell{position:relative;overflow:hidden;padding:26px 0;padding-right:28px}
.strip__cell + .strip__cell{border-left:1px solid var(--line-dark);padding-left:28px}
.strip__cell b{
  display:block;font-family:var(--display);font-weight:800;font-stretch:125%;
  font-size:clamp(1.45rem,2.4vw,2.1rem);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.strip__cell > span{display:block;margin-top:8px;font-size:.88rem;color:var(--wire-dark);line-height:1.45}

/* --- sektionshuvud --------------------------------------------- */
.head{display:grid;grid-template-columns:1fr .85fr;gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.head .lead{margin-top:0}

/* --- produktkort ----------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.card:focus-within{border-color:var(--signal-deep);outline:2px solid var(--signal-deep);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:#AAB1AF;box-shadow:0 12px 28px rgba(16,18,20,.08);transform:translateY(-2px)}
  .card:hover .card__img{transform:scale(1.035)}
  .card--wide:hover .card__media::after{opacity:.76;background:linear-gradient(180deg,rgba(16,18,20,.02) 35%,rgba(16,18,20,.34) 100%)}
}
.card__media{position:relative;overflow:hidden;background:var(--photo)}
.card--wide .card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 46%,rgba(16,18,20,.2) 100%);opacity:.46;transition:opacity .35s var(--ease),background .35s var(--ease)}
.card--wide:focus-within .card__media::after{opacity:.76;background:linear-gradient(180deg,rgba(16,18,20,.02) 35%,rgba(16,18,20,.34) 100%)}
.card__img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform .55s var(--ease)}
/* offshore först, över hela raden: foto till vänster, text till höger */
.card--wide{grid-column:1/-1;flex-direction:row}
.card--wide .card__media{flex:0 0 50%}
.card--wide .card__img{height:100%;min-height:230px;aspect-ratio:auto}
.card--wide .card__body{justify-content:center;padding:clamp(22px,3vw,40px)}
.card--wide .card__link{margin-top:0}
.card__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.card h2,.card h3{font-size:1.15rem;margin:0 0 6px;hyphens:auto;overflow-wrap:anywhere}
.card h2{font-family:var(--display);font-weight:680;font-stretch:115%;letter-spacing:-.02em}
.card__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px;
}
.card__serie{font-size:.82rem;font-weight:600;color:var(--signal-deep)}
.card__codes{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--wire)}
.card__body > p:not(.card__meta){margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.card__link{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;
  font-size:.9rem;font-weight:600;color:var(--ink);
}
.card__link::after{content:"";position:absolute;inset:0}
.card__link .ico{width:16px;height:16px;color:var(--signal-deep);transition:transform .22s var(--ease)}
.card:hover .card__link .ico{transform:translateX(3px)}


/* --- varning ----------------------------------------------------- */
.warn{
  display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--signal);border-radius:var(--r);padding:14px 18px;margin:0 0 16px;
}
.warn__ico{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--signal-deep);
}
.warn__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.warn p{margin:0;font-size:.95rem;line-height:1.5;color:var(--text)}
.warn strong{color:var(--ink)}
.warn--dark{background:var(--graphite-2);border-color:var(--graphite-3);color:#fff}
.warn--dark p{color:#C3C9CD}
.warn--dark strong{color:#fff}
.warn--dark .warn__ico{border-color:var(--line-dark);color:var(--signal)}

/* --- teknisk information ---------------------------------------- */
.teknik{background:var(--zinc-2);border-top:1px solid var(--line)}
.teknik__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start}
.teknik__col{display:grid;gap:24px;min-width:0}
.tpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.6vw,26px);margin:0}
.tpanel__label{font-size:.86rem;font-weight:600;color:var(--signal-deep);margin:0 0 14px}
.tpanel img{margin-inline:auto;height:auto}
.tpanel__text{margin:14px 0 0;font-size:.93rem;line-height:1.6;color:var(--muted)}
.tpanel__text--top{margin:-6px 0 14px}
.tpanel__row{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:center}
.ttable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.ttable th,.ttable td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.ttable th{
  font-family:var(--body);font-weight:600;font-size:.76rem;
  color:var(--wire);border-bottom:1px solid var(--wire);
}
.ttable tr:last-child td{border-bottom:0}
.ttable td:first-child,.ttable th:first-child{text-align:left;color:var(--signal-deep);font-weight:600}
.bsnote{margin-top:16px;background:var(--graphite);color:#fff;border-radius:var(--r);padding:clamp(20px,3vw,30px)}
.bsnote .tpanel__label{color:var(--signal)}
.bsnote__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.bsnote__grid > p{margin:0;font-size:.93rem;line-height:1.62;color:#C3C9CD}
.bsnote__list{list-style:none;margin:0;padding:0}
.bsnote__list li{
  display:flex;gap:12px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid var(--line-dark);font-size:.9rem;line-height:1.55;color:#E2E5E7;
}
.bsnote__list li:last-child{border-bottom:0}
.bsnote__list li::before{content:"";flex:0 0 6px;height:6px;background:var(--signal);margin-top:.55em}
.bsnote .btn{margin-top:22px}
.bsnote__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.bsnote__cta .btn{margin-top:0}

/* --- tillverkning (flätfiguren) ----------------------------------- */
.process{background:var(--graphite);color:#fff;--bfdur:9.6s;overflow:hidden}
.braidfig{display:block;width:100%;height:auto;margin-bottom:26px;animation:bfCycle var(--bfdur) linear infinite}
.braidfig path{fill:none}
.braidfig__scene{animation:bfTug var(--bfdur) var(--ease) infinite}
.bf-draw{stroke-dasharray:1;stroke-dashoffset:1}
.bf-cable{stroke:url(#bfKabel);stroke-width:26;stroke-linecap:round;animation:bfCable var(--bfdur) linear infinite}
.bf-far{stroke:#6E767B;stroke-width:2.4;stroke-linecap:round}
.bf-near{stroke:#D6DBDD;stroke-width:2.6;stroke-linecap:round}
.bf-w1{animation:bfW1 var(--bfdur) linear infinite}
.bf-w2{animation:bfW2 var(--bfdur) linear infinite}
.bf-w3{animation:bfW3 var(--bfdur) linear infinite}
.bf-loop{stroke:#B9C0C4;stroke-width:7;stroke-linecap:round;animation:bfLoop var(--bfdur) linear infinite}
.bf-twist{stroke:#4A5257;stroke-width:7;stroke-dasharray:2.5 9.5;opacity:0;animation:bfTwist var(--bfdur) linear infinite}
.bf-ferrule{transform-box:fill-box;transform-origin:center;animation:bfFerrule var(--bfdur) var(--ease) infinite}
.bf-ferrule rect{fill:#B7BEC2;stroke:#798086;stroke-width:1.5}
.bf-ferrule line{stroke:#8A9296;stroke-width:2}
.bf-ferrule text{font:600 10.5px var(--mono);letter-spacing:.12em;fill:#23282B}
.motion-paused,.motion-paused *{animation-play-state:paused!important}
@keyframes bfCycle{0%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes bfTug{0%,80%,88%,100%{transform:translateX(0)}83%{transform:translateX(8px)}85.5%{transform:translateX(2px)}}
@keyframes bfCable{0%,2%{stroke-dashoffset:1;opacity:0}2.6%{opacity:1}13%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes bfW1{0%,9%{stroke-dashoffset:1;opacity:0}9.6%{opacity:1}50%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes bfW2{0%,12%{stroke-dashoffset:1;opacity:0}12.6%{opacity:1}54%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes bfW3{0%,15%{stroke-dashoffset:1;opacity:0}15.6%{opacity:1}58%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes bfLoop{0%,60%{stroke-dashoffset:1;opacity:0}60.6%{opacity:1}76%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes bfTwist{0%,76%{opacity:0}82%,100%{opacity:.5}}
@keyframes bfFerrule{0%,56%{opacity:0;transform:scale(.7)}62%,100%{opacity:1;transform:scale(1)}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.step{background:var(--graphite);padding:26px 24px 30px;transition:background .35s var(--ease)}
.step:hover{background:var(--graphite-2)}
.step__ico,.service__ico{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 44px;
  border:1px solid var(--line-dark);color:var(--signal);
}
.step__ico svg,.service__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.step__ico{margin-bottom:18px}
.step h3{font-size:1.08rem;color:#fff;margin-bottom:8px}
.step p{margin:0;color:#AEB5B9;font-size:.9rem;line-height:1.58}

/* --- tjänster ---------------------------------------------------- */
.tjanster{background:var(--zinc-2);border-block:1px solid var(--line)}
.tjanster__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.service{
  display:flex;gap:clamp(16px,2.6vw,24px);align-items:flex-start;padding:clamp(18px,2.6vw,24px) 0;
  border-bottom:1px solid var(--line);
}
.service__ico{border-color:var(--line);color:var(--signal-deep);background:#fff}
.service h3{font-size:1.1rem;margin:9px 0 6px}
.service p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.panel--tjanster{padding:10px;align-self:stretch;display:flex;flex-direction:column;margin:0}
.panel__img--portrait{flex:1;min-height:420px;aspect-ratio:auto;object-fit:cover}
/* Filmen från dragbänken är stående (720x1044). På tjänstesidan hålls bredden nere så
   att hela bilden ryms på skärmen medan den spelas; i startsidans lista är den mindre,
   så att avsnittet inte blir för högt bredvid tjänstebilden. */
.film{margin:22px 0 20px;max-width:360px;background:var(--graphite);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.film__video{display:block;width:100%;height:auto}
.film--service{max-width:240px;margin:16px 0 0}
.usecases{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:clamp(24px,3.6vw,40px) 0 0}
.usecases__label{font-size:.86rem;font-weight:600;color:var(--wire);margin-right:6px}
.usecases span:not(.usecases__label){
  font-size:.84rem;background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:7px 13px;color:var(--text);
}

/* --- historien --------------------------------------------------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,68px);align-items:center}
.panel{position:relative;border:1px solid var(--line);background:#fff;padding:10px}
.panel__img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(.2) contrast(1.04)}
.panel__img--om{aspect-ratio:4/3}
.facts{list-style:none;padding:0;margin:26px 0 30px;border-top:1px solid var(--line)}
.facts li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts li::before{content:"";flex:0 0 6px;height:6px;background:var(--signal);margin-top:.6em}

/* --- villkor ----------------------------------------------------- */
.terms{border-top:1px solid var(--line)}
.term{border-bottom:1px solid var(--line)}
.term summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 2px;font-family:var(--display);font-weight:650;font-stretch:112%;
  font-size:1.06rem;letter-spacing:-.015em;
}
.term summary::-webkit-details-marker{display:none}
.term summary::after{
  content:"+";font-family:var(--mono);font-weight:400;font-size:1.15rem;color:var(--signal-deep);
  transition:transform .25s var(--ease);line-height:1;
}
.term[open] summary::after{transform:rotate(45deg)}
.term__body{padding:0 2px 22px;max-width:70ch}
.term__body p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.62}
.term__body ul{list-style:none;margin:0;padding:0}
.term__body li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;color:var(--muted);font-size:.94rem;line-height:1.6}
.term__body li::before{content:"";flex:0 0 6px;height:6px;background:var(--signal);margin-top:.6em}
@keyframes termOpen{from{opacity:0;transform:translateY(-5px)}}
.term[open] .term__body{animation:termOpen .35s var(--ease)}

/* --- kontakt ---------------------------------------------------- */
.contact{background:var(--zinc-2)}
/* minmax(0,...) och inte bara fr: annars blir spårets minimum min-content, och
   kontaktpanelens knapprad sköt ut den engelska tacksidan 23 px utanför skärmen. */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,36px);align-items:start}
.pane{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.pane h3{font-size:1.2rem;margin-bottom:18px}
.dl{margin:0;display:grid;gap:16px}
.dl dt{font-size:.8rem;font-weight:600;color:var(--wire)}
.dl dd{margin:3px 0 0;font-size:.98rem;line-height:1.55}
.dl a{border-bottom:1px solid var(--signal);padding-bottom:1px}
.dl a:hover{color:var(--signal-deep)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:.8rem;font-weight:600;color:var(--wire)}
.field input,.field textarea{
  width:100%;background:var(--zinc);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;font-size:.96rem;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field textarea{min-height:126px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--signal-deep);outline-offset:2px;border-color:var(--signal-deep);background:#fff}
.btn:disabled{cursor:wait;opacity:.65}
.form__note{margin:12px 0 0;font-size:.82rem;color:var(--wire)}
.form__note.ok{color:var(--ink);font-weight:600}
.form__note.fel{color:#B3261E}
.form__modell{margin:0 0 12px;font-size:.85rem;font-weight:600;color:var(--signal-deep)}
/* Kontaktavsnittet på undersidorna: enspaltigt och smalare än startsidornas. */
.contact--sub .wrap{width:min(860px,100%)}
.contact--sub .head{grid-template-columns:1fr}
.contact--sub .head .lead{margin-top:14px}
.contact__direct{margin:18px 0 0;font-size:.9rem;color:var(--wire);text-align:center}
.contact__direct a{border-bottom:1px solid var(--signal);padding-bottom:1px}
.contact__direct a:hover{color:var(--signal-deep)}
/* Offertlänken under varje modell. Inte .card__link: den lägger en osynlig
   länkyta över hela kortet via ::after och skulle täcka modellartikeln. */
.model__cta{margin:14px 0 0}
.model__cta a{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--signal);padding-bottom:2px}
.model__cta a .ico{width:16px;height:16px;color:var(--signal-deep);transition:transform .22s var(--ease)}
.model__cta a:hover .ico{transform:translateX(3px)}

/* --- sidfot ------------------------------------------------------ */
/* Kundens upplägg (2026-09-24): loggan och kontakten till vänster, sidlänkarna utan
   rubrik i mitten, offertknappen till höger. Länkarna står i två spalter så att
   mitten blir lika hög som kontakten, och Facebook och Instagram står under
   kontakten med ikoner i tunna ringar, som på Hagfors Måleri. */
.footer{background:var(--graphite);color:#B9C0C4;padding:clamp(56px,7vw,96px) 0 24px}
.footer__grid{display:grid;grid-template-columns:1.25fr 1.15fr .8fr;gap:clamp(28px,4vw,52px)}
.footer__grid > *{min-width:0}
.footer__contact{font-style:normal;margin-top:22px}
.footer__company{display:block;font-size:.93rem;font-weight:500;color:#fff;padding:5px 0}
.footer__links{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);
  grid-template-columns:repeat(2,max-content);column-gap:clamp(28px,4vw,56px);align-content:start;
}
.footer__cta{justify-self:end}
.footer__cta .btn{white-space:nowrap}
.footer__socials{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.footer a:not(.albit-kredit):not(.btn){display:block;width:fit-content;max-width:100%;padding:6px 0;font-size:.93rem;color:#B9C0C4;overflow-wrap:anywhere;transition:color .2s var(--ease)}
/* Profilerna: ikonen i en tunn ring, som sajtens ikoner i 44 px cirkel fast i
   sidfotens skala. Ringen tänds i signalorange vid hover och fokus. */
.footer .footer__socials a.footer__social{display:inline-flex;align-items:center;gap:11px;padding:0}
.footer__social-ico{
  display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.footer__social-ico .ico{width:16px;height:16px}
.footer a.footer__social:hover .footer__social-ico,.footer a.footer__social:focus-visible .footer__social-ico{border-color:var(--signal);background:var(--signal-soft);color:var(--signal-lift)}
.footer a:not(.albit-kredit):not(.btn):hover,.footer a:not(.albit-kredit):not(.btn):focus-visible{color:#fff}
.copy{
  margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-dark);
  font-size:.82rem;color:#A2AAAF;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;justify-content:space-between;
}
.copy a:not(.albit-kredit){display:inline;padding:0;color:#B9C0C4;border-bottom:1px solid transparent}
.copy .mono{white-space:nowrap}

/* AlbIT-kreditrad: identisk markup, text och rörelse på alla sajter AlbIT byggt.
   Ordmärket är en 2,6 kB PNG sist i sidfoten, laddad lazy, så den konkurrerar
   aldrig med sidans eget innehåll. Hovern är avgränsad till pekdon som faktiskt
   HAR hover: på touch finns inget sätt att lämna tillståndet och raden hade
   blivit stående upplyst efter en tapp. Svepet animerar bara transform (GPU) och
   saknar transition i viloläget, så det hoppar tillbaka utanför elementet när
   musen lämnar i stället för att sopa baklänges. Rullar .copy a inte över den
   här: sidfotens länkregel sätter border-bottom, så raden står med egen färg. */
.albit-kredit{display:inline-flex;align-items:center;gap:.5em;color:inherit;text-decoration:none;opacity:.72;border-bottom:0}
.albit-kredit img{display:block;height:12px;width:auto}
.albit-kredit .ak-arr{display:inline-block;font-size:11px;line-height:1}
@media (hover:hover) and (pointer:fine){
  .albit-kredit{position:relative;overflow:hidden;transition:opacity .35s ease}
  .albit-kredit::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(201,162,39,.5),transparent);transform:translateX(-180%) skewX(-18deg);pointer-events:none}
  .albit-kredit:hover,.albit-kredit:focus-visible{opacity:1}
  .albit-kredit:hover::after,.albit-kredit:focus-visible::after{transform:translateX(440%) skewX(-18deg);transition:transform .7s ease}
  .albit-kredit:hover .ak-arr,.albit-kredit:focus-visible .ak-arr{transform:translate(2px,-2px);transition:transform .25s ease}
}
/* Gemensam återkoppling för muspekare, med samma färger vid tangentbordsfokus. */
.term summary,.dl a,.contact__direct a,.model__cta a,.footer a:not(.albit-kredit):not(.btn){transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),text-decoration-color .22s var(--ease)}
.term summary:focus-visible{background:var(--zinc-2)}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{transform:translateY(-2px)}
  .btn:not(:disabled):active{transform:translateY(0)}
  .card:hover{border-color:var(--signal-deep);box-shadow:0 14px 30px rgba(16,18,20,.12);transform:translateY(-4px)}
  .term summary:hover{background:var(--zinc-2);color:var(--signal-deep)}
  .field input:not(:focus):hover,.field textarea:not(:focus):hover{border-color:var(--wire);background:#fff}
  .model__cta a:hover{color:var(--signal-deep);border-color:currentColor}
  .footer__links a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--signal)}
  .jump a:hover{border-color:var(--signal-deep);color:var(--signal-deep)}
}

@media (prefers-reduced-motion:reduce){
  .albit-kredit,.albit-kredit .ak-arr{transition:none!important}
  .albit-kredit::after{display:none}
}

/* --- måttsidan --------------------------------------------------- */
.page-head{background:var(--graphite);color:#fff;padding-block:clamp(44px,6vw,76px)}
.page-head .lead{margin-top:18px}
.page-head .warn{margin:26px 0 0;max-width:72ch}
.jump{
  position:sticky;top:var(--nav-h);z-index:40;background:rgba(241,242,241,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.jump ul{list-style:none;margin:0;padding:10px 0;display:flex;flex-wrap:wrap;gap:6px}
/* ankare under den fasta hoppmenyn: två rader pillar på desktop, en scrollande rad på mobil */
.family[id],.model[id]{scroll-margin-top:calc(var(--nav-h) + 104px)}
.jump a{
  display:inline-block;padding:7px 12px;border-radius:100px;border:1px solid transparent;
  font-size:.86rem;font-weight:500;color:var(--text);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.jump a:hover{border-color:var(--line);background:#fff}
.jump a[aria-current]{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.jump a b{font-family:var(--mono);font-weight:600;margin-right:6px;color:var(--signal-deep)}
.jump a[aria-current] b{color:var(--signal)}
.family{padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.family:first-of-type{border-top:0}
.family__head{display:grid;grid-template-columns:1fr .85fr;gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:22px}
.family__head .lead{margin-top:0}
.family__code{
  display:inline-block;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:var(--signal-deep);border:1px solid var(--line);background:#fff;border-radius:var(--r);
  padding:4px 8px;margin-bottom:12px;
}
.model{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.5vw,36px);margin-top:24px}
.model__head{margin-bottom:12px}
.model__code{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--signal-deep);letter-spacing:.02em}
.model h2{font-family:var(--display);font-weight:680;font-stretch:115%;letter-spacing:-.02em;margin:0;font-size:1.22rem}
.model__spec{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.model__spec li{font-size:.82rem;color:var(--text);background:var(--zinc);border:1px solid var(--line);border-radius:100px;padding:5px 11px}
.model__desc{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6;max-width:72ch}
.model__photo{margin:18px 0 0;background:var(--photo);border:1px solid var(--line);overflow:hidden}
.model__photo img{width:100%;height:auto}
.mtable{margin-top:18px}
.mtable__label{font-size:.86rem;font-weight:600;color:var(--signal-deep);margin:0 0 8px}
.mtable__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-color:var(--wire-dark) var(--zinc);scrollbar-width:thin}
.ttable tbody tr{transition:background .18s var(--ease)}
.ttable tbody tr:hover{background:var(--zinc)}
.ttable--models{min-width:640px}
.ttable--models td:first-child{font-weight:600}
.model__notes{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.86rem;color:var(--muted)}
.model__notes li{display:flex;gap:8px;align-items:baseline}
.model__notes li::before{content:"";flex:0 0 5px;height:5px;background:var(--signal);transform:translateY(-2px)}
.model__warn{display:flex;gap:8px;align-items:center;margin:16px 0 0;font-size:.86rem;font-weight:500;color:var(--signal-deep)}
.model__warn .ico{width:16px;height:16px}
.matt-notes{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.matt-notes .tpanel p{margin:0;font-size:.93rem;line-height:1.6;color:var(--muted)}
.matt-notes .tpanel ul{list-style:none;margin:0;padding:0}
.matt-notes .tpanel li{display:flex;gap:12px;align-items:flex-start;padding:6px 0;font-size:.93rem;color:var(--muted)}
.matt-notes .tpanel li::before{content:"";flex:0 0 6px;height:6px;background:var(--signal);margin-top:.6em}

/* --- brödsmulor, familjeöversikt och bläddring på måttsidorna ----- */
.crumbs{display:flex;flex-wrap:wrap;margin:0 0 14px;font-size:.86rem;color:var(--wire-dark)}
.crumbs a{color:#D9DDDF;transition:color .2s var(--ease)}
.crumbs a:hover{color:#fff}
.crumbs span + span::before{content:"/";margin:0 8px;color:var(--wire)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,44px)}
.pager a{
  display:flex;align-items:center;gap:12px;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.pager a:hover{border-color:#BFC4C2;transform:translateY(-2px)}
.pager a > div{display:flex;flex-direction:column;gap:3px}
.pager a span{font-size:.8rem;color:var(--wire)}
.pager a b{font-family:var(--display);font-weight:680;font-stretch:115%;letter-spacing:-.02em;font-size:1.05rem}
.pager a .ico{color:var(--signal-deep);width:20px;height:20px}
.pager .pager--next{justify-content:flex-end;text-align:right}
.pager .pager--next > div{align-items:flex-end}
.pager .pager--next:first-child{grid-column:2} /* första familjen saknar föregående: nästa stannar till höger */
.pager .pager--all{grid-column:1/-1;justify-content:center}
.overview .cards{margin-top:0}
.family .lead + .btn{margin-top:22px} /* offshore: förklaring följd av offertknapp */
/* offshore: utförandena utan tabeller, grundutförande och systrumpa parvis */
.utf{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.5vw,36px);margin-bottom:clamp(12px,2vw,20px)}
.utf > p{margin:0;font-size:.95rem;color:var(--text)}
.utf__lista{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,48px)}
.utf__lista li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--text)}
.utf__lista b{flex:0 0 3.4em;font-family:var(--mono);font-weight:600;color:var(--signal-deep)}
@media (max-width:640px){.utf__lista{grid-template-columns:minmax(0,1fr)}}
/* kundens foton på kategorisidorna (offshore och aramid), tagna på matta: hela bredden */
.famphoto{margin:clamp(20px,3vw,32px) 0;background:var(--zinc);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.famphoto:first-child{margin-top:0}
.famphoto img{display:block;width:100%;height:auto}
.overview .card__codes{white-space:normal}

/* --- guidesidan -------------------------------------------------- */
/* Innehållsförteckningen följer med vid scroll på breda skärmar och döljs när
   spalten blir för smal; avsnitten har egna ankare och rubriker. */
.guide__grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.guide__toc{position:sticky;top:calc(var(--nav-h) + 28px)}
.guide__toclabel{margin:0 0 12px;font-size:.8rem;font-weight:600;color:var(--signal-deep)}
.guide__toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.guide__toc a{
  display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;
  font-size:.9rem;line-height:1.35;color:var(--muted);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.guide__toc a:hover{color:var(--ink);border-left-color:var(--signal)}
.guide__body{max-width:76ch}
.guide__del + .guide__del{margin-top:clamp(44px,6vw,68px);padding-top:clamp(44px,6vw,68px);border-top:1px solid var(--line)}
.guide__del h2{
  margin:0 0 18px;font-family:var(--display);font-weight:760;font-stretch:118%;
  letter-spacing:-.025em;line-height:1.1;font-size:clamp(1.4rem,2.3vw,1.85rem);text-wrap:balance;
}
.guide__del > p{margin:0 0 14px;line-height:1.72;color:var(--text)}
.guide__del .facts{margin:18px 0 22px}
.guide__del > .btn{margin-top:10px}
.guide__exempel{
  margin:20px 0;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  font-size:.96rem;line-height:1.65;color:var(--ink);
}
.guide__uppgifter{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.guide__uppgifter a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:2px;align-items:center;
  padding:16px 4px;border-bottom:1px solid var(--line);transition:background .2s var(--ease);
}
.guide__uppg{font-family:var(--display);font-weight:680;font-stretch:112%;letter-spacing:-.01em;font-size:1.02rem;color:var(--ink)}
.guide__kat{grid-column:1;font-size:.8rem;font-weight:600;color:var(--signal-deep)}
.guide__txt{grid-column:1;font-size:.92rem;line-height:1.55;color:var(--muted)}
.guide__uppgifter .ico{grid-column:2;grid-row:1/span 3;width:18px;height:18px;color:var(--signal-deep);transition:transform .22s var(--ease)}
.guide__koder{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:12px}
.guide__koder li{display:flex;gap:16px;align-items:flex-start}
.guide__koder p{margin:0;line-height:1.65;color:var(--text)}
.guide__kod{
  flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-family:var(--mono);font-weight:600;color:var(--signal-deep);
}
.guide__del .mtable{margin:18px 0 12px}
.ttable--guide td:nth-child(2),.ttable--guide th:nth-child(2){text-align:left;font-family:var(--body);color:var(--text)}
.ttable--guide td:first-child a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.guide__not{font-size:.88rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .guide__uppgifter a:hover{background:#fff}
  .guide__uppgifter a:hover .ico{transform:translateX(3px)}
  .ttable--guide td:first-child a:hover{border-bottom-color:currentColor}
}
@media (max-width:1040px){
  .guide__grid{grid-template-columns:minmax(0,1fr)}
  .guide__toc{display:none}
}

/* --- reveal ------------------------------------------------------ */
.reveal{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.is-pending{opacity:0;transform:translateY(12px)}
.reveal.is-visible,.reveal:focus-within{opacity:1;transform:none}
.usecases span:not(.usecases__label){opacity:1;transform:none}

/* --- responsivt --------------------------------------------------- */
/* Menyn viks vid 1160 px: guidens ram och sökknappen tar plats, och den
   engelska menyn behöver 1148 px även med 14 px mellanrum (uppmätt 2026-09-25).
   Mellan 1160 och 1180 dras mellanrummet ihop i stället för att någon
   menypunkt kortas eller bryts. */
@media (max-width:1180px){
  .nav__links{--nav-gap:18px}
  html[lang="en"] .nav__links{--nav-gap:14px}
}
@media (max-width:1160px){
  .nav__links{display:none}
  .nav__mobiletools{display:flex}
}

@media (max-width:980px){
  .head,.family__head{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__cta{grid-column:1/-1;justify-self:start}
  .teknik__grid{grid-template-columns:1fr}
  .bsnote__grid{grid-template-columns:1fr}
  .tjanster__grid{grid-template-columns:1fr}
  .panel--tjanster{max-width:520px}
  .matt-notes{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--nav-h:64px}
  body{font-size:15px}
  .brand__logo{height:38px}
  .brand--lg .brand__logo{height:52px}
  .hero__inner{padding-block:44px 48px}
  .brk{display:none}
  h1.display{font-size:clamp(2rem,8.6vw,2.6rem);line-height:1.04}
  h2.display{font-size:1.7rem;line-height:1.08}
  .hero .lead{margin-top:18px}
  .hero__spec{font-size:.82rem;margin-top:24px}
  .hero__spec span + span::before{margin:0 9px}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .actions .btn{padding:13px 10px;font-size:.88rem;min-width:0;white-space:normal;text-align:center}
  .strip__grid{grid-template-columns:repeat(3,1fr)}
  .strip__cell{padding:18px 0;padding-right:12px}
  .strip__cell + .strip__cell{padding-left:12px}
  .strip__cell b{font-size:1.1rem}
  .strip__cell > span{font-size:.74rem;margin-top:6px}
  .cards{gap:10px}
  .card__body{padding:12px 12px 14px}
  .card__body > p:not(.card__meta){display:none}
  .card__meta{margin-bottom:0;flex-direction:column;gap:2px}
  .card__codes{font-size:.68rem}
  .card h2,.card h3{font-size:1rem}
  .card__link{padding-top:12px;font-size:.84rem}
  .warn{align-items:flex-start;padding:12px 14px}
  .warn__ico{flex-basis:34px;width:34px;height:34px}
  /* flätfiguren: förstorad och centrerad så väven, presslåset och öglans början syns hela cykeln */
  .braidfig{width:150%;max-width:none;margin:0 0 18px -25%}
  .steps{grid-template-columns:1fr}
  .step{padding:20px 18px 22px}
  .form__grid{grid-template-columns:1fr}
  .sok{margin-top:12px;max-height:calc(100dvh - 24px)}
  .copy{flex-direction:column;gap:6px}
  .copy{align-items:flex-start;gap:16px;line-height:1.8}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .footer__cta{grid-row:2;justify-self:stretch}
  .footer__cta .btn{width:100%;justify-content:center}
  .footer__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;padding-top:28px;border-top:1px solid var(--line-dark)}
  .footer a:not(.albit-kredit):not(.btn){min-height:44px;display:flex;align-items:center}
  .footer .footer__socials a.footer__social{display:inline-flex;min-height:44px}
  .card--wide{flex-direction:column}
  .card--wide .card__img{min-height:0;aspect-ratio:2/1}
  .card--wide .card__body{padding:12px 12px 14px}
  .tpanel__row{grid-template-columns:1fr}
  .ttable th,.ttable td{padding:6px 8px}
  .service{gap:14px}
  .usecases span:not(.usecases__label){font-size:.78rem;padding:6px 10px}
  .pager{grid-template-columns:1fr}
  .pager .pager--next{justify-content:flex-start;text-align:left}
  .pager .pager--next:first-child{grid-column:auto} /* en kolumn: ingen tom kolumn före offshores nästa-länk */
  .pager .pager--next > div{align-items:flex-start}
  .jump ul{padding:8px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .jump ul::-webkit-scrollbar{display:none}
  .family[id],.model[id]{scroll-margin-top:calc(var(--nav-h) + 62px)}
  .model{padding:16px 14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal,.reveal.is-pending{opacity:1;transform:none}
  .reveal .step,.reveal .service,.usecases span:not(.usecases__label){opacity:1;transform:none}
  .hero__weave *{animation:none !important}
  .braidfig,.braidfig *{animation:none !important}
  .braidfig .bf-draw{stroke-dasharray:none;stroke-dashoffset:0}
  .bf-twist{opacity:.5}
  .bf-ferrule{opacity:1;transform:none}
}