/* sd-komponenter.css – Samisk Design o Material. Komponenter valda i designfasen (okt 2026):
   R2 header · H1 hero · I2 inforad · T1 sortiment · O2 om · P2 process · A2 områden · F3 FAQ · K2 kontakt · S2 sidfot · B2 brödtext undersidor.
   Laddas SIST. Kopieras ordagrant – ändra inte klassnamn, mått, brytpunkter eller regler. Rörelse: kit/motion (data-motion) + sd-komponenter.js. */

  :root{--snow:#F6F4EF;--beige:#EDE9E0;--white:#fff;--ink:#2B2B2B;--body:#4A4A48;--mut:#6B6A66;--red:#BB0825;--red-d:#97061D;--yellow:#F7CF19;--moss:#424922;
--fjall:#1F3B5C;--fjall-d:#142943;--fjall-m:#2E5276;--fjall-l:#4E7397;--fjall-ink:#DCE6EF;--line:#DDD6C8;
--f-head:"Poppins","Segoe UI",sans-serif;--f-body:"Nunito Sans","Segoe UI",sans-serif;--gutter:clamp(20px,4vw,56px);--container:1320px;--container-wide:1520px;
--ease:cubic-bezier(.2,.7,.2,1);--band:url("/assets/img/kantband.webp");
}
[class^="sd-"],[class*=" sd-"],[class^="sd-"] *,[class*=" sd-"] *{box-sizing:border-box}
:where([class^="sd-"],[class*=" sd-"]) :where(h1,h2,h3){font-family:var(--f-head);font-weight:700;margin:0;color:inherit;text-wrap:balance}
:where([class^="sd-"],[class*=" sd-"]) :where(p){margin:0}
:where([class^="sd-"],[class*=" sd-"]) :where(a){color:inherit;text-decoration:none}
:where([class^="sd-"],[class*=" sd-"]) :where(img,picture){display:block;width:100%;height:100%;object-fit:cover}
[class*="sd-"] a:focus-visible,[class*="sd-"] button:focus-visible,[class*="sd-"] summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.sd-wrap{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sd-sec{padding-block:clamp(64px,7vw,120px)}
.sd-kick{display:flex;align-items:center;gap:12px;font:700 12px/1.2 var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sd-kick::before{content:"";width:28px;height:10px;flex:0 0 auto;background:var(--band) repeat-x left center/auto 100%}
.sd-kick--c{justify-content:center}
.sd-h1{font-size:clamp(40px,5.2vw,80px);line-height:1.04;letter-spacing:-.015em}
.sd-h2{font-size:clamp(30px,3.4vw,52px);line-height:1.1;letter-spacing:-.01em}
.sd-lead{font-size:clamp(17px,1.25vw,20px);color:var(--body);max-width:58ch}
.sd-band{display:block;height:16px;background:var(--band) repeat-x left center/auto 100%}
.sd-band--s{height:10px;width:120px}
.sd-fjall{display:block;width:100%;height:auto}
.sd-btns{display:flex;flex-wrap:wrap;gap:12px}
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:6px;font:600 15px/1 var(--f-head);border:2px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;cursor:pointer}
.sd-btn svg{transition:transform .3s var(--ease)}
.sd-btn:hover{transform:translateY(-2px)}
.sd-btn:hover svg{transform:translate(3px,-3px)}
.sd-btn--red{background:var(--red);color:#fff;box-shadow:0 8px 20px -10px rgba(187,8,37,.8)}
.sd-btn--red:hover{background:var(--red-d)}
.sd-btn--line{border-color:currentColor}
.sd-btn--line:hover{background:rgba(127,127,127,.14)}
.sd-btn--white{background:#fff;color:var(--fjall-d)}
.sd-btn--white:hover{background:var(--yellow)}
.sd-lift{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sd-lift:hover{transform:translateY(-6px);box-shadow:0 24px 44px -22px rgba(20,41,67,.5)}
.sd-zoom img{transition:transform 1.1s var(--ease)}
.sd-zoom:hover img{transform:scale(1.07)}
/* navigation: delad av alla headers */
.sd-nav{display:flex;align-items:center;gap:6px;margin-inline:auto;font:600 15px/1 var(--f-head)}
.sd-nav>div{position:relative}
.sd-nav__t{position:relative;display:inline-flex;align-items:center;gap:6px;padding:14px 12px;border-radius:6px;transition:color .25s,background .25s}
.sd-nav__t svg{transition:transform .3s var(--ease)}
.sd-nav__t::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:var(--nav-acc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sd-nav__t:hover::after,.sd-nav>div:focus-within>.sd-nav__t::after,.sd-nav>div:hover>.sd-nav__t::after,.sd-nav__t.is-on::after{transform:scaleX(1)}
.sd-nav>div:hover>.sd-nav__t svg,.sd-nav>div:focus-within>.sd-nav__t svg{transform:rotate(180deg)}
.sd-dd{position:absolute;top:calc(100% + 4px);left:0;z-index:40;min-width:260px;background:#fff;color:var(--ink);border-radius:12px;border:1px solid var(--line);box-shadow:0 30px 50px -24px rgba(20,41,67,.45);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;overflow:hidden}
.sd-dd::before{content:"";display:block;height:6px;margin:-10px -10px 8px;background:var(--band) repeat-x left center/auto 100%}
.sd-nav>div:hover>.sd-dd,.sd-nav>div:focus-within>.sd-dd{opacity:1;visibility:visible;transform:none}
.sd-dd a{display:grid;grid-template-columns:52px 1fr;gap:2px 12px;align-items:center;padding:8px;border-radius:8px;transition:background .2s}
.sd-dd a:hover{background:var(--snow)}
.sd-dd a img{grid-row:span 2;width:52px;height:40px;border-radius:5px}
.sd-dd a b{font:600 14px/1.2 var(--f-head);color:var(--fjall-d)}
.sd-dd a small{font:400 12px/1.3 var(--f-body);color:var(--mut)}
.sd-dd--ort{min-width:220px}
.sd-dd--ort a{grid-template-columns:1fr auto;padding:10px 12px}
.sd-dd--ort a small{text-align:right}
.sd-burger{display:none;width:46px;height:46px;border-radius:8px;border:1.5px solid currentColor;background:none;color:inherit;align-items:center;justify-content:center;cursor:pointer}
.sd-burger .b2{transition:opacity .2s}
.sd-burger path{transition:transform .3s var(--ease);transform-origin:center}
.is-open .sd-burger .b1{transform:translateY(6px) rotate(45deg)}
.is-open .sd-burger .b2{opacity:0}
.is-open .sd-burger .b3{transform:translateY(-6px) rotate(-45deg)}
.sd-mnav{display:none}
@media (max-width:900px){
 .sd-nav{display:none}.sd-burger{display:inline-flex}
 .sd-mnav{display:block;position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;color:var(--ink);padding:6px var(--gutter) 22px;box-shadow:0 30px 40px -30px rgba(20,41,67,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s var(--ease)}
 .is-open .sd-mnav{opacity:1;visibility:visible;transform:none}
 .sd-mnav a:not(.sd-btn){display:flex;justify-content:space-between;align-items:center;min-height:54px;border-bottom:1px solid var(--line);font:600 18px var(--f-head);color:var(--fjall-d)}
 .sd-mnav small{font:400 13px var(--f-body);color:var(--mut)}
 .sd-mnav .sd-btns{margin-top:18px}}
/* snöfall: två lager prickar som faller */
.sd-snow{position:absolute;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(2px 2px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 90px 120px,rgba(255,255,255,.8) 50%,transparent 51%),radial-gradient(2.5px 2.5px at 160px 60px,rgba(255,255,255,.9) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 230px 170px,rgba(255,255,255,.7) 50%,transparent 51%),radial-gradient(2px 2px at 300px 90px,#fff 50%,transparent 51%);background-size:320px 220px;opacity:.55;animation:sd-snow 18s linear infinite}
.sd-snow--b{background-size:460px 300px;opacity:.35;animation-duration:30s;filter:blur(.6px)}
@keyframes sd-snow{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:40px 220px,-30px 220px,20px 220px,-40px 220px,10px 220px}}
.sd-snow--b{animation-name:sd-snow2}
@keyframes sd-snow2{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:-50px 300px,30px 300px,-20px 300px,40px 300px,-10px 300px}}
@keyframes sd-float{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-10px) rotate(.5deg)}}
@keyframes sd-fade3{0%,28%{opacity:1}33%,95%{opacity:0}100%{opacity:1}}
@keyframes sd-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* ===== header (R2) ===== */
.sd-r2{position:relative;z-index:20;background:#fff;box-shadow:0 1px 0 var(--line);color:var(--fjall-d);--nav-acc:var(--yellow)}
.sd-r2__in{display:flex;align-items:center;gap:20px;min-height:84px}
.sd-r2__logo{width:230px;height:auto;object-fit:contain}
.sd-r2__act{display:flex;gap:16px;align-items:center}
.sd-r2__open{display:flex;align-items:center;gap:8px;font:600 13px var(--f-head);color:var(--moss)}
.sd-r2__open i{position:relative;width:9px;height:9px;border-radius:50%;background:#2F8A49}
.sd-r2__open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2F8A49;animation:sd-pulse 1.8s ease-out infinite}
.sd-r2__act .sd-btn{min-height:44px;font-size:14px}
@media (max-width:1100px){.sd-r2__open{display:none}}
@media (max-width:900px){.sd-r2__in{justify-content:space-between;min-height:68px}.sd-r2__logo{width:170px}.sd-r2__act .sd-btn{width:auto;padding:0 14px}}
@media (max-width:480px){.sd-r2__act .sd-btn{display:none}}

/* ===== hero (H1) ===== */
.sd-fjp{position:relative;height:var(--h)}.sd-fjp>svg{position:absolute;inset:0;width:100%;height:100%}
.sd-h1s{position:relative;background:linear-gradient(180deg,#0E1F33 0%,var(--fjall-d) 30%,var(--fjall) 75%);color:#fff;overflow:hidden}
.sd-h1s__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;padding-block:clamp(56px,6vw,104px) clamp(130px,11vw,180px)}
.sd-h1s__txt{display:grid;gap:22px}
.sd-h1s .sd-kick{color:var(--yellow)}
.sd-h1s em{font-style:normal;color:var(--yellow)}
.sd-h1s .sd-lead{color:var(--fjall-ink)}
.sd-h1s .sd-btn--line{color:#fff}
.sd-h1s .sd-btn--line:hover{color:var(--fjall-d);background:#fff}
.sd-h1s__img{margin:0;background:#fff;padding:10px;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.35);animation:sd-float 7s ease-in-out infinite}
.sd-h1s__sl{position:relative;aspect-ratio:7/5;border-radius:4px;overflow:hidden}
.sd-h1s__sl>*{position:absolute;inset:0;animation:sd-fade3 15s infinite}
.sd-h1s__sl>*:nth-child(2){animation-delay:5s;opacity:0}.sd-h1s__sl>*:nth-child(3){animation-delay:10s;opacity:0}
.sd-h1s__img figcaption{font:500 12px var(--f-body);color:var(--mut);padding:8px 4px 0}
.sd-h1s__fj{position:absolute;inset:auto 0 16px;z-index:1}
.sd-h1s>.sd-band{position:relative;z-index:2}
@media (max-width:760px){.sd-h1s__grid{grid-template-columns:1fr;padding-bottom:120px}.sd-h1s__img{animation:none}}

/* ===== info (I2) ===== */
.sd-i2{background:var(--fjall-d);color:var(--fjall-ink)}
.sd-i2__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:24px}
.sd-i2__g>*{display:flex;gap:12px;align-items:center}
.sd-i2 svg{color:var(--yellow);flex:0 0 auto;transition:transform .4s var(--ease)}
.sd-i2__g>a:hover svg{transform:translateY(-4px) scale(1.12)}
.sd-i2__g>a:hover b{color:var(--yellow)}
.sd-i2 p{font-size:14px;display:grid}
.sd-i2 b{font:600 15px var(--f-head);color:#fff;transition:color .2s}
@media (max-width:760px){.sd-i2__g{grid-template-columns:1fr 1fr}}

/* ===== sortiment (T1) ===== */
.sd-t1__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:44px}
.sd-t1__head>div{display:grid;gap:12px}
.sd-t1__head .sd-h2{color:var(--fjall-d)}
.sd-t1{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sd-t1__c{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .3s,box-shadow .3s}
.sd-t1__c:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(20,41,67,.12)}
.sd-t1__img{aspect-ratio:4/3;overflow:hidden}
.sd-t1__b span svg{transition:transform .3s}
.sd-t1__c:hover .sd-t1__b span svg{transform:translate(3px,-3px)}
.sd-t1__c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--band) repeat-x left center/auto 100%;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.sd-t1__c:hover::after{transform:scaleX(1)}
.sd-t1__b{display:grid;gap:8px;align-content:start;padding:18px 20px 22px}
.sd-t1__b h3{font-size:20px;color:var(--fjall-d)}
.sd-t1__b p{font-size:15px;color:var(--body)}
.sd-t1__b span{display:inline-flex;gap:6px;align-items:center;font:600 14px var(--f-head);color:var(--red);margin-top:6px}
@media (max-width:1000px){.sd-t1{grid-template-columns:1fr 1fr}.sd-t1__head{grid-template-columns:1fr}}
@media (max-width:420px){.sd-t1{grid-template-columns:1fr}}

/* ===== om (O2) ===== */
.sd-o2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.sd-o2__txt{display:grid;gap:20px}
.sd-o2 .sd-h2{color:var(--fjall-d)}
.sd-o2__g{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;gap:14px}
.sd-o2__g figure{margin:0;border-radius:10px;overflow:hidden;position:relative;transition:transform .4s var(--ease)}
.sd-o2__g figure:hover{transform:rotate(-1deg) scale(1.02)}
.sd-o2__a{grid-row:span 2;aspect-ratio:4/5}
.sd-o2__b{aspect-ratio:1}
.sd-o2__b figcaption{position:absolute;left:8px;bottom:8px;background:rgba(20,41,67,.8);color:#fff;font-size:12px;padding:3px 8px;border-radius:4px}
.sd-o2__ph{display:grid;place-content:center;text-align:center;gap:4px;aspect-ratio:1;border:2px dashed var(--fjall-l);border-radius:10px;font:700 15px var(--f-head);color:var(--fjall)}
.sd-o2__ph small{font:400 13px var(--f-body);color:var(--mut)}
@media (max-width:760px){.sd-o2{grid-template-columns:1fr}}

/* ===== process (P2) ===== */
.sd-p2s{position:relative;background:var(--fjall-d);color:#fff;overflow:hidden}
.sd-p2s .sd-wrap{position:relative;z-index:2}
.sd-p2s .sd-kick{color:var(--yellow)}
.sd-p2s .sd-h2{margin-top:12px}
.sd-p2__line{display:block;width:100%;height:clamp(90px,10vw,160px);margin-top:40px}
.sd-p2{list-style:none;margin:-14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sd-p2 li{display:grid;gap:8px;align-content:start}
.sd-p2 b{display:grid;place-content:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--fjall-d);font:700 18px var(--f-head);transition:transform .35s var(--ease),box-shadow .35s}
.sd-p2 li:hover b{transform:scale(1.15);box-shadow:0 0 0 8px rgba(247,207,25,.2)}
.sd-p2 h3{font-size:19px}
.sd-p2 p{font-size:15px;color:var(--fjall-ink)}
@media (max-width:760px){.sd-p2__line{display:none}.sd-p2{grid-template-columns:1fr;margin-top:32px}.sd-p2 li{grid-template-columns:44px 1fr;column-gap:16px}.sd-p2 b{grid-row:span 2}}

/* ===== omraden (A2) ===== */
.sd-a2{position:relative;background:linear-gradient(180deg,var(--fjall-d),var(--fjall));color:#fff;padding-top:clamp(64px,7vw,120px);overflow:hidden}
.sd-a2 .sd-wrap{position:relative;z-index:2;display:grid;gap:18px;justify-items:center;text-align:center}
.sd-a2 .sd-kick{color:var(--yellow)}
.sd-a2 .sd-lead{color:var(--fjall-ink)}
.sd-a2__fj{position:relative;margin-top:clamp(40px,5vw,80px)}
.sd-a2__fj svg{display:block;width:100%;height:clamp(200px,22vw,320px)}
.sd-a2__p{list-style:none;margin:0;padding:0}
.sd-a2__p li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%)}
.sd-a2__p a{display:grid;justify-items:center;text-align:center;padding:6px 12px;border-radius:8px;transition:background .3s,transform .35s var(--ease)}
.sd-a2__p a:hover{background:rgba(255,255,255,.12);transform:translateY(-6px)}
.sd-a2__p b{font:600 15px var(--f-head)}
.sd-a2__p span{font-size:12px;color:var(--fjall-ink)}
.sd-a2__p .is-shop b{font-size:19px;color:var(--yellow)}
.sd-a2__p i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--yellow);margin-bottom:4px}
.sd-a2__p i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yellow);animation:sd-pulse 2s ease-out infinite}
@media (max-width:760px){.sd-a2__p{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:16px var(--gutter) 32px;background:var(--fjall-d)}.sd-a2__p li{position:static;transform:none}.sd-a2__fj svg{height:120px}}

/* ===== faq (F3) ===== */
.sd-f3s{position:relative;background:var(--fjall-d);color:#fff;padding-top:clamp(64px,7vw,120px);overflow:hidden}
.sd-f3s .sd-wrap{position:relative;z-index:2}
.sd-f3s .sd-kick{color:var(--yellow)}
.sd-f3s .sd-h2{margin:12px 0 32px}
.sd-f3{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-bottom:40px}
.sd-f3__q{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;transition:background .3s}
.sd-f3__q[open],.sd-f3__q:hover{background:rgba(255,255,255,.1)}
.sd-f3__q summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;font:600 16px var(--f-head);cursor:pointer;list-style:none}
.sd-f3__q summary::-webkit-details-marker{display:none}
.sd-f3__q summary span{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--yellow);position:relative;transition:transform .35s var(--ease)}
.sd-f3__q summary span::before{content:"";position:absolute;left:6px;right:6px;top:10px;height:2px;background:var(--fjall-d)}
.sd-f3__q summary span::after{content:"";position:absolute;top:6px;bottom:6px;left:10px;width:2px;background:var(--fjall-d);transition:transform .3s}
.sd-f3__q[open] summary span{transform:rotate(180deg)}
.sd-f3__q[open] summary span::after{transform:scaleY(0)}
.sd-f3__q p{padding:0 20px 18px;color:var(--fjall-ink)}
.sd-f3__card{display:grid;gap:4px;padding:22px;border-radius:10px;background:var(--red);transition:transform .35s var(--ease)}
.sd-f3__card:hover{transform:translateY(-4px)}
.sd-f3__card span{font-size:14px}
.sd-f3__card b{font:700 28px var(--f-head)}
.sd-f3__card small{font-size:13px;opacity:.85}
@media (max-width:760px){.sd-f3{grid-template-columns:1fr}}

/* ===== kontakt (K2) ===== */
.sd-k2{background:var(--snow);padding-bottom:clamp(64px,7vw,120px)}
.sd-k2>svg.sd-fjall{height:clamp(60px,7vw,110px);transform:scaleY(-1);background:var(--fjall)}
.sd-k2__g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(40px,5vw,80px)}
.sd-k2__l{display:grid;gap:14px}
.sd-k2 .sd-h2{color:var(--fjall-d)}
.sd-k2__tel{font:700 clamp(36px,5vw,72px)/1 var(--f-head);color:var(--red);margin-top:10px}
.sd-k2__mail{font:600 18px var(--f-head);color:var(--fjall-d);text-decoration:underline;text-underline-offset:4px}
.sd-k2__card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:22px;border-top:10px solid transparent;border-image:var(--band) 100% 0 0 0/10px 0 0 0 round}
.sd-k2__card h3{font-size:16px;color:var(--fjall-d);margin-bottom:6px}
.sd-k2__card dl{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:0}
.sd-k2__card dd{margin:0;font-weight:700}
.sd-k2__map{display:inline-flex;gap:6px;align-items:center;font:600 15px var(--f-head);color:var(--red)}
@media (max-width:760px){.sd-k2__g{grid-template-columns:1fr}}

/* ===== sidfot (S2) ===== */
.sd-s2{background:var(--snow)}

.sd-s2__in{background:var(--fjall-d);color:var(--fjall-ink);padding-block:clamp(24px,3vw,48px) 36px;font-size:15px}
.sd-s2 .sd-kick{color:var(--yellow)}
.sd-s2__tel{transition:color .3s;display:block;font:700 clamp(44px,7vw,104px)/1 var(--f-head);color:#fff;margin:10px 0 24px}
.sd-s2__row{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:32px;align-items:start;margin-top:32px}
.sd-s2__plate{background:#fff;border-radius:6px;padding:8px 12px}
.sd-s2__plate img{width:180px;height:auto;object-fit:contain}
.sd-s2 a:hover,.sd-s2__tel:hover{color:var(--yellow)}
@media (max-width:760px){.sd-s2__row{grid-template-columns:1fr 1fr}.sd-s2__row>span{grid-column:1/-1;justify-self:start}}

/* ===== brodtext (B2) ===== */
.sd-b2__h{display:grid;gap:14px;max-width:880px;margin-bottom:40px}
.sd-b2 .sd-h2,.sd-b2__h .sd-h2{color:var(--fjall-d)}
.sd-b2__ing{font:600 clamp(19px,1.6vw,24px)/1.5 var(--f-head);color:var(--fjall)}
.sd-b2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sd-b2__k{display:grid;gap:12px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px}
.sd-b2__k:last-child:nth-child(odd){grid-column:1/-1}
.sd-b2__k-n{font:700 14px var(--f-head);color:var(--red);letter-spacing:.1em}
.sd-b2__k h3{font-size:21px;color:var(--fjall-d)}
.sd-b2__k p{color:var(--body)}
.sd-b2__bra{margin-top:18px;background:var(--fjall-d);color:var(--fjall-ink);border-radius:12px;overflow:hidden}
.sd-b2__bra>div{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:22px 28px}
.sd-b2__bra b{font:700 16px var(--f-head);color:var(--yellow)}
@media (max-width:760px){.sd-b2{grid-template-columns:1fr}.sd-b2__bra>div{grid-template-columns:1fr;gap:6px}}

/* ===== tillägg för bygget (Körning 1) ===== */
/* bildramar: bygget slår in <img> i <picture> */
.sd-h1s__sl>picture,.sd-t1__img>picture,.sd-o2__g figure>picture,[data-motion~="clip-reveal"]>picture{display:block;width:100%;height:100%}
.sd-t1__img img,.sd-o2__g figure img{width:100%;height:100%;object-fit:cover}
/* kantbandet vävs fram (sd-komponenter.js sätter .is-in) */
.motion-ready [data-sd-band]{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease)}
.motion-ready [data-sd-band].is-in{clip-path:inset(0 0 0 0)}
/* öppet nu / stängt nu */
[data-oppet].is-stangt i,[data-oppet].is-stangt i::after{background:#9A9890;animation:none}
/* undersida: hero-modifierare */
.sd-h1s--sub .sd-h1s__grid{padding-block:clamp(40px,4vw,72px) clamp(110px,9vw,150px)}
.sd-h1s--sub .sd-h1{font-size:clamp(36px,4.2vw,64px)}
.sd-crumbs{display:flex;flex-wrap:wrap;gap:6px;font:600 13px var(--f-head);color:var(--fjall-ink)}
.sd-crumbs a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.sd-crumbs span[aria-hidden]{opacity:.6}
.sd-h1s--sub .sd-h1s__img{animation:none;transform:rotate(1deg)}
.sd-h1s--sub .sd-h1s__one{aspect-ratio:7/5;border-radius:4px;overflow:hidden}
/* undersida: rubrik över relaterade kort och process */
.sd-rel__h{display:grid;gap:12px;margin-bottom:36px}
.sd-rel__h .sd-h2{color:var(--fjall-d)}
.sd-t1--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.sd-t1--3{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.sd-t1--3{grid-template-columns:1fr}}
/* A2: ortens position på silhuetten */
.sd-a2__p li[data-ort="karesuando"]{--x:26.4%;--y:18%}
.sd-a2__p li[data-ort="kiruna"]{--x:52.8%;--y:35%}
.sd-a2__p li[data-ort="gallivare"]{--x:69.4%;--y:45%}
.sd-a2__p li[data-ort="lulea"]{--x:86.8%;--y:48%}
.sd-a2__p li[data-ort="jokkmokk"]{--x:10.4%;--y:55%}
.sd-a2__p span.sd-a2__ort{display:grid;justify-items:center;text-align:center;padding:6px 12px}
/* K2 utan egen fjällkant */
.sd-k2{padding-top:clamp(24px,3vw,48px)}
/* mobil bokningsrad (ligger sist i <body>, utanför headern) */
.sd-bokrad{display:none}
@media (max-width:900px){
 .sd-bokrad{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;box-shadow:0 -10px 30px -16px rgba(20,41,67,.5)}
 .sd-bokrad .sd-btn{min-height:48px;font-size:14px;padding:0 10px;width:auto}
 body{padding-bottom:72px}}
/* header sticky + skugga vid scroll */
.sd-r2{position:sticky;top:0}
.sd-r2.is-scrolled{box-shadow:0 10px 30px -18px rgba(20,41,67,.45)}
@media (prefers-reduced-motion:reduce){.sd-snow,.sd-h1s__img,.sd-h1s__sl>*,.sd-r2__open i::after,[data-oppet] i::after{animation:none!important}.sd-h1s__sl>*:not(:first-child){display:none}[data-sd-band]{clip-path:none!important}}

/* ===== Reparation 1 (okt 2026): ortetiketter läsbara + mer rörelse ===== */
/* A2: positioneringen ligger i "translate" så att motion-kitets transform (stagger) inte flyttar etiketterna */
.sd-a2__p li{transform:none;translate:-50% -100%}
.sd-a2__p a,.sd-a2__p span.sd-a2__ort{background:rgba(14,31,51,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(220,230,239,.18);border-radius:10px;padding:7px 14px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.sd-a2__p b{color:#fff}
.sd-a2__p span{color:var(--fjall-ink)}
.sd-a2__p .is-shop b{color:var(--yellow)}
.sd-a2__p a,.sd-a2__p span.sd-a2__ort{animation:sd-bob 5s ease-in-out infinite}
.sd-a2__p li:nth-child(2)>*{animation-delay:-1s}.sd-a2__p li:nth-child(3)>*{animation-delay:-2s}.sd-a2__p li:nth-child(4)>*{animation-delay:-3s}.sd-a2__p li:nth-child(5)>*{animation-delay:-4s}
@keyframes sd-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (max-width:760px){.sd-a2__p li{translate:none}.sd-a2__p a,.sd-a2__p span.sd-a2__ort{animation:none}.sd-a2__p a,.sd-a2__p span.sd-a2__ort{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Kantbandet i kickers "vävs" långsamt */
.sd-kick::before{animation:sd-flow 9s linear infinite}
@keyframes sd-flow{to{background-position:-70px center}}

/* Header: gul läsprogress under headern */
.sd-r2::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--yellow);transform-origin:left;transform:scaleX(var(--sd-sp,0));pointer-events:none}

/* Knappar: ljusglimt som sveper över vid hover + magnetisk förskjutning (JS sätter --mx/--my) */
.sd-btn{position:relative;overflow:hidden;isolation:isolate;translate:var(--mx,0) var(--my,0);transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.sd-btn::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);z-index:-1;transition:left .7s var(--ease)}
.sd-btn:hover::after{left:120%}

/* Hero: fotoramen och fjällen följer muspekaren lätt (JS sätter --px/--py, -1…1) */
.sd-h1s__img{translate:calc(var(--px,0)*-10px) calc(var(--py,0)*-8px);rotate:calc(var(--px,0)*1.2deg);transition:translate .6s var(--ease),rotate .6s var(--ease)}
.sd-h1s__fj{left:-40px;right:-40px;translate:calc(var(--px,0)*14px) 0;transition:translate .8s var(--ease)}
.sd-h1s .sd-snow{translate:calc(var(--px,0)*-18px) 0;transition:translate 1s var(--ease)}
/* tätare snö i heron */
.sd-h1s .sd-snow{opacity:.75}
.sd-h1s .sd-snow--b{opacity:.5}

/* Inforad: ikonerna gungar i tur och ordning */
.sd-i2 svg{animation:sd-ikon 6s ease-in-out infinite}
.sd-i2__g>*:nth-child(2) svg{animation-delay:1.5s}.sd-i2__g>*:nth-child(3) svg{animation-delay:3s}.sd-i2__g>*:nth-child(4) svg{animation-delay:4.5s}
@keyframes sd-ikon{0%,20%,100%{transform:none}8%{transform:translateY(-5px) rotate(-6deg)}14%{transform:translateY(0) rotate(4deg)}}

/* Sortiment: korten lutar mot pekaren (JS sätter --rx/--ry) + glans */
.sd-t1{perspective:1200px}
.sd-t1__c{transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .4s}
.sd-t1__c.is-tilt{rotate:none;transform:translateY(-6px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg))}
.sd-t1__c::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .3s}
.sd-t1__c.is-tilt::before{opacity:1}

/* Om: bilderna rör sig i olika takt vid scroll (JS sätter --sy) */
.sd-o2__a{translate:0 calc(var(--sy,0)*-30px)}
.sd-o2__b:nth-of-type(2){translate:0 calc(var(--sy,0)*20px)}
.sd-o2__b:nth-of-type(3){translate:0 calc(var(--sy,0)*45px)}

/* Process: en gul prick vandrar längs fjällstigen; stegen tänds när pricken passerar */
.sd-p2__line{overflow:visible}
.sd-p2__dot{filter:drop-shadow(0 0 6px rgba(247,207,25,.9))}
.sd-p2 li b{transition:transform .4s var(--ease),box-shadow .4s,background .4s}
.sd-p2 li.is-on b{transform:scale(1.18);box-shadow:0 0 0 10px rgba(247,207,25,.18);background:#fff}
.sd-p2 li.is-on h3{color:var(--yellow)}
.sd-p2 h3{transition:color .4s}

/* FAQ: mjuk öppning (JS animerar höjden) */
.sd-f3__q p{animation:none}
.sd-f3__q.is-anim{overflow:hidden;transition:height .38s var(--ease)}

/* Kontakt + sidfot: telefonnumret skimrar vid hover */
.sd-k2__tel{transition:color .3s,letter-spacing .4s var(--ease)}
.sd-k2__tel:hover{color:var(--fjall-d);letter-spacing:.01em}
.sd-s2__tel{transition:color .3s,letter-spacing .4s var(--ease)}
.sd-s2__tel:hover{letter-spacing:.01em}
.sd-k2__card{transition:transform .4s var(--ease),box-shadow .4s}
.sd-k2__card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 30px 50px -30px rgba(20,41,67,.45)}

@media (prefers-reduced-motion:reduce){.sd-kick::before,.sd-a2__p a,.sd-a2__p span.sd-a2__ort,.sd-i2 svg{animation:none!important}.sd-btn,.sd-h1s__img,.sd-h1s__fj,.sd-h1s .sd-snow,.sd-o2__a,.sd-o2__b{translate:none!important}.sd-t1__c{transform:none!important}.sd-r2::after{display:none}}

/* rev3 – knappar på mörk fjällbakgrund (A2 områden): vit linjeknapp, inverteras vid hovring */
.sd-a2 .sd-btn--line{color:#fff!important;border-color:rgba(255,255,255,.75)}
.sd-a2 .sd-btn--line:hover{color:var(--fjall-d)!important;background:#fff;border-color:#fff}
.sd-a2__fj+.sd-btns{margin-top:0!important;padding-block:12px clamp(48px,5vw,72px);background:var(--fjall-d);box-shadow:0 0 0 100vmax var(--fjall-d);clip-path:inset(0 -100vmax)}