/* site.v18.css (2026-10-08): v17 + A · Galleri, headern och sidfoten, se blocket v18 sist. */
/* site.v16.css (2026-09-28): v15 + desktoppoleringen på legacy-sidorna, se blocket v16 sist. */
/* site.v15.css (2026-09-15): v14 + ortsraden .foot-ort i sidfoten, se blocket v15 sist. */
/* site.v12.css (2026-09-12): v11 + samtyckesradens höjdreservation, se blocket v12 sist. */
/* site.v11.css (2026-09-09): v10 + sociala ikoner i sidfoten, se blocket v11 sist. */
/* site.v10.css (2026-09-09): v9 + sidfotsknappen .foot-btn, se blocket v10 sist. */
/* AlbIT AB — delad chrome (tokens, nav, footer, knappar, ambient, bastypografi).
   v2 (2026-07-09): omtemad till nya varumärket så kunskap/arbete-sidorna matchar
   huvudsajten och /kampanj — mörk header med 20px-ordmärke, Montserrat/Inter
   (självhostade, samma woff2 som /kampanj), guld (#C9A227) i stället för grönt.
   Filnamnet är bumpat (site.css → site.v2.css): /assets/* serveras immutable.
   v3 (2026-07-11): cursor-ljuset OCH cursor-ringen från huvudsajten porterade
   hit (blocken längst ned) — nytt filnamn av samma immutable-skäl; v2 ligger
   kvar orörd för ev. cachad HTML.
   v4 (2026-07-11, samma dag — v3 hann gå live och är därför immutable-låst):
   guldskenets alfa +20 % på Albins beställning (.16→.192, .07→.084), i takt
   med src/styles/site.css. */

/* ===== Fonter (latin, samma filer som @fontsource) + metrik-matchade fallbacks ===== */
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/montserrat-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/montserrat-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:800;src:url(/assets/fonts/montserrat-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial');ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');ascent-override:85.79%;descent-override:22.25%;line-gap-override:0%;size-adjust:112.84%}

:root{
  --bg:#FAFAF8;--bg2:#F2F1ED;--paper:#FFFFFF;--ink:#111111;--ink-2:#181818;--muted:#6B6B6B;--muted-l:#9A9A96;
  --line:#E4E2DD;--line-d:#2A2A2A;--gold:#C9A227;--gold-soft:#E4C55F;
  --accent:#C9A227;--accent-deep:#8F7419;--accent-soft:#F3ECD6;--accent2:#C9A227;--word:#C9A227;
  --on-dark:#F5F5F3;--r:3px;--spring:cubic-bezier(.34,1.45,.5,1);
  --birdy-bg:#F0E7D0;--birdy-ink:#3A2618;--birdy-accent:#9A5A34;--birdy-copper:#A8552D;
  --loop-bg:#faf8f4;--loop-ink:#0f1419;--loop-accent:#2f6b3d;--loop-soft:#d6e6da;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Inter','Inter Fallback',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--ink);color:var(--bg)}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.01em}
.serif{font:inherit;color:var(--word)}
.edito{font-family:'Inter','Inter Fallback',Georgia,sans-serif;font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-family:'Montserrat','Montserrat Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}

/* page-wide depth field */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden}
.ambient .pgrid{position:absolute;inset:0;background-image:radial-gradient(rgba(17,17,17,.055) 1px,transparent 1px);background-size:30px 30px;opacity:.8;mask-image:linear-gradient(180deg,#000,transparent 30%,transparent 70%,#000)}
.blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.1;mix-blend-mode:multiply}
.b1{width:520px;height:520px;background:var(--gold);top:-180px;left:-140px;animation:drift1 26s ease-in-out infinite}
.b2{width:460px;height:460px;background:var(--gold);top:30%;right:-160px;animation:drift2 30s ease-in-out infinite}
.b3{width:440px;height:440px;background:var(--gold);top:60%;left:-120px;animation:drift3 34s ease-in-out infinite}
.b4{width:400px;height:400px;background:var(--gold);bottom:-160px;right:20%;animation:drift1 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,90px) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-70px) scale(1.1)}}

/* section layering for depth */
section{position:relative}
section.band{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));border-top:1px solid var(--line);border-bottom:1px solid var(--line);backdrop-filter:blur(2px)}
.sec-glow{position:absolute;width:60%;height:70%;top:10%;border-radius:50%;filter:blur(100px);opacity:.4;pointer-events:none;z-index:0}
.sec-glow.left{left:-10%;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.sec-glow.right{right:-10%;background:radial-gradient(circle,rgba(201,162,39,.12),transparent 70%)}
section .wrap{position:relative;z-index:1}
.grain{position:fixed;inset:0;z-index:-1;opacity:.02;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav — samma formspråk som huvudsajtens header (mockup rad ~60): mörk bar,
   20px vitt ordmärke, versala Montserrat-länkar med guldunderstrykning, outline-CTA */
body > nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(13,13,13,.92);border-bottom:1px solid rgba(255,255,255,.08)}
body > nav .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo .logo-img{height:20px;width:auto;display:block}
footer .logo .logo-img{height:auto;width:150px}
.logo .mark{width:34px;height:34px;border-radius:9px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo .mark svg{width:20px;height:20px}
.logo .word{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1}
.logo .word b{font-weight:700;color:#fff}
.logo .word .ab{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.18em;color:var(--muted-l);display:block;margin-top:1px}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{color:#fff;opacity:.75;text-decoration:none;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;transition:opacity .2s;position:relative;padding:4px 0}
.navlinks a:hover{opacity:1}
/* v5: .navlinks a (padding:4px 0) har högre specificitet än .navbtn, så paddingen måste vara !important — annars klämmer ramen åt "Starta projekt"-texten (0 horisontell padding). Matchar huvudsajtens nav .cta. */
.navbtn{border:1px solid #fff;background:transparent;color:#fff!important;padding:9px 18px!important;border-radius:var(--r);opacity:1!important}
.navbtn:hover{background:#fff;color:var(--ink)!important;box-shadow:none}
.navlinks a:not(.navbtn)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--spring)}
.navlinks a:not(.navbtn):hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:720px){.navlinks a:not(.navbtn){display:none}}

/* buttons — huvudsajtens .btn-dark/.btn-ghost */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;padding:16px 30px;border-radius:var(--r);font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent;transition:transform .25s var(--spring),box-shadow .25s}
.btn:hover{transform:translateY(-2px);background:var(--ink);box-shadow:0 12px 34px rgba(17,17,17,.22)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent;box-shadow:none}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* footer (dark) — brand-lockup i huvudsajtens anda: stort ordmärke, guld accenter */
footer{position:relative;padding:96px 0 48px;text-align:center;color:rgba(245,245,243,.72);background:linear-gradient(180deg,#161616,#0d0d0d);overflow:hidden;border-top:1px solid var(--line-d)}
footer .wrap{position:relative;z-index:1;max-width:760px}
.foot-say{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.25;color:var(--on-dark);letter-spacing:-.01em;max-width:20ch;margin:0 auto 14px}
.foot-say em{font-style:italic;color:var(--gold-soft)}
/* v6 (2026-09-02, polering "mindre AI-genererat"): ✦-ornamentet med flankerande
   linjer under idéraden ersatt av huvudsajtens 40px guldlinje; ✦-spannet i
   markupen (alla legacy-sidor + kunskap/template.js) döljs här i stället för
   att skrivas om i 36 filer. Ögonbrynsstrecket bort i kunskap.v3.css. */
.foot-orn{display:block;width:40px;height:1px;background:var(--gold);margin:0 auto 52px}
.foot-orn::before,.foot-orn::after{display:none}
.foot-orn span{display:none}
footer .logo{justify-content:center;align-items:center;flex-direction:row;gap:11px;margin-bottom:14px}
footer .logo .word{color:var(--on-dark);font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:1.35rem;letter-spacing:-.01em}
footer .logo .mark{background:var(--ink-2)}
.foot-tag{font-family:'Inter','Inter Fallback',sans-serif;font-size:1.02rem;color:rgba(245,245,243,.82);margin-bottom:30px}
.foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-bottom:40px;position:static;background:none;backdrop-filter:none;border:none;height:auto}
.foot-nav a{color:rgba(245,245,243,.78)!important;background:none!important;text-decoration:none;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;position:relative;transition:color .2s}
.foot-nav a:hover{color:#fff!important}
.foot-nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--gold);transition:width .25s ease}
.foot-nav a:hover::after{width:100%}
.foot-base{padding-top:30px;border-top:1px solid rgba(245,245,243,.14);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
footer .small{font-size:.68rem;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.55)}
.foot-dot{width:5px;height:5px;border-radius:50%;background:rgba(201,162,39,.7)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* mobilmeny */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px;margin-left:6px;background:none;border:0;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .3s,opacity .3s}
nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.menu-open .nav-burger span:nth-child(2){opacity:0}
nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:720px){
  .nav-burger{display:flex}
  .navlinks{margin-left:auto}
  nav.menu-open .navlinks{position:absolute;top:64px;left:0;right:0;max-height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;background:rgba(13,13,13,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);padding:8px 26px 20px;box-shadow:0 24px 48px rgba(0,0,0,.4)}
  nav.menu-open .navlinks a:not(.navbtn){display:block;padding:13px 2px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
  nav.menu-open .navlinks a:not(.navbtn)::after{display:none}
  nav.menu-open .navlinks .navbtn{margin-top:14px;text-align:center}
}

/* ===== Cursor-ljus (2026-07-11) — porterat från huvudsajten ===== */
/* Samma tvålagersglob som huvudsajten (src/styles/site.css + glow.js, Albins
   beställning 2026-07-10), utrullad på legacy-sidorna via /assets/glow.v1.js
   och två element överst i <body>. Gradienterna är kopierade verbatim.
   — #glow-l: varmvitt ljus i mix-blend-mode:screen ÖVER innehållet — osynligt
     mot ljus botten, lyfter mörka ytor (footern, mobilmenyn). z 55 håller det
     UNDER nav-baren (z 60), exakt som mot huvudsajtens header (också z 60).
   — #glow-d: guldsken BAKOM innehållet. Huvudsajten lägger det på z 0 under
     .wrap (z 1); här ligger innehållet oformaterat i flödet, så negativt z
     gör jobbet. Elementen står FÖRE .ambient (också z -1) i DOM-ordningen,
     så prickrastret och blobbarna målas ÖVER skenet — samma lagerföljd som
     huvudsajtens papper. /tack/ har egen inline-CSS och bara #glow-l (mörk
     sida utan ljusa ytor). JS:et släcker sig självt vid pointer:coarse och
     prefers-reduced-motion; utan mus förblir opacity 0. */
.glow{position:fixed;left:0;top:0;width:1200px;height:1200px;margin:-600px 0 0 -600px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s ease;will-change:transform}
.glow.on{opacity:1}
/* v9 (2026-09-09): guldstoppet i det vita skenet borta, se site.css. */
#glow-l{z-index:55;background:radial-gradient(circle,rgba(255,241,214,.10),rgba(255,241,214,.05) 32%,transparent 62%);mix-blend-mode:screen}
#glow-d{z-index:-1;background:radial-gradient(circle,rgba(228,197,95,.192),rgba(201,162,39,.084) 34%,transparent 62%)}

/* ===== Custom-cursorn (2026-07-11) — porterad från huvudsajten ===== */
/* Guldpunkt + lerpande ring (mockup.css:328–332 + site.css .on-gaten),
   aktiveras av /assets/cursor.v1.js. Native-pekaren behålls — ringen är
   additiv, precis som på huvudsajten. .hot växer ringen över länkar/knappar/
   fält; produktkortens färgsmitta (.birdy/.ll) och magnetknapparna är
   medvetet EJ porterade — korten finns bara på startsidan och legacy-
   knapparnas hover saknar --tx/--ty-transformen. Utan JS (.on saknas)
   ligger paret gömt; reduced-motion släcker helt. */
#cur,#curring{position:fixed;top:0;left:0;pointer-events:none;z-index:300;border-radius:50%;transform:translate(-50%,-50%);display:none}
#cur{width:7px;height:7px;background:var(--gold)}
#curring{width:34px;height:34px;border:1.5px solid rgba(201,162,39,.55);transition:width .25s,height .25s,border-color .25s,opacity .25s}
#curring.hot{width:56px;height:56px;border-color:var(--gold)}
@media(pointer:fine){#cur,#curring{display:block}}
#cur:not(.on),#curring:not(.on){visibility:hidden}
@media(prefers-reduced-motion:reduce){#cur,#curring{display:none}}

/* ===== v7 (2026-09-07, Albins beställning: alla undersidor i meny och sidfot) =====
   Samma sajtkarta som huvudsajten (src/i18n/sidkarta.json, renderad av
   public/kunskap/sidkarta.js). Rullgardin: .navlinks .has-sub = menylänk med
   chevron + .sub-wrap/.sub med gruppens sidor; öppnas med :hover eller
   :focus-within, ren CSS. .sub-wrap:s padding-top är bryggan från menyraden
   ned till panelen. Posterna i Inter, normalt skiftläge, guldpunkt vid hover.
   Under 720px (burgermenyn) döljs panelerna och bara menylänken visas, så
   mobilmenyn beter sig som förut. Sidfot: .foot-cols är fyra kolumner med
   rubrik + lista; footerns .wrap breddas från 760 till 980 så kolumnerna får
   plats (idéraden och taglinen är fortsatt centrerade); under 840px 2×2.
   .foot-nav-reglerna ovan ligger kvar men träffar inget längre. */
.navlinks .has-sub{position:relative;display:flex;align-items:center}
.navlinks .has-sub>a{padding-right:12px}
.navlinks .has-sub>a:not(.navbtn)::after{width:calc(100% - 12px)}
.navlinks .chev{position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--spring);pointer-events:none}
.navlinks .has-sub:hover .chev,.navlinks .has-sub:focus-within .chev{transform:rotate(180deg)}
.navlinks .sub-wrap{position:absolute;top:100%;left:-14px;padding-top:18px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s var(--spring),transform .22s var(--spring),visibility 0s linear .22s;z-index:5}
.navlinks .has-sub:hover .sub-wrap,.navlinks .has-sub:focus-within .sub-wrap{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.navlinks .sub{background:rgba(13,13,13,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:10px 8px;min-width:230px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.navlinks .sub a{display:block;padding:9px 12px;font-family:'Inter','Inter Fallback',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;opacity:.78;white-space:nowrap;border-radius:6px;transition:opacity .2s,background .2s}
.navlinks .sub a::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 10px 2px 0;opacity:0;transition:opacity .2s}
.navlinks .sub a::after{display:none}
.navlinks .sub a:hover,.navlinks .sub a:focus-visible{opacity:1;background:rgba(255,255,255,.05)}
.navlinks .sub a:hover::before,.navlinks .sub a:focus-visible::before{opacity:1}
/* Burgermenyn upp till 1023px i stället för 720px (samma brytpunkt som
   huvudsajtens header sedan samma dag): med "Analysera din sajt" (var
   "Snabbkoll") och chevronerna mäter menyraden 744px + luft, och wrappen ger
   bara 773px i 901 och 872px i 1000, så raden bröt på två rader. Reglerna
   nedan är v6:s 720-block upprepat för 1023, plus rullgardinernas mobilläge.
   Mellan 1024 och 1200px är luften 18px (v6: 26): 870 av 896px i 1024. */
@media(max-width:1200px){.navlinks{gap:18px}}
@media(max-width:1023px){
  .navlinks a:not(.navbtn){display:none}
  .nav-burger{display:flex}
  .navlinks{margin-left:auto}
  nav.menu-open .navlinks{position:absolute;top:64px;left:0;right:0;max-height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;background:rgba(13,13,13,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);padding:8px 26px 20px;box-shadow:0 24px 48px rgba(0,0,0,.4)}
  nav.menu-open .navlinks a:not(.navbtn){display:block;padding:13px 2px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
  nav.menu-open .navlinks a:not(.navbtn)::after{display:none}
  nav.menu-open .navlinks .navbtn{margin-top:14px;text-align:center}
  .navlinks .has-sub{display:none}
  nav.menu-open .navlinks .has-sub{display:block}
  .navlinks .has-sub>a{padding-right:2px}
  .navlinks .chev,.navlinks .sub-wrap{display:none}
}
footer .wrap{max-width:980px}
.foot-cols{display:grid;grid-template-columns:repeat(4,auto);align-items:start;justify-content:center;gap:28px 48px;margin-bottom:44px;text-align:left}
.foot-col{min-width:0}
.foot-h{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.55);margin:0 0 14px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;justify-items:start}
.foot-cols a{color:rgba(245,245,243,.72);text-decoration:none;font-family:'Inter','Inter Fallback',sans-serif;font-size:14px;font-weight:500;line-height:1.35;position:relative;display:inline-block;padding:2px 0;transition:color .2s}
.foot-cols a:hover{color:#fff}
.foot-cols a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .25s ease}
.foot-cols a:hover::after{width:100%}
@media(max-width:839px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:32px 24px}
}
@media(max-width:420px){
  .foot-cols a{font-size:13.5px}
}

/* ===== v8 (2026-09-08): FEMTE SIDFOTSKOLUMNEN "Analysera din sajt" ========
   Albins beställning: de nio undersidorna under Analysera din sajt ska stå i
   botten också (SEO-syfte). Gruppen granska i sidkarta.json har inte längre
   sidfot:false, så sidkarta.js renderar fem kolumner. Fem kolumner i naturlig
   bredd är 868px på svenska och 937px på engelska (uppmätt): footerns .wrap
   breddas från 980 till 1140 (samma som headerns) och kolumnerna fördelas
   med space-between, gap minst 28px (937 + 4×28 = 1049 i wrappens 1088).
   Från 1120px fem i rad utan att någon etikett bryter (sv + en), 840 till
   1119px tre kolumner i två rader (minmax så etiketterna får bryta), under
   840px två kolumner som i v7. Idéraden och taglinen är fortsatt centrerade.
   v7-reglerna ovan står kvar och skrivs över här. */
footer .wrap{max-width:1140px}
.foot-cols{grid-template-columns:repeat(5,auto);justify-content:space-between;gap:28px 28px}
@media(max-width:1119px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:32px 24px}
}
@media(max-width:839px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== v10 (2026-09-09): SIDFOTSRADEN SOM GRANSKAR-UTGÅNG ==================
   Albins beställning "kom på något nytt i stället för Har du en idé": raden
   säger "Hur mår din hemsida? Kolla på 30 sekunder." och får knappen
   a.foot-btn till granskningssidan under sig (template.js + locales.js för
   kunskap, engångsskript för de 14 arbete-sidorna). Ghost-knapp på mörk
   botten: guldkant, versaler i Montserrat 12px, spärrning .12em, fylls med
   guld vid hover. Guldlinjen (.foot-orn) ligger kvar under knappen.
   Huvudsajten har samma knapp som .f-idea .f-btn i site.css. Ospårad. */
.foot-say{margin-bottom:22px}
.foot-btn{display:inline-block;border:1px solid rgba(201,162,39,.6);border-radius:4px;padding:10px 18px;margin:0 0 26px;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);text-decoration:none;transition:background .25s,border-color .25s,color .25s,transform .25s var(--spring)}
.foot-btn:hover,.foot-btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}

/* v11 (2026-09-09): sociala ikoner i sidfoten, Facebook och Instagram.
   Motsvarigheten på Astro-sidorna heter .f-social och bor i
   src/styles/site.css, håll dem i takt. Legacy-sidfoten är centrerad,
   därav justify-content:center. Legacy-paletten heter variabeln --muted-l
   där mockup.css/Astro-sidan heter den --grey-l — samma värde (#9A9A96),
   så ikonerna ser likadana ut på båda sidfötterna. */
.foot-social{display:flex;justify-content:center;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.foot-social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:var(--muted-l);transition:border-color .2s,color .2s,transform .2s}
.foot-social a:hover,.foot-social a:focus-visible{border-color:var(--gold);color:var(--gold)}
.foot-social a:hover{transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px;display:block}
@media(prefers-reduced-motion:reduce){.foot-social a:hover{transform:none}}
/* v12 (2026-09-12): samtyckesraden reserverar sin höjd FÖRE första målningen.
   Regressionen: samtycke.v4.js mätte radens höjd i JS efter att sidan ritats
   och puttade då ned sidan när raden ritades (CLS 0,124 på mobil, mätt
   2026-09-12). Nu är höjden en konstant här, och head-snutten på varje
   legacy-sida sätter html.samtycke-vantar innan något ritas.
   Konstanterna är uppmätta och MÅSTE vara identiska med kopian i
   src/styles/site.css (Astro-sidorna) — receptet för att mäta om dem står
   där, och test/samtycke-reservation.test.mjs faller om kopiorna driftar. */
:root{--samtycke-h:106px}
@media(max-width:940px){:root{--samtycke-h:126px}}
@media(max-width:835px){:root{--samtycke-h:145px}}
@media(max-width:765px){:root{--samtycke-h:165px}}
@media(max-width:720px){:root{--samtycke-h:87px}}
@media(max-width:640px){:root{--samtycke-h:105px}}
@media(max-width:416px){:root{--samtycke-h:131px}}
@media(max-width:340px){:root{--samtycke-h:149px}}
html.samtycke-vantar body{padding-top:var(--samtycke-h)}
html.samtycke-vantar header{top:var(--samtycke-h)}
/* Legacy-markupen har ingen fast <header>: sidhuvudet är .hub-head/.case-head i
   flödet, så header-regeln ovan gör ingenting här. Den står kvar ordagrant för att
   blocket ska vara identiskt med kopian i src/styles/site.css (Astro-sidornas
   header ÄR fast). De 36 legacy-sidornas fasta topbar är body > nav (sticky,
   top:0, z-index:60, se raden längre upp i filen): utan raden nedan pinnas den på
   0 bakom samtyckesraden (fixed, z-index:120) så snart sidan scrollats, och
   ordmärket + menyknappen går varken att se eller klicka så länge besökaren inte
   svarat. Uppmätt 390x844, scrollat 600 px, på /kunskap/ och /arbete/bra-bygg/. */
html.samtycke-vantar body>nav{top:var(--samtycke-h)}

/* v13 (2026-09-12) ------------------------------------------------------
   Brödsmulorna på de 12 case-sidorna. Samma regler som Astro-sidornas
   .smula i src/styles/site.css, men med legacy-CSS:ens egna variabelnamn:
   här heter den grå texten --muted, i Astro-bygget --grey. Håll dem i takt
   vid framtida ändringar. */
.smula{font-family:Montserrat,sans-serif;font-size:.78rem;letter-spacing:.02em;margin:0 0 14px;color:var(--muted)}
/* mockup.css:64 sätter nav a till versaler, gles spärrning och opacity .75,
   och stigen är ett nav. Länkarna måste därför säga ifrån själva, annars
   skriks de två första stegen ut i versaler medan det sista är gement. */
.smula a{color:inherit;text-decoration:none;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;opacity:1;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.smula a:hover{color:var(--gold);border-color:var(--gold)}
.smula-sep{margin:0 7px;opacity:.55}
.smula [aria-current="page"]{color:var(--ink)}

/* Hubbingresserna (2026-09-12). Ligger i .hub-head-spalten, 720 px, men
   vänsterställd: löpande text ska inte centreras. Färg som .dek. */
.hubb-ingress{max-width:720px;margin:0 auto 44px;font-size:1.02rem;line-height:1.75;color:var(--muted);text-align:left}
.hubb-ingress > * + *{margin-top:1.1em}
.hubb-ingress a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hubb-ingress a:hover{color:var(--ink)}

/* v14 (2026-09-14): certifieringar i den fullständiga legacy-sidfoten. */
.foot-main{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;margin-bottom:44px}
.foot-main .foot-cols{margin-bottom:0}
footer .wrap:has(.foot-main){max-width:1480px}
.footer-cert{min-width:0;max-width:720px}
.footer-cert__heading{margin:0;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);opacity:.72}
.footer-cert__line{display:block;width:34px;height:1px;margin:14px 0;background:var(--gold)}
.footer-cert__cards{display:grid;gap:12px}
.footer-cert__card{min-height:124px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.01));padding:18px 22px}
.footer-cert__card--openai{display:grid;place-items:center}
.footer-cert__openai{display:block;width:210px;max-width:100%;height:auto;border-radius:12px}
.footer-cert__card--google{display:flex;align-items:center;gap:20px;color:var(--on-dark);text-decoration:none;transition:border-color .2s,background .2s}
.footer-cert__card--google:hover{border-color:rgba(201,162,39,.65);background:rgba(201,162,39,.035)}
.footer-cert__google{display:block;width:88px;height:auto;flex:0 0 auto}
.footer-cert__copy{display:grid;gap:12px;min-width:0}
.footer-cert__copy strong{font-family:'Montserrat',sans-serif;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.footer-cert__copy span{width:max-content;max-width:100%;font-size:14px;color:var(--muted-l);text-decoration:underline;text-underline-offset:4px}
@media(min-width:1280px){
  .foot-main{grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:48px}
  .footer-cert{max-width:none}
}
@media(max-width:420px){
  .footer-cert__card{min-height:112px;padding:16px}
  .footer-cert__card--google{gap:16px}
  .footer-cert__google{width:74px}
  .footer-cert__copy strong{font-size:15px}
  .footer-cert__copy span{font-size:13.5px}
}

/* v15 (2026-09-15, Task 14 i SEO-planen): ortsraden under taglinen i sidfoten.
   Synlig text före strukturerad data. .foot-tag har margin-bottom:30px i v13
   och är immutable, så ortsraden dras upp med negativ marginal i stället för
   att v13:s regel ändras. Dämpad ton och något mindre grad, så taglinen är
   fortsatt raden som läses först. Samma rad som .f-ort i src/styles/site.css. */
.foot-ort{font-family:'Inter','Inter Fallback',sans-serif;font-size:.92rem;line-height:1.55;color:var(--muted-l);margin:-22px 0 30px}

/* ===== v16 (2026-09-28): DESKTOPPOLERINGEN PÅ LEGACY-SIDORNA ==============
   Albins beställning 2026-09-27 ("polera det här som en kvarn": premiumnivå
   på dator utan att något som Google läser ändras), spec
   docs/superpowers/specs/2026-09-27-desktoppolering-och-heron-design.md
   avsnitt 3 och 8, uppgift 10 i planen. Astro-sidorna fick samma regler i
   blocket DESKTOPPOLERINGEN sist i src/styles/site.css; här står kopian för
   legacy-sidorna (/arbete/*, /en/work/*, /kunskap/*, /en/knowledge/*), med
   legacy-paletten (--muted/--muted-l, inte Astros --grey/--grey-l). Hubbarna
   och artiklarna har sitt block v4 i kunskap.v4.css, casesidornas detaljer
   står i sidornas egna inline-stilar. Header- och sidfotsmåtten (uppgift 11)
   står i ett eget delavsnitt sist i blocket. Vakter: test/desktop.test.mjs
   och scripts/e2e-desktop.mjs. */
/* Rytmen: samma tokens och värden som :root i site.css (blocket GULDSTRECKET
   OCH RYTMEN, 2026-09-24). --luft är luften mellan sektioner och block,
   --rubrik-luft luften från ett rubrikblock ned till dess innehåll, --penna
   guldstreckets kurva (mjuk start, mjukt slut, ingen översläng). Används av
   kunskap.v4.css och casesidornas inline-stilar. --case-luft är mellansteget
   mellan sektionerna i case- och produktmallen, där rubriken står 22 px över
   sitt innehåll och --luft (120 px) blev för glest (granskningen 2026-09-28);
   samma värde står i site.css för Produkt.astro. */
:root{--luft:clamp(80px,10vw,120px);--rubrik-luft:clamp(40px,5vw,64px);--penna:cubic-bezier(.65,.05,.36,1);--case-luft:clamp(64px,8vw,96px)}
/* Typografin (spec 3.1). Balanserade rubriker på alla nivåer, som på Astro-
   sidorna: "Sajter jag byggt åt riktiga / företag" och kunskapsartiklarnas
   h1 slutade med ett ensamt ord. balance behåller radantalet, så ingen ny
   CLS. Kortens och ingressernas brödtext får pretty, som bara jämnar ut ett
   kort sista ord. */
h1,h2,h3{text-wrap:balance}
.k-card p,.did-it p,.dek,.hubb-ingress p,.why .lede{text-wrap:pretty}
/* Ögonbrynen 13 px med .2em (spec 3.3, Albins val): .mono gav 11 px i
   sidhuvudena, där Astro-sidorna har 13. Kortens egna etiketter (kundkorten
   på /arbete/, artikelkorten på /kunskap/ och casesidornas artikelkort) är
   inte ögonbryn och behåller 11 px, annars bryter de i korten. */
.eyebrow{font-size:13px;letter-spacing:.2em}
.w-card .eyebrow,.k-card .eyebrow{font-size:11px}
/* Certifieringsblocket i sidfoten (v14) ärvde footer{text-align:center}:
   rubriken stod mitt i kolumnen medan strecket och korten under stod mot
   vänsterkanten. Vänsterställt som på Astro-sidorna. */
.footer-cert{text-align:left}
/* Header och sidfot som på Astro-sidorna (spec 3.4 till 3.6, uppgift 11 i
   planen, 2026-09-28). Legacy-headern (body > nav) och legacy-sidfoten tar
   Header.astro:s och Footer.astro:s mått och typografi, så att inget hoppar
   när besökaren går mellan /produkter/birdy/ och /arbete/: loggan står på
   samma x (184 px i 1440), menyposterna börjar på samma ställe och sidfoten
   linjerar mot headerns 1 120-wrap. Förlagan är reglerna i src/styles/site.css
   (RULLGARDINER I HEADERN, .nav-tel, SIDFOT MED SAJTKARTA, Certifieringar i
   den fullständiga sidfoten och blocket DESKTOPPOLERINGEN), med legacy-
   paletten (--muted-l = Astros --grey-l, samma värde). Markupen: template.js
   (kunskapssidorna) och samma rader i de 16 arbete-sidorna.
   Headern. Glaset är undersidornas #111 till .94 på alla bredder, som
   body.page-inner header på Astro-sidorna (13,13,13 till .92 var en nyans
   ljusare och klarade inte .93 i e2e-desktop). Från 1024 px är den 72 px hög
   och 60 px scrollad; klassen scrolled och tröskeln 60 px är header.js:s och
   sätts av menyskriptet sist i varje sida. Legacy-headern är sticky, inte
   fixed som Astros, så krympningen hade dragit upp sidan 12 px vid scroll (ett
   layoutskifte): margin-bottom tar över de 12 px i samma takt, och ytan
   ligger då ovanför vyn bakom glaset. Radhöjden 1.6 är Astro-sidornas (body
   har 1.65 här), så posterna står på samma y. Språkpillret står före
   Starta projekt och telefonnumret visas från 1201 px, som på Astro-sidorna.
   Under 1024 px är burgerpanelen som förut: numret visas inte där, och order
   ställer Starta projekt före språkraden som när länken stod sist i markupen. */
body>nav{background:rgba(17,17,17,.94)}
.navlinks .nav-tel{display:none}
/* Läsförloppsstapeln överst, som #progress på Astro-sidorna (mockup.css:29
   och :664; bredden sätts av menyskriptet som av header.js): 3 px guld över
   headern med samma sken. Elementet står före nav i markupen. */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:99;box-shadow:0 0 10px rgba(201,162,39,.55)}
@media(min-width:1024px){
  body>nav{line-height:1.6;transition:margin-bottom .35s}
  body>nav .wrap{max-width:1120px;padding:0 24px;height:72px;transition:height .35s}
  body>nav.scrolled{margin-bottom:12px}
  body>nav.scrolled .wrap{height:60px}
  .navlinks .has-sub>a{padding-right:10px}
  .navlinks .has-sub>a:not(.navbtn)::after{width:calc(100% - 10px)}
  .navlinks .sub-wrap{padding-top:22px}
  .navlinks .lang-sw{font-size:11px;letter-spacing:.16em;opacity:1;border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:8px 14px;transition:border-color .25s,color .25s}
  .navlinks .lang-sw::after{display:none}
  .navlinks .lang-sw:hover{border-color:var(--gold);color:var(--gold)}
}
@media(min-width:1201px){
  .navlinks{gap:13px}
  .navlinks .nav-tel{display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:.04em}
  .navlinks .nav-tel svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .navlinks .nav-tel:hover{color:var(--gold)}
}
@media(max-width:1023px){
  nav.menu-open .navlinks a.nav-tel{display:none}
  nav.menu-open .navlinks .navbtn{order:1}
  nav.menu-open .navlinks .lang-sw{order:2}
}
/* Sidfoten. Samma yta som Astros (svart #111, 60/44 px luft, ingen kantlinje
   upptill) och samma wrap, 1 120/24 px på alla bredder (headern behåller
   26 px under 1024 px, där burgermenyn är orörd), idéraden på en rad (max-width:none; 20ch bröt den i två), 44 px
   guldlinje under loggan (ett ::after på .logo, ingen ny markup), taglinen
   och ortsraden i Astros grad och ton, 36 px mellan ikonerna och
   kolumnerna, kolumnernas luft och hovern (vit till .72, 2 px guldstreck
   från vänster) som .f-cols. Certifieringarna står från 1024 px som en egen
   rad under kolumnerna med två lika kort (Astros brytpunkt sedan uppgift 4,
   planen säger 1280): rubriken som en kolumnrubrik, utan eget streck, och
   Google-titeln på en rad; under 1024 px bryter den balanserat som
   "Google Ads / Search-certifiering", aldrig vid bindestrecket. Nedersta
   raden i Astros typografi (Inter 12,5 px, gemener, grå) med kontaktraden
   22 px till höger. span.foot-copy håller ihop copyrightraden som Astros
   första spann, så att den bryter på samma ställen på mobilen, och
   guldpricken blir en grå punkt i textens storlek, mellan två mellanslag,
   så att raden läses som Astros "AlbIT AB · Hemsidor". Pilarna i knappen
   och certlänken (→, ↗) finns inte i typsnittsfilernas teckenutdrag och ritas
   i webbläsarens sans-serif som på Astro-sidorna, inte i metrikreserven
   (Arial uppskalad 7 till 13 procent), därav de egna font-family nedan. */
/* Inter 500: sidfotskolumnernas och rullgardinernas länkar är 500 på Astro-
   sidorna (@fontsource/inter/500.css i Base.astro), men legacy hade bara 400
   och 600, så de ritades i 400, tunnare och ~1 % smalare. Filen är
   byte-identisk med Astros /_astro/inter-latin-500-normal.*.woff2 (samma
   @fontsource-fil), självhostad bredvid de andra. Ingen preload: bara
   sidfoten och de dolda panelerna använder vikten, allt utanför första vyn,
   men båda läggs ut direkt, så filen hämtas ändå vid varje laddning av en
   legacy-sida, också utan scroll (+24 kB). Det ryms i prestandabudgeten:
   /arbete/bra-bygg/ 195 816 av 217 608 byte, CLS 0 (uppmätt 2026-09-28). */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
footer{padding:60px 0 44px;background:var(--ink);border-top:0;color:var(--muted-l);font-size:16px;line-height:1.6}
footer .wrap,footer .wrap:has(.foot-main){max-width:1120px;padding:0 24px}
.foot-say{max-width:none;font-size:clamp(22px,3.4vw,34px);line-height:1.6;letter-spacing:normal;margin-bottom:0;text-wrap:balance}
.foot-say em{color:var(--gold)}
.foot-btn{margin:22px 0 22px;padding:11px 22px;border-radius:var(--r);line-height:1.6;font-family:'Montserrat',sans-serif}
footer .logo{flex-direction:column;gap:0;margin-bottom:0}
footer .logo::after{content:"";width:44px;height:1px;background:var(--gold);margin-top:18px}
.foot-tag{max-width:440px;margin:14px auto 0;font-size:15px;line-height:1.55;color:var(--muted-l);text-wrap:pretty}
.foot-ort{max-width:440px;margin:8px auto 0;font-size:14px;line-height:1.55}
.foot-main{gap:40px;margin:36px 0 40px}
@media(min-width:1120px){.foot-cols{gap:28px 20px}}
@media(max-width:1119px){.foot-cols{gap:32px 28px}}
.foot-cols a{color:#fff;opacity:.72;transition:opacity .2s;text-wrap:balance}
.foot-cols a:hover{color:#fff;opacity:1}
.foot-cols a::after{height:2px;width:100%;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--spring)}
.foot-cols a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-cert__heading{margin:0 0 14px;opacity:.55}
.footer-cert__line{display:none}
.footer-cert__card{background:none}
.footer-cert__card--google{transition:border-color .2s}
.footer-cert__card--google:hover{background:none}
.footer-cert__copy strong{text-wrap:balance}
.footer-cert__copy span{font-family:'Inter',sans-serif}
.foot-base{padding-top:26px;border-top:1px solid var(--line-d);gap:8px 22px;font-family:'Inter','Inter Fallback',sans-serif;font-size:12.5px;line-height:1.6;color:var(--muted-l)}
footer .foot-base .small{font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.foot-copy{text-wrap:balance}
.foot-dot{display:inline-block;vertical-align:middle;width:2.4px;height:2.4px;background:var(--muted-l);margin:0 .6px}
@media(min-width:1024px){
  .foot-main{grid-template-columns:1fr;gap:44px}
  .footer-cert{max-width:none;padding-top:36px;border-top:1px solid var(--line-d)}
  .footer-cert__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-cert__card--google{justify-content:center}
}
/* v17 (2026-10-06): omdömesrutan i sidfoten (Albins beställning: "en liten
   omdömesruta ... samma grundprincip som på kundsajterna", t.ex. Hagfors
   Måleri och Bra Bygg). Ligger under .foot-social: en länk som är hela
   rutan, fem stjärnor som prydnad, en neutral fråga och en tydlig länktext.
   Mörkt kort som .prod (border var(--line-d), bakgrund var(--ink-2), radie
   var(--r)), centrerad med margin:auto som footerns övriga block (.foot-orn,
   .logo), width:fit-content så den inte sträcks över mobilbredden. Astro-
   motsvarigheten heter .f-review i src/styles/site.css, håll dem i takt. */
.foot-review{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;width:fit-content;max-width:calc(100% - 48px);margin:18px auto 0;padding:14px 18px;border:1px solid var(--line-d);border-radius:var(--r);background:var(--ink-2);text-decoration:none;color:inherit;transition:transform .3s var(--spring)}
.fr-stars{display:block;color:var(--gold);letter-spacing:3px;font-size:13px}
.fr-q{font-size:13.5px;line-height:1.4;color:var(--muted-l)}
.fr-cta{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:14px;color:var(--on-dark)}
@media(hover:hover) and (pointer:fine){.foot-review:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.foot-review:hover{transform:none}}
/* v18 (2026-10-08): A · Galleri, headern och sidfoten på legacy-sidorna (fas B
   del 1, plan docs/superpowers/plans/2026-10-08-galleri-fas-b.md, Albins
   godkända ritningar HeaderDator/-Mobil och SidfotDator/-Mobil). Samma
   utseende och mått som DEL 1 i src/styles/galleri.css på Astro-sidorna, håll
   dem i takt; scripts/galleri-legacy.mjs skrev blocket. v17 ovan står
   oförändrad och reglerna här vinner på källordning eller specificitet.
   Headern: ljus i alla lägen (papper med blur och hårlinje), mörkt ordmärke
   (albit-wordmark-dark-91.v1.png med 2x och 3x), menyn i Inter 500 utan
   versaler, guldlinjen under hover och under sidan man står på (aria-current
   på hubbarna), rullgardinerna som vita kort, Starta projekt som svart piller.
   Höjderna står kvar (72 och 60 px från 1 024 px, 64 px under): legacy-
   headern är sticky i flödet, så en ändrad höjd hade flyttat sidan. Under
   1 024 px en rund telefonknapp och en svart rund burgare med två streck, och
   panelen är ljus med Starta projekt, telefonen och språket sist. */
body>nav{background:#fafaf8f5;border-bottom-color:#11111114;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);line-height:1.6}
body>nav .wrap{max-width:1288px;padding:0 24px}
body>nav .logo .logo-img{height:24px}
.navlinks a:not(.lang-sw,.navbtn){color:#111;font:500 14.5px Inter,'Inter Fallback',sans-serif;letter-spacing:0;text-transform:none;opacity:1}
.navlinks a[aria-current]:not(.navbtn)::after{transform:none}
.navlinks .chev{opacity:.55}
.navlinks a:is(.nav-tel,.lang-sw)::after{content:none}
.navlinks a.nav-tel:hover{color:#111}
.navlinks .lang-sw,.navlinks a.lang-sw:hover{padding:8px 12px;border:1px solid #1111112e;border-radius:100px;color:#111;font-size:12px;letter-spacing:.08em;opacity:1}
.navlinks .navbtn,.navlinks .navbtn:hover{display:inline-flex;align-items:center;height:44px;padding:0 22px!important;border:0;border-radius:99px;background:#111;color:#fafaf8!important;font-size:14px;letter-spacing:0;text-transform:none}
.navlinks .sub{padding:10px;background:#fff;border-color:#11111114;border-radius:18px;box-shadow:0 30px 60px -28px #11111159}
.navlinks .sub a::before{content:none}
.navlinks .sub a:is(:hover,:focus-visible){background:#f4f3ee}
@media(min-width:1024px){
  .navlinks{flex:1;gap:26px}
  .navlinks>:is(.has-sub:first-child,.nav-tel){margin-left:auto}
  .navlinks>:is(.lang-sw,.navbtn){margin-left:-10px}
}
@media(min-width:1024px) and (max-width:1200px){
  .navlinks{gap:20px}
  .navlinks>.lang-sw{margin-left:auto}
}
@media(max-width:1023px){
  body>nav .logo .logo-img{height:21px}
  .navlinks a.nav-tel:not(.navbtn){display:flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;padding:0;border:1px solid #1111112e;border-radius:50%;font-size:0}
  .navlinks .nav-tel svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .navlinks .navbtn{display:none}
  .nav-burger{align-items:center;gap:4px;width:44px;height:44px;margin-left:8px;padding:0;border-radius:50%;background:#111}
  .nav-burger span{width:16px;background:#fafaf8}
  .nav-burger span:nth-child(2){display:none}
  nav.menu-open .nav-burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
  nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
  body>nav.menu-open,nav.menu-open .navlinks{background:#fafaf8;border-bottom-color:#11111114}
  nav.menu-open .navlinks{flex-flow:row wrap;padding:6px 20px 28px;box-shadow:0 30px 50px -30px #11111159}
  nav.menu-open .navlinks>a:not(.navbtn),nav.menu-open .navlinks>.has-sub{flex:0 0 100%;display:flex;align-items:center;min-height:58px;padding:0;border-bottom:1px solid #11111114}
  nav.menu-open .navlinks .has-sub>a:not(.navbtn){padding:0;border:0}
  nav.menu-open .navlinks a:not(.nav-tel,.lang-sw,.navbtn){font:600 17px Montserrat,'Montserrat Fallback',sans-serif}
  nav.menu-open .navlinks .navbtn{display:flex;flex:0 0 100%;order:1;align-items:center;justify-content:center;height:54px;min-height:0;margin-top:24px;padding:0!important;border:0}
  nav.menu-open .navlinks>a.nav-tel:not(.navbtn){display:flex;order:2;flex:none;gap:8px;width:auto;height:auto;min-height:0;margin:20px auto 0 0;padding:0;border:0;font-size:14.5px}
  nav.menu-open .navlinks>a.lang-sw:not(.navbtn){order:3;flex:none;min-height:0;margin-top:20px;padding:8px 12px;border:1px solid #1111112e;border-radius:99px;font-size:12px}
}
/* Sidfoten: #0B0B0B med hårlinje mot ytan ovanför, allt vänsterställt.
   Markupen är platt och orörd, så .wrap är ett rutnät. Granskarraden överst
   (texten och knappen på samma rad från 840 px, under den på mobil, hårlinjen
   under raden är .foot-orn), från 1 120 px brand-blocket i en egen kolumn till
   vänster och sajtkartans fem kolumner med certifieringsraden (.foot-main) till
   höger; rad 8 är ett 1fr-spår som tar upp kolumnernas överskott, så att
   brand-blockets rader inte dras isär. Under 1 120 px står blocken i
   markupens ordning: brand-blocket, tre kolumner (två under 840 px),
   certifieringarna och nedersta raden med © och kontaktraden. */
footer{padding:0 0 40px;background:#0b0b0b;border-top:1px solid #fafaf814;color:#a8a7a1;text-align:left}
footer .wrap,footer .wrap:has(.foot-main){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:start;max-width:1288px}
footer .wrap>*{grid-column:1/-1}
footer .wrap>.foot-say{grid-column:1;justify-self:start;align-self:center;margin:30px 0;font-size:20px;font-weight:600;line-height:1.6;letter-spacing:-.01em;text-align:left}
.foot-say em{font-style:normal;color:#a8a7a1}
footer .wrap>.foot-btn{grid-column:2;align-self:center}
.foot-btn,.foot-btn:hover,.foot-btn:focus-visible{display:inline-flex;align-items:center;justify-content:center;height:44px;margin:30px 0;padding:0 20px;border:1px solid #fafaf840;border-radius:99px;background:none;color:#fafaf8;font-size:14px;letter-spacing:0;text-transform:none;white-space:nowrap;transform:none}
.foot-orn{width:auto;height:1px;margin:0;background:#fafaf814}
footer .logo{align-items:flex-start;margin:64px 0 0}
footer .logo::after{content:none}
footer .logo .logo-img{width:auto;height:26px}
.foot-tag{max-width:270px;margin:20px 0 0;font-size:14.5px;color:#bdbcb6;text-align:left}
.foot-ort{max-width:270px;margin:12px 0 0;font-size:13.5px;color:#8a8984;text-align:left}
.foot-social{justify-content:flex-start;margin:18px 0 0}
.foot-social a{color:#a8a7a1}
footer .wrap>:is(.foot-social,.foot-review){justify-self:start}
.foot-review{max-width:100%;margin:18px 0 0;border-color:#fafaf824;border-radius:14px;background:none}
.fr-q{font:600 13.5px Montserrat,'Montserrat Fallback',sans-serif;color:#fafaf8}
.fr-cta{font:400 13px Inter,'Inter Fallback',sans-serif;color:#a8a7a1}
footer .foot-main{margin:40px 0 0;gap:40px}
footer .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:36px 20px}
footer .foot-h{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.12em;color:#f5f5f3;opacity:1}
footer .foot-cols a{padding:0;font:400 13.5px/1.4 Inter,'Inter Fallback',sans-serif;color:#a8a7a1;opacity:1}
footer .foot-cols a::after{content:none}
footer .foot-cols a:hover{color:#fafaf8}
footer :is(.footer-cert,.footer-cert__cards){display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;max-width:none}
footer .footer-cert{padding-top:26px;border-top:1px solid #fafaf814}
footer .footer-cert__heading{margin:0 auto 0 0;font-size:12px;font-weight:600;letter-spacing:.12em;color:#a8a7a1;opacity:1}
footer .footer-cert__card{min-height:0;padding:0;border:0}
footer .footer-cert__openai{width:auto;height:46px}
footer .footer-cert__google{width:46px}
footer .footer-cert__copy{gap:2px}
footer .footer-cert__copy strong{font-size:13.5px}
footer .footer-cert__copy span{color:#a8a7a1;text-decoration:none}
.foot-base{justify-content:space-between;margin:48px 0 0;border-top-color:#fafaf814;font-size:13px;color:#a8a7a1;text-align:left}
@media(min-width:1024px){footer .foot-main{gap:44px}}
@media(min-width:840px) and (max-width:1119px){
  footer .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1120px){
  footer .wrap,footer .wrap:has(.foot-main){grid-template-columns:260px minmax(0,1fr);grid-template-rows:repeat(7,auto) 1fr auto;column-gap:56px}
  footer .wrap>.foot-say{grid-column:1/-1;grid-row:1;max-width:calc(100% - 240px)}
  footer .wrap>.foot-btn{grid-column:1/-1;grid-row:1;justify-self:end}
  footer .wrap>.foot-orn{grid-row:2}
  footer .wrap>.logo{grid-column:1;grid-row:3}
  footer .wrap>.foot-tag{grid-column:1;grid-row:4}
  footer .wrap>.foot-ort{grid-column:1;grid-row:5}
  footer .wrap>.foot-social{grid-column:1;grid-row:6}
  footer .wrap>.foot-review{grid-column:1;grid-row:7}
  footer .wrap>.foot-main{grid-column:2;grid-row:3/9;margin-top:64px}
  footer .wrap>.foot-base{grid-row:9}
  footer .foot-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
}
@media(max-width:839px){
  footer .wrap>.foot-say{grid-column:1/-1;margin:30px 0 0;font-size:18px}
  footer .wrap>.foot-btn{grid-column:1/-1;justify-self:start;margin:16px 0 30px}
  footer .logo{margin-top:44px}
  .foot-base{flex-direction:column;align-items:flex-start;margin-top:36px}
  footer .footer-cert__heading{flex:0 0 100%}
}