/* Bollnäs El & Energikonsult, all CSS. Grunden är riktning E, utkast/hem-e.html ordagrant,
   godkänd av Albin 2026-09-14: papper från topp till botten, inga svarta ytor, inga skarvar.
   Undersidornas regler står sist. Ändra inte utseendet utan att fråga. */
@font-face{font-family:'Archivo';src:url(/fonts/archivo-latin.woff2) format('woff2');font-weight:100 900;font-stretch:100%;font-style:normal;font-display:swap;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';src:url(/fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;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}
/* Riktning E: "dagsljus över Bollnäs". Riktning D utan svärtan. Samma komponenter, samma
   rörelse, samma typografi, men papper från topp till botten: hjälten är ett dagsljusfoto
   med texten på en vit platta, ortsbandet ett ljust fönster, kontakten ett vitt ark och
   sidfoten sand. Svart finns kvar som text och som knapp, aldrig som yta. */
:root{
  --papper:#F6F4EF; --papper2:#EDEAE2; --sand:#E6E1D6; --vit:#FFFFFF;
  --blak:#14161B; --blak2:#4A5059; --blak3:#646970; --blak4:#A9AEB6;
  --gul:#EA9902; --gul2:#F5AD17; --gul3:#B87500;
  --linje-l:rgba(20,22,27,.08);
  --display:'Archivo',system-ui,sans-serif; --brod:'Inter',system-ui,sans-serif;
  --marg:clamp(20px,5vw,84px); --kant:12px; --ram:20px; --ram2:28px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease2:cubic-bezier(.22,.68,.28,1);
  --skugga:0 30px 70px -28px rgba(20,22,27,.28),0 6px 18px -8px rgba(20,22,27,.10);
  --skugga-lyft:0 44px 90px -36px rgba(20,22,27,.42),0 10px 24px -12px rgba(20,22,27,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papper);color:var(--blak);font-family:var(--brod);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.02}
p,ul{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--marg)}
section{position:relative}

/* intåg */
.rv{opacity:0;transform:translateY(18px);transition:opacity .85s var(--ease2),transform .85s var(--ease2);transition-delay:var(--d,0ms)}
.rv.syns{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.kick{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blak3)}
h1.stor,h2.stor{font-size:clamp(32px,4.2vw,54px)}
.led{font-size:18px;line-height:1.7;color:var(--blak2)}

/* knappar */
.kn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:15.5px;
  padding:17px 28px;border-radius:100px;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s}
.kn svg{transition:transform .35s var(--ease)}
.kn:hover svg{transform:translateX(4px)}
.kn--gul{background:var(--gul);color:#111;box-shadow:0 14px 34px -14px rgba(234,153,2,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.kn--gul:hover{transform:translateY(-2px);background:var(--gul2);box-shadow:0 22px 44px -16px rgba(234,153,2,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.kn--svart{background:var(--blak);color:#fff;box-shadow:0 14px 30px -14px rgba(20,22,27,.7)}
.kn--svart:hover{transform:translateY(-2px);background:#23262D}
.kn--liten{padding:12px 20px;font-size:14px}
.kn--gul{overflow:hidden}
.kn--gul::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-180%) skewX(-12deg);animation:svep 7s var(--ease2) 2.5s infinite}
@keyframes svep{0%{transform:translateX(-180%) skewX(-12deg)}14%{transform:translateX(280%) skewX(-12deg)}100%{transform:translateX(280%) skewX(-12deg)}}
@media (prefers-reduced-motion:reduce){.kn--gul::after{animation:none}}

/* sidhuvud, ljus glasö */
.topp{position:fixed;top:0;left:0;right:0;z-index:100;padding:calc(var(--kant) + 10px) calc(var(--kant) + 12px) 0;display:flex;justify-content:center;pointer-events:none}
.o{pointer-events:auto;width:100%;max-width:1232px;display:flex;align-items:center;gap:6px;padding:9px 9px 9px 18px;border-radius:100px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 14px 44px -14px rgba(20,22,27,.45),0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(255,255,255,.4);
  transition:padding .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);color:var(--blak)}
.topp.fast .o{padding:6px 6px 6px 16px;background:rgba(255,255,255,.94);box-shadow:0 18px 50px -16px rgba(20,22,27,.4),0 0 0 1px rgba(20,22,27,.05)}
.o{animation:oin .9s var(--ease) both}
@keyframes oin{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.o{animation:none}}
.o .mark{display:flex;align-items:center;margin-right:14px}
.o .mark img{height:38px;width:auto;transition:height .45s var(--ease)}
.topp.fast .o .mark img{height:32px}
.lankar{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--blak2)}
.lankar a{position:relative;padding:9px 13px;border-radius:100px;transition:color .25s,background .3s var(--ease)}
.lankar a:hover{color:var(--blak);background:rgba(20,22,27,.06)}
.lankar a.pa{color:var(--blak)}
.lankar a.pa::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gul)}
.o .hoger{margin-left:auto;display:flex;align-items:center;gap:8px}
.ring{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:100px;background:rgba(20,22,27,.05);
  box-shadow:inset 0 0 0 1px rgba(20,22,27,.07);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.ring .ik{width:36px;height:36px;border-radius:50%;background:var(--gul);color:#111;display:grid;place-items:center;flex:none;
  box-shadow:0 8px 18px -8px rgba(234,153,2,1),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ring .nr{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--blak);white-space:nowrap}
.ring:hover{background:rgba(20,22,27,.08);box-shadow:inset 0 0 0 1px rgba(20,22,27,.12)}
.ring:hover .ik{transform:scale(1.06) rotate(-8deg);box-shadow:0 10px 22px -8px rgba(234,153,2,1),0 0 0 4px rgba(234,153,2,.22)}
.meny{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--blak);cursor:pointer;place-items:center;position:relative;padding:0}
.meny span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:absolute;left:14px;top:22px;transition:transform .35s var(--ease)}
.meny span:first-child{transform:translateY(-4px)}
.meny span:last-child{transform:translateY(4px)}
.meny.pa span:first-child{transform:rotate(45deg)}
.meny.pa span:last-child{transform:rotate(-45deg)}

/* rullgardiner i huvudmenyn */
.fall{position:relative}
.fk{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:0;border-radius:100px;cursor:pointer;
  background:transparent;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--blak2);transition:color .25s,background .3s var(--ease)}
.fk svg{transition:transform .3s var(--ease);opacity:.55}
.fk:hover,.fk[aria-expanded="true"]{color:var(--blak);background:rgba(20,22,27,.06)}
.fk[aria-expanded="true"] svg{transform:rotate(180deg)}
.fp{position:absolute;top:calc(100% + 12px);left:-8px;z-index:101;min-width:320px;padding:10px;border-radius:22px;background:#fff;
  box-shadow:0 30px 70px -20px rgba(20,22,27,.4),0 0 0 1px rgba(20,22,27,.06);
  opacity:0;transform:translateY(-8px);transform-origin:20% 0;pointer-events:none;transition:opacity .26s var(--ease),transform .32s var(--ease)}
.fp.inne{opacity:1;transform:none;pointer-events:auto}
.fp[hidden]{display:none}
.fp a{display:grid;gap:2px;padding:10px 14px;border-radius:14px;color:var(--blak);transition:background .28s var(--ease)}
.fp a:hover{background:rgba(20,22,27,.05)}
.fp a b{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.015em}
.fp a span{font-size:13px;line-height:1.45;color:var(--blak3)}
.fp--bred{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;min-width:430px}
.fp-sp{display:grid;align-content:start;gap:2px}
.fp-r{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blak3);padding:8px 14px 4px}
.fp--bred a{font-family:var(--display);font-weight:600;font-size:15px;padding:8px 14px}
.fp-alla{margin-top:8px;border-top:1px solid var(--linje-l);border-radius:0 0 14px 14px;display:inline-flex!important;align-items:center;gap:8px;color:var(--blak2)!important}
@media (prefers-reduced-motion:reduce){.fp{transition:none}.fk svg{transition:none}}
@media (max-width:1080px){.fp{display:none}}

/* hamburgermenyn */
.menypanel{pointer-events:auto;position:fixed;left:calc(var(--kant) + 12px);right:calc(var(--kant) + 12px);top:calc(var(--kant) + 78px);
  z-index:99;padding:18px;border-radius:24px;color:var(--blak);background:#fff;
  box-shadow:0 30px 70px -20px rgba(20,22,27,.45),0 0 0 1px rgba(20,22,27,.06);
  opacity:0;transform:translateY(-14px) scale(.98);transform-origin:50% 0;transition:opacity .3s var(--ease),transform .38s var(--ease);
  max-height:calc(100svh - var(--kant) * 2 - 92px);overflow-y:auto;overscroll-behavior:contain}
.menypanel.inne{opacity:1;transform:none}
.menypanel[hidden]{display:none}
.mp-lankar{display:grid;gap:2px}
.mp-r{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blak3);padding:14px 12px 6px;margin:0}
.mp-lankar .mp-r:first-child{padding-top:4px}
.mp-tj{display:grid;gap:1px}
.mp-tj a,.mp-ov a{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;padding:9px 12px;border-radius:14px;color:var(--blak);transition:background .3s var(--ease)}
.mp-or{display:grid;grid-template-columns:1fr 1fr;gap:1px 6px}
.mp-or a{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;padding:9px 12px;border-radius:14px;color:var(--blak2);transition:background .3s var(--ease)}
.mp-ov{display:grid;gap:1px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linje-l)}
.mp-tj a:hover,.mp-or a:hover,.mp-ov a:hover{background:rgba(20,22,27,.05)}
.mp-bot{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--linje-l)}
.mp-bot .ring{justify-content:flex-start;padding:5px 16px 5px 5px}
.mp-bot .ring .nr{display:block}
.mp-bot .kn{justify-content:center}
html.last,html.last body{overflow:hidden}
@media (min-width:1081px){.menypanel{display:none}}
@media (prefers-reduced-motion:reduce){.menypanel{transition:none}}

/* hjälten: ett rundat fönster med Bollnäs i eftermiddagsljus. Texten står inte på fotot
   utan på en vit platta som lappar över fönstrets nederkant, svart på vitt, alltid läsbar.
   Ingen scrim, ingen svärta. Fotot får vara ett foto. */
.hj{position:relative;margin:var(--kant) var(--kant) 0;height:min(78svh,820px);min-height:520px;
  border-radius:var(--ram2);overflow:hidden;isolation:isolate;box-shadow:var(--skugga)}
.hj-bild{position:absolute;inset:0;z-index:-2;background:#D9DFE7}
.hj-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.04);
  animation:driv 34s ease-in-out infinite alternate;will-change:transform}
@keyframes driv{to{transform:scale(1.1) translate3d(-1.2%,-.8%,0)}}
@media (prefers-reduced-motion:reduce){.hj-bild img{animation:none}}
/* bara en aning djup högst upp, så glasön har en kant att stå mot */
.hj-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,27,.16) 0%,rgba(20,22,27,0) 28%)}
/* ljuset: en varm skiva som vandrar över staden och följer pekaren när det finns en */
.hj-ljus{position:absolute;left:58%;top:38%;width:780px;height:780px;margin:-390px 0 0 -390px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,90,.8),rgba(255,214,90,.32) 38%,rgba(255,214,90,0) 72%);
  mix-blend-mode:soft-light;transform:translate3d(var(--dx,0px),var(--dy,0px),0);will-change:transform;animation:vandra 22s ease-in-out infinite}
@keyframes vandra{0%{transform:translate3d(-16%,-4%,0)}50%{transform:translate3d(18%,6%,0)}100%{transform:translate3d(-16%,-4%,0)}}
.hj-ljus.styrd{animation:none}
@media (prefers-reduced-motion:reduce){.hj-ljus{animation:none}}
.hj-kred{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,22px);z-index:2;font-size:11.5px;color:rgba(255,255,255,.9);
  background:rgba(20,22,27,.32);backdrop-filter:blur(8px);padding:5px 10px;border-radius:100px}
.hj-kred a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.hj-platta-rad{position:relative;z-index:3;padding:0 calc(var(--kant) + var(--marg) * .45);margin-top:clamp(-150px,-10.5vw,-96px)}
.hj-platta{background:var(--vit);border-radius:var(--ram);max-width:820px;box-shadow:var(--skugga-lyft);
  padding:clamp(28px,3.6vw,50px) clamp(24px,3.8vw,54px) clamp(24px,2.8vw,36px)}
.hj-platta h1{font-size:clamp(38px,4.7vw,66px);color:var(--blak)}
/* det gula gör ett jobb: en markering under ordet Bollnäs, som en överstrykningspenna */
.hj-platta h1 em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.hj-platta h1 em::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;bottom:.04em;height:.34em;background:var(--gul);border-radius:.06em;transform:skewX(-8deg)}
.hj-led{max-width:54ch;margin-top:16px;font-size:clamp(17px,1.35vw,19px);line-height:1.62;color:var(--blak2)}
.hj-cta{display:flex;align-items:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;margin-top:clamp(22px,2.6vw,28px)}
.bevis{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:clamp(22px,2.8vw,30px);padding-top:18px;
  border-top:1px solid var(--linje-l);font-size:14px;color:var(--blak2);list-style:none;padding-left:0}
.bevis li{display:flex;align-items:center;gap:10px}
.bevis li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gul);box-shadow:0 0 0 1px rgba(20,22,27,.25) inset;flex:none}

/* Startsidan, riktning A: Bollnäsbilden är scenen. Budskapet och det riktiga formuläret
   ligger som två självständiga vita kort över fotot på desktop. Under 1081 px återgår
   samma DOM till en lugn, staplad läsordning: foto, budskap, formulär. */
.hj-scen{position:relative}
.hj-platta-rad--start .hj-formkol{scroll-margin-top:112px}
@media (min-width:1081px){
  .hj-scen .hj{height:min(88svh,900px);min-height:720px}
  .hj-platta-rad--start{position:absolute;inset:clamp(118px,15vh,152px) 0 clamp(38px,5vh,62px);z-index:3;width:100%;max-width:1180px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.96fr);gap:clamp(20px,2.2vw,32px);align-items:start;
    padding:0 clamp(24px,3vw,44px);margin:0 auto}
  .hj-platta-rad--start .hj-platta{max-width:680px;padding:clamp(30px,3vw,46px) clamp(28px,3.3vw,50px) clamp(26px,2.6vw,36px)}
  .hj-platta-rad--start .hj-platta h1{font-size:clamp(42px,4.25vw,64px)}
  .hj-platta-rad--start .hj-cta{display:none}
  .hj-platta-rad--start .kort{padding:clamp(24px,2.4vw,34px);gap:12px;background:rgba(255,255,255,.96)}
  .hj-platta-rad--start .kort label{margin-bottom:6px}
  .hj-platta-rad--start .kort input,.hj-platta-rad--start .kort select,.hj-platta-rad--start .kort textarea{padding:11px 13px;font-size:15px}
  .hj-platta-rad--start .kort .tva{gap:12px}
  .hj-platta-rad--start .kort textarea{min-height:84px;resize:vertical}
  .hj-platta-rad--start .kort .skicka{gap:12px}
  .hj-platta-rad--start .kort .kn{padding:14px 22px}
}
@media (max-width:1080px){
  .hj-platta-rad--start{display:block}
  .hj-platta-rad--start .hj-platta{max-width:820px}
  .hj-platta-rad--start .hj-formkol{max-width:820px;margin-top:24px}
}

/* kroppen: samma papper som sidan, ingen kant att runda */
.kropp{position:relative;z-index:2}
.sek{padding:clamp(72px,9vw,124px) 0}
.kropp > .sek:first-child{padding-top:clamp(64px,8vw,112px)}
.rubrikrad{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.rubrikrad h2{max-width:16ch;margin-top:16px}
.rubrikrad .led{max-width:44ch}

/* tjänstevisning */
.visning{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,60px);align-items:center}
.lista{position:relative;display:flex;flex-direction:column;gap:2px}
.lista .glid{position:absolute;left:0;right:0;top:0;height:74px;border-radius:18px;background:#fff;box-shadow:var(--skugga);opacity:0;transform:translateY(0);will-change:transform;z-index:0}
.lista.har .glid{opacity:1;transition:transform .55s var(--ease),height .55s var(--ease),opacity .5s .35s}
.rad{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:16px;row-gap:1px;
  align-items:center;padding:14px 20px;min-height:80px;border-radius:18px;color:inherit;outline:0}
.rad .prick{grid-row:1/3;width:10px;height:10px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--blak4);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.rad.pa .prick{background:var(--gul);box-shadow:inset 0 0 0 1.5px var(--blak),0 0 0 4px rgba(234,153,2,.22)}
.rad h3{grid-column:2;font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--blak2);transition:color .35s var(--ease)}
.rad.pa h3,.rad:focus-visible h3{color:var(--blak)}
.rad .h{grid-column:2;font-size:13.5px;color:var(--blak3);line-height:1.35;transition:color .35s}
.rad.pa .h{color:var(--blak2)}
.rad .pil{grid-column:3;grid-row:1/3;width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--blak);
  background:var(--gul);opacity:0;transform:translateX(-6px) scale(.9);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.rad.pa .pil{opacity:1;transform:none;transition-delay:.12s}
.rad:focus-visible{box-shadow:0 0 0 2px var(--gul)}
.rad .tumme,.rad .b{display:none}

/* panelen: bilden ovanför, namnet och texten på vitt under. Ingen gradient över fotot. */
.panel{position:relative;border-radius:var(--ram);overflow:hidden;background:#fff;box-shadow:var(--skugga);color:var(--blak)}
.panel .bild{position:relative;aspect-ratio:4/3;background:var(--papper2)}
.panel .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .75s var(--ease2),transform 1.6s var(--ease2)}
.panel .bild img.pa{opacity:1;transform:scale(1)}
.panel .text{padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,34px) clamp(24px,2.8vw,34px)}
.panel .text .namn{display:grid}
.panel .text .namn span,.panel .text .beskr p{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.panel .text .namn span{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;color:var(--blak)}
.panel .text .beskr{display:grid;margin-top:8px;max-width:52ch}
.panel .text .beskr p{font-size:15.5px;line-height:1.6;color:var(--blak2)}
.panel .text .namn span.pa,.panel .text .beskr p.pa{opacity:1;transform:none}
.chip{position:absolute;z-index:3;font-size:11.5px;color:rgba(255,255,255,.9);background:rgba(20,22,27,.42);backdrop-filter:blur(8px);
  padding:6px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.14)}
.panel .chip{top:14px;right:14px}

/* uppmaningen: ett brett lågt vitt kort */
.sek--uppm{padding:0 0 clamp(72px,9vw,124px)}
.uppm{background:var(--vit);border-radius:var(--ram);padding:clamp(26px,3vw,34px) clamp(24px,3.2vw,40px);box-shadow:var(--skugga);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,3vw,36px);flex-wrap:wrap}
.uppm-t{flex:1 1 340px;min-width:0}
.uppm-f{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,25px);line-height:1.2;letter-spacing:-.018em;margin:0 0 8px;text-wrap:balance}
.uppm-u{font-size:15px;line-height:1.55;color:var(--blak2);margin:0;max-width:46ch}
.uppm-v{display:flex;align-items:center;gap:clamp(18px,2.2vw,26px);flex-wrap:wrap}
@media (max-width:640px){.uppm{align-items:flex-start}.uppm-v{width:100%}}

/* ortsbandet: ett ljust fönster i kroppen. Varpen en dag med moln, papperet tonar in från
   vänster så texten står på nästan vitt, och gruppförteckningen är en vit tavla på fotot. */
.ortband{position:relative;margin:0 calc(var(--marg) * .45);border-radius:var(--ram2);overflow:hidden;isolation:isolate;
  background:#D8DEE6;color:var(--blak);padding:clamp(56px,7vw,104px) clamp(22px,5vw,84px);box-shadow:var(--skugga)}
.ortband-bak{position:absolute;inset:0;z-index:-1}
.ortband-bak img{width:100%;height:100%;object-fit:cover}
.ortband-bak::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(246,244,239,.97) 0%,rgba(246,244,239,.9) 38%,rgba(246,244,239,.35) 58%,rgba(246,244,239,.04) 100%)}
.omr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.omr h2{font-size:clamp(30px,3.7vw,48px)}
.tavla{border-radius:var(--ram);padding:clamp(20px,3vw,32px);background:rgba(255,255,255,.92);
  box-shadow:var(--skugga-lyft),0 0 0 1px rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.matning{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--linje-l)}
.matning i{width:12px;height:12px;border-radius:50%;background:var(--gul);flex:none;box-shadow:inset 0 0 0 1.5px var(--blak),0 0 0 4px rgba(234,153,2,.22);animation:puls 3.2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:inset 0 0 0 1.5px var(--blak),0 0 0 8px rgba(234,153,2,.12)}}
@media (prefers-reduced-motion:reduce){.matning i{animation:none}}
.matning span{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blak3)}
.grupper{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(14px,2.6vw,36px);list-style:none;padding:0}
.grupper li{position:relative}
.grupper .gr{position:relative;display:flex;align-items:center;gap:13px;padding:13px 8px 13px 36px;border-radius:12px;transition:background .3s var(--ease),padding-left .35s var(--ease)}
.grupper .gr::before{content:"";position:absolute;left:0;top:50%;width:22px;height:1px;background:rgba(20,22,27,.16);transition:background .3s}
.grupper .gr i{width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--blak4);flex:none;transition:all .3s var(--ease)}
.grupper .gr .o2{font-family:var(--display);font-weight:600;font-size:17px;color:var(--blak)}
.grupper .gr .t{margin-left:auto;font-size:13px;color:var(--blak3)}
.grupper a.gr:hover{background:rgba(20,22,27,.045);padding-left:42px}
.grupper a.gr:hover::before{background:var(--gul3);transition-delay:0s}
.grupper a.gr:hover i{background:var(--gul);box-shadow:inset 0 0 0 1.5px var(--blak),0 0 12px rgba(234,153,2,.75);transition-delay:0s}
span.gr{cursor:default}
.grupper .gr.aktiv{background:rgba(20,22,27,.045)}
.grupper .gr.aktiv::before{background:var(--gul3)}
.grupper .gr.aktiv i{background:var(--gul);box-shadow:inset 0 0 0 1.5px var(--blak),0 0 12px rgba(234,153,2,.7)}
/* strömmen går på: när tavlan rullas in tänds grupperna en efter en, från matningen */
.tavla.tand .grupper .gr::before{background:rgba(20,22,27,.3);transition:background .5s var(--ease) calc(var(--n,0) * 90ms)}
.tavla.tand .grupper .gr i{box-shadow:inset 0 0 0 1.5px var(--blak2);transition:all .5s var(--ease) calc(var(--n,0) * 90ms + 100ms);
  animation:blink .7s var(--ease2) calc(var(--n,0) * 90ms + 100ms) backwards}
@keyframes blink{0%{background:transparent;box-shadow:inset 0 0 0 1.5px var(--blak4)}40%{background:var(--gul);box-shadow:inset 0 0 0 1.5px var(--blak),0 0 16px rgba(234,153,2,.9)}100%{background:transparent;box-shadow:inset 0 0 0 1.5px var(--blak2)}}
@media (prefers-reduced-motion:reduce){.tavla.tand .grupper .gr i{animation:none}}

/* bakgrund */
.om{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.om .txt p+p{margin-top:16px}
.om .txt strong{color:var(--blak);font-weight:600}
.portratt{position:relative;border-radius:var(--ram);overflow:hidden;box-shadow:var(--skugga);background:var(--papper2)}
.portratt img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.portratt .chip{left:14px;bottom:14px;right:auto}
.siffror{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(24px,4vw,56px);margin-top:clamp(30px,4vw,44px)}
.siffror b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,3.8vw,50px);letter-spacing:-.045em;color:var(--blak);line-height:1}
.siffror span{display:block;font-size:13.5px;color:var(--blak3);margin-top:8px}

/* kontakt: samma papper som resten av sidan, ingen skarv. Albin strök det vita arket med
   skugga och gult sken 2026-09-14: kanten mellan Bakgrund och Kontakt såg ut som ett band.
   Formuläret är ett vitt kort på papperet, som de andra korten. */
.kontakt{position:relative;z-index:3;background:var(--papper);color:var(--blak);padding:clamp(72px,9vw,124px) 0 clamp(60px,7vw,96px)}
.kgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.kontakt--info .kgrid{grid-template-columns:.78fr 1.22fr;align-items:start}
.kontakt--info .kv{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,38px)}
.kv{display:flex;flex-direction:column;gap:22px;margin-top:clamp(28px,3.4vw,40px)}
.kv .r .k{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blak3);margin-bottom:4px}
.kv .r .v{font-size:17px;color:var(--blak)}
.kv .v a{background-image:linear-gradient(var(--gul),var(--gul));background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.kv .v a:hover{background-size:100% 6px}
.kort{background:var(--vit);color:var(--blak);border-radius:calc(var(--ram) + 4px);padding:clamp(26px,3.6vw,44px);box-shadow:var(--skugga);display:grid;gap:16px}
.kort label{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blak3);display:block;margin-bottom:8px}
.kort input,.kort select,.kort textarea{width:100%;background-color:var(--papper);border:1px solid var(--linje-l);border-radius:14px;padding:14px 16px;color:var(--blak);
  font-family:var(--brod);font-size:16px;transition:border-color .3s,box-shadow .3s,background .3s}
.kort input::placeholder,.kort textarea::placeholder{color:#A6ABB3}
.kort input:focus,.kort select:focus,.kort textarea:focus{outline:0;border-color:rgba(20,22,27,.3);background-color:#fff;box-shadow:0 0 0 4px rgba(234,153,2,.3)}
.kort select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23646970' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.kort select:has(option[value=""]:checked){color:var(--blak3)}
.kort .tva{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kort .skicka{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
.kort .skicka span{font-size:13.5px;color:var(--blak3)}

/* sidfot: sand, loggan direkt på ytan */
.ft{background:var(--sand);color:var(--blak2);padding:clamp(48px,6vw,76px) 0 30px;position:relative;z-index:3}
.ft-rad{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:40px}
.ft h3{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blak);margin:0 0 16px}
.ft ul{list-style:none;padding:0;display:grid;gap:10px;font-size:15px}
.ft a:hover{color:var(--blak)}
.platta{display:inline-block;margin-bottom:18px}
.platta img{height:46px;width:auto}
.ft-bot{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(20,22,27,.1);font-size:13px;color:var(--blak2)}
.ft-bot a:hover{color:var(--blak)}

/* mobilrad */
.mobrad{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:none;gap:10px;transform:translateY(140%);transition:transform .45s var(--ease)}
.mobrad.inne{transform:none}
.mobrad a{flex:1;justify-content:center;padding:16px 18px;font-size:15px}

:focus-visible{outline:2px solid var(--gul);outline-offset:2px}
section[id],main[id]{scroll-margin-top:112px}

@media (max-width:1080px){
  .lankar{display:none}
  .meny{display:grid}
  .kn--liten{display:none}
  .rubrikrad,.omr,.om,.kgrid{grid-template-columns:1fr}
  .visning{grid-template-columns:1fr}
  .panel{display:none}
  .lista .glid{display:none}
  .lista{gap:10px}
  .rad{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;padding:14px 16px;background:#fff;box-shadow:var(--skugga);align-items:center}
  .rad .prick,.rad .pil,.rad .h{display:none}
  .rad .tumme{display:block;grid-row:1/3;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--papper2)}
  .rad .tumme img{width:100%;height:100%;object-fit:cover}
  .rad h3{color:var(--blak);font-size:18px}
  .rad .b{display:block;grid-column:2;font-size:14.5px;line-height:1.5;color:var(--blak2)}
  .ortband-bak::after{background:linear-gradient(180deg,rgba(246,244,239,.97) 0%,rgba(246,244,239,.86) 45%,rgba(246,244,239,.6) 100%)}
  .tavla{background:rgba(255,255,255,.96)}
  .ft-rad{grid-template-columns:1fr 1fr}
  .portratt img{aspect-ratio:4/3}
  .kontakt--info .kgrid{grid-template-columns:1fr}
  .kontakt--info .kv{margin-top:0}
}
@media (max-width:700px){
  :root{--kant:8px;--ram2:22px}
  .topp{padding:calc(var(--kant) + 8px) calc(var(--kant) + 8px) 0}
  .o{padding:7px 7px 7px 14px}
  .o .mark img{height:32px}
  .ring{padding:5px}
  .ring .nr{display:none}
  .hj{height:min(62svh,600px);min-height:400px}
  .hj-bild img{object-position:35% 30%}
  .hj-ljus{width:520px;height:520px;margin:-260px 0 0 -260px;left:50%;top:30%}
  .hj-kred{display:none}
  .hj-platta-rad{padding:0 var(--kant);margin-top:-52px}
  .hj-platta{padding:26px 22px 22px;border-radius:var(--ram)}
  .hj-platta h1{font-size:clamp(32px,9.4vw,42px)}
  .hj-led{font-size:16px}
  .hj-cta{display:grid;grid-template-columns:1fr;gap:18px;justify-items:start}
  .hj-cta .kn{width:100%;justify-content:center}
  .bevis{display:grid;grid-template-columns:1fr;font-size:13.5px;gap:9px;margin-top:22px;padding-top:16px}
  .bevis li{align-items:flex-start}
  .bevis li::before{margin-top:.5em}
  .br{display:none}
  .grupper .gr{padding:11px 4px 11px 30px}
  .kort .tva{grid-template-columns:1fr}
  .mobrad{display:flex}
  .siffror{grid-template-columns:repeat(3,auto);gap:22px}
  .ft-rad{grid-template-columns:1fr}
  .kontakt--info .kv{grid-template-columns:1fr}
  body{padding-bottom:76px}
  section[id],main[id]{scroll-margin-top:96px}
}
@media (max-width:560px){.grupper{grid-template-columns:1fr}}

/* ── tillägg för den skarpa sajten ────────────────────────────────── */

/* hoppa till innehållet, syns bara när den får fokus */
.hoppa{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gul);color:#111;
  font-family:var(--display);font-weight:700;font-size:14px;padding:12px 18px;border-radius:0 0 14px 0}
.hoppa:focus{left:0}
.kn:focus-visible,.ring:focus-visible,.gr:focus-visible{outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* aktiv sida i rullgardinsknapparna, panelerna och mobilpanelen: gul prick, ingen romb */
.fk.pa{color:var(--blak)}
.fk.pa::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gul)}
.fp a.pa{background:rgba(20,22,27,.05)}
.mp-tj a.pa,.mp-or a.pa,.mp-ov a.pa{background:rgba(20,22,27,.05);color:var(--blak)}

/* statusraden under formuläret */
.formnot{font-size:13.5px;color:var(--blak3)}
.formnot.ok{color:#1B7A3D}
.formnot.fel{color:#A32A1F}

/* CV-fältet på karriärsidan: filväljaren i sajtens knappform, resten av raden som ett
   vanligt fält. Hjälpraden under fältet säger format och storlek. */
.kort input[type="file"]{padding:9px 10px;font-size:14.5px;color:var(--blak2);cursor:pointer}
.kort input[type="file"]::file-selector-button{font-family:var(--display);font-weight:700;font-size:13.5px;color:#fff;background:var(--blak);
  border:0;border-radius:100px;padding:9px 16px;margin-right:14px;cursor:pointer;transition:background .3s var(--ease)}
.kort input[type="file"]:hover::file-selector-button{background:#23262D}
.kort .hint{display:block;margin-top:8px;font-size:13px;color:var(--blak3)}

/* tonade sektioner: vanliga frågor, ortstexten, koncernen, så söker du, verkstaden */
.sek--ton{background:var(--papper2)}

/* omdömen. Sektionen är utelämnad ur index.html sedan riktning E, tills de tre texterna
   finns: tomma platshållarkort på en skarp sajt ser genererade ut. Blocket ligger i
   git-historiken (commit aa35d00, <section id="omdomen">) och läggs tillbaka med de här
   reglerna, ljust, den dag texterna kommer. */
.citat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.ci{border-radius:var(--ram);padding:clamp(24px,3vw,32px);min-height:240px;background:#fff;box-shadow:var(--skugga);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ci:hover{transform:translateY(-3px)}
.stj{display:flex;gap:4px;color:#D2D5DA}
.ci .m{font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.4;color:var(--blak3);letter-spacing:-.015em}
.ci .f{font-size:13px;color:var(--blak3);display:flex;align-items:center;gap:10px}
.ci .f i{width:30px;height:30px;border-radius:50%;background:var(--papper2);flex:none}
@media (max-width:1080px){.citat{grid-template-columns:1fr}}

/* tacksidan, kort kvitto på papper */
.tack{min-height:100svh;display:grid;place-items:center;padding:140px var(--marg) 80px;text-align:left}
.tack-inne{max-width:56ch}
.tack h1{font-size:clamp(36px,5vw,64px);color:var(--blak)}
.tack .led{color:var(--blak2);margin-top:20px}
.tack .ater{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-family:var(--display);
  font-weight:600;font-size:15px;color:var(--blak2)}
.tack .ater:hover{color:var(--blak)}

/* ── undersidor ───────────────────────────────────────────────────── */

/* kort hjälte: samma fönster som startsidans, lägre, utan ljusskiva. Texten står på
   plattan under fönstret, som på startsidan, så fönstret behöver ingen padding för text. */
.hj--kort{height:min(52svh,600px);min-height:360px}
.hj--kort + .hj-platta-rad .hj-platta{max-width:900px;margin-inline:auto}
.hj--kort + .hj-platta-rad h1{font-size:clamp(34px,4.4vw,60px)}
.hj--kort + .hj-platta-rad .hj-led{max-width:56ch}
@media (max-width:700px){
  .hj--kort{height:min(44svh,420px);min-height:300px}
  .hj--kort + .hj-platta-rad h1{font-size:clamp(30px,8.6vw,40px)}
}

/* brödsmulan är kickern överst på plattan. Aktuell sida i svart, inte gult: gul text på
   vitt klarar inte kontrasten. */
.brod{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;color:var(--blak3)}
.brod a{color:var(--blak3);transition:color .25s}
.brod a:hover{color:var(--blak)}
.brod span[aria-current]{color:var(--blak)}
.brod .sep{color:var(--blak4)}

/* platshållarmärkningen i en hjälte: nere till höger i fotot, där krediten annars står */
.hj .chip{right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,22px)}

/* så går det till: lodrät lista med gula prickar, inga siffror */
.steg{list-style:none;padding:0;display:grid;gap:0;max-width:62ch}
.steg li{position:relative;padding:0 0 26px 34px}
.steg li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--gul);box-shadow:0 0 0 4px rgba(234,153,2,.2)}
.steg li::after{content:"";position:absolute;left:5px;top:22px;bottom:0;width:1px;background:var(--linje-l)}
.steg li:last-child{padding-bottom:0}
.steg li:last-child::after{display:none}
.steg h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--blak)}
.steg p{margin-top:6px;color:var(--blak2)}

/* vanliga frågor */
.fragor{display:grid;gap:12px;max-width:76ch}
.fraga{background:#fff;border-radius:var(--ram);box-shadow:var(--skugga);overflow:hidden}
.fraga summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px clamp(18px,2.4vw,28px);font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:-.02em;color:var(--blak)}
.fraga summary::-webkit-details-marker{display:none}
.fraga summary::after{content:"";flex:none;margin-left:auto;width:26px;height:26px;border-radius:50%;
  background:var(--papper2);background-image:linear-gradient(var(--blak),var(--blak)),linear-gradient(var(--blak),var(--blak));
  background-size:11px 1.5px,1.5px 11px;background-position:center,center;background-repeat:no-repeat;
  transition:transform .35s var(--ease)}
.fraga[open] summary::after{transform:rotate(135deg)}
.fraga .svar{padding:0 clamp(18px,2.4vw,28px) 22px;color:var(--blak2);max-width:66ch}
.fraga .svar p+p{margin-top:12px}

/* löptextlänkar: a ärver färg och har inget understreck globalt, så inlänkar i brödtext
   får en mörk linje som blir gul vid hover. Ortsbandet har samma regel sedan E, det är ljust. */
.fraga .svar a,.sek .led a,.steg p a,.ortstext a,.verkstad .v a,.ortband .led a{background-image:linear-gradient(var(--blak),var(--blak));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;color:var(--blak)}
.fraga .svar a:hover,.sek .led a:hover,.steg p a:hover,.ortstext a:hover,.verkstad .v a:hover,.ortband .led a:hover{
  background-image:linear-gradient(var(--gul3),var(--gul3));background-size:100% 2px}

/* tjänstelistan utan panel, på undersidor */
.visning--enkel{grid-template-columns:1fr}
.visning--enkel .lista{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* fem kort i ett tvåkolumnersrutnät lämnar ett hål sist: första kortet tar hela raden */
.visning--enkel .lista--fem .rad:first-child{grid-column:1/-1}
.visning--enkel .rad{background:#fff;box-shadow:var(--skugga);grid-template-columns:64px 1fr;
  grid-template-rows:auto auto;column-gap:16px;row-gap:2px;padding:14px 16px;align-items:center;transition:transform .35s var(--ease)}
.visning--enkel .rad .prick,.visning--enkel .rad .pil,.visning--enkel .rad .h{display:none}
.visning--enkel .rad .tumme{display:block;grid-row:1/3;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--papper2)}
.visning--enkel .rad .tumme img{width:100%;height:100%;object-fit:cover}
.visning--enkel .rad h3{color:var(--blak);font-size:18px}
.visning--enkel .rad .b{display:block;grid-column:2;font-size:14.5px;line-height:1.5;color:var(--blak2)}
.visning--enkel .rad:hover{transform:translateY(-2px)}
@media (max-width:760px){.visning--enkel .lista{grid-template-columns:1fr}}

/* ortsbandet i kort form: bara tavlan och en mening */
.ortband--kort{padding:clamp(38px,5vw,64px) clamp(22px,5vw,84px)}
.ortband--kort .omr{grid-template-columns:.85fr 1.15fr;align-items:center}
/* egen brytpunkt: regeln ovan är mer specifik än .omr-regeln i mediablocket längre upp */
@media (max-width:1080px){.ortband--kort .omr{grid-template-columns:1fr}}

/* textsektion på ortssidor */
.ortstext{max-width:68ch}
.ortstext p+p{margin-top:16px}

/* kontaktsidan och karriärsidan: blocket står på papper direkt under glasön, med plats för
   den. Ingen överlappning sedan E, inga skarvar: sektionen under är en vanlig tonad sektion. */
.kontakt--forst{padding-top:calc(clamp(72px,9vw,124px) + 92px)}
.verkstad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.verkstad .rader{display:grid;gap:18px}
.verkstad .k{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blak3);margin-bottom:4px}
.verkstad .v{font-size:16.5px;color:var(--blak)}
@media (max-width:1080px){.verkstad{grid-template-columns:1fr}}

/* 2026-09-17: kundens foton, mer liv och tre ortstyper.
   Spec: docs/superpowers/specs/2026-09-17-foton-liv-ortstyper-design.md */

/* fotobandet på startsidan: tre kundfoton, långsam zoom, bildtexten glider upp som en chip */
.fotoband{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:16px;margin-top:clamp(28px,3vw,40px)}
.fotoband figure{margin:0;position:relative;border-radius:var(--ram);overflow:hidden;box-shadow:var(--skugga);background:var(--papper2);aspect-ratio:4/3}
.fotoband img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease2)}
.fotoband figure:hover img{transform:scale(1.09)}
.fotoband figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--blak);padding:7px 13px;border-radius:100px;
  font-size:13px;font-weight:600;transform:translateY(calc(100% + 20px));transition:transform .5s var(--ease)}
.fotoband figure:hover figcaption{transform:none}
@media (hover:none){.fotoband figcaption{transform:none}}
@media (max-width:900px){.fotoband{grid-template-columns:1fr}}

/* teambilden är liggande, porträttplatsen var stående */
.portratt--ligg img{aspect-ratio:4/3}
.portratt img{transition:transform 1.4s var(--ease2)}
.portratt:hover img{transform:scale(1.05)}

/* industriorterna: tre tjänstekort med foto */
.trekort{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,3vw,40px)}
.trekort a{display:block;position:relative;background:var(--vit);border-radius:var(--ram);box-shadow:var(--skugga);overflow:hidden;color:var(--blak);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.trekort a:hover{transform:translateY(-4px);box-shadow:var(--skugga-lyft)}
.trekort .b{aspect-ratio:4/3;overflow:hidden;background:var(--papper2)}
.trekort .b img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease2)}
.trekort a:hover .b img{transform:scale(1.06)}
.trekort .t{padding:22px 24px 26px;position:relative}
.trekort h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.trekort p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--blak2)}

/* industriorterna: punktlistan, plinten är samma form som i gruppförteckningen */
.punkter{list-style:none;padding:0;margin-top:26px;display:grid;gap:12px;max-width:56ch}
.punkter li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.5;color:var(--blak2)}
.punkter li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:2px;background:var(--gul);box-shadow:inset 0 0 0 1.5px var(--blak)}

/* stadsorterna: tre beställarkort och ett brett foto */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,3vw,40px)}
.trio > div{position:relative;background:var(--vit);border-radius:var(--ram);box-shadow:var(--skugga);padding:26px 26px 28px;transition:transform .45s var(--ease)}
.trio > div:hover{transform:translateY(-4px)}
.trio h3{font-size:21px;font-weight:700;letter-spacing:-.02em;position:relative}
.trio p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--blak2);position:relative}
.fotorad{margin-top:clamp(28px,3vw,40px);border-radius:var(--ram);overflow:hidden;box-shadow:var(--skugga);position:relative;background:var(--papper2)}
.fotorad img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;display:block;transition:transform 1.6s var(--ease2)}
.fotorad:hover img{transform:scale(1.04)}
/* .chip är position:absolute men får sin placering först i en kontext, som .panel .chip
   och .portratt .chip. Utan raden nedan står chippen kvar på sin statiska plats, alltså
   under bilden, och .fotorad{overflow:hidden} klipper bort den: platshållarbilden hade
   gått live utan sin text. */
.fotorad .chip{left:14px;bottom:14px;right:auto}

/* näraorterna: restiden stort */
.restid{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.restid .tal{font-family:var(--display);font-weight:800;font-size:clamp(88px,12vw,168px);letter-spacing:-.06em;line-height:.9;color:var(--blak);white-space:nowrap}
.restid .tal small{display:block;font-family:var(--brod);font-size:clamp(16px,1.4vw,20px);letter-spacing:0;font-weight:600;color:var(--blak3);margin-top:12px;white-space:normal;line-height:1.4}
@media (max-width:900px){.trekort,.trio{grid-template-columns:1fr}.restid{grid-template-columns:1fr}.restid .tal{font-size:clamp(72px,20vw,110px)}}

/* ljusföljaren: ett orange sken följer pekaren över vita kort. Bara fin pekare, script.js
   sätter --mx och --my på det kort pekaren är över. ::before ligger under innehållet. */
@media (hover:hover) and (pointer:fine){
  .rad::before,.trekort a::before,.trio > div::before,.fraga::before,.uppm::before,.kort::before{content:"";position:absolute;inset:0;
    border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s var(--ease);
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(234,153,2,.22),transparent 60%)}
  .rad:hover::before,.trekort a:hover::before,.trio > div:hover::before,.fraga:hover::before,.uppm:hover::before,.kort:hover::before{opacity:1}
  .fraga,.uppm,.kort{position:relative}
  .fraga summary,.fraga .svar,.uppm-t,.uppm-v,.kort > *{position:relative;z-index:1}
}

/* kabeldragningen: skapas av script.js i main.kropp på breda skärmar med fin pekare.
   Den orange ledaren ritas i takt med skrollen ovanpå den grå banan. */
.kabel{position:absolute;left:0;top:0;width:80px;pointer-events:none;z-index:1;overflow:visible}
.kabel path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kabel-bak{stroke:rgba(20,22,27,.12)}
.kabel-led{stroke:var(--gul)}
@media (max-width:1080px),(prefers-reduced-motion:reduce){.kabel{display:none}}

/* djup i hjälten: script.js sätter transform på .hj-bild och formulärkolumnen, will-change här */
@media (min-width:1081px) and (hover:hover) and (pointer:fine){.hj-bild,.hj-platta-rad--start .hj-formkol{will-change:transform}}

/* prefers-reduced-motion, samlat: hovringarna i de två blocken ovan (fotobandet, porträttet,
   trekorten, trio-korten, fotoraden) och ljusföljarens sken rör sig annars även med
   rörelsereducering påslagen i OS:et, vilket designspecen förbjuder. Reglerna samlas här i
   stället för vid var sin regel däruppe, så nästa rörelse som läggs till hamnar på samma
   ställe. Bara transition och transform stängs av, aldrig display eller position: inget av
   det här får ändra höjd eller layout i något läge, med eller utan reduced motion. */
@media (prefers-reduced-motion:reduce){
  .fotoband img,.fotoband figure:hover img{transition:none;transform:none}
  /* bildtexten ska stå framme hela tiden, precis som på pekskärm utan hovring (se hover:none ovan) */
  .fotoband figcaption{transition:none;transform:none}
  .portratt img{transition:none}
  .portratt:hover img{transform:none}
  .trekort a{transition:none}
  .trekort a:hover{transform:none}
  .trekort .b img{transition:none}
  .trekort a:hover .b img{transform:none}
  .trio > div{transition:none}
  .trio > div:hover{transform:none}
  .fotorad img{transition:none}
  .fotorad:hover img{transform:none}
  /* skenet ska inte synas alls: JS sätter inga --mx/--my under reduced motion, men CSS:ens
     förvalda 50/50 hade annars visat glöden centrerad på kortet vid hovring */
  .rad::before,.trekort a::before,.trio > div::before,.fraga::before,.uppm::before,.kort::before{transition:none}
  .rad:hover::before,.trekort a:hover::before,.trio > div:hover::before,.fraga:hover::before,.uppm:hover::before,.kort:hover::before{opacity:0}
}