:root{
/* Temperatur i stallet for kulor: varmt black, papper i stallet for vitt,
morkgra text pa ljus botten. Som tryck, inte som skarm. */
--bg:#F4F2EE; --card:#FBFAF7; --bg3:#ECE9E3;
--ink:#1A1917; --ink2:#5A5752; --ink3:#6B6862;
--line:#E3DFD8; --line2:#CBC6BD;
--dark:#141311; --dark2:#1E1C19; --dline:rgba(244,242,238,.12);
--pap:#F3F0EA; --moss:#5F6C5E;
--link:#2B54F0;
--disp:"Inter Tight",system-ui,sans-serif;
--body:"Inter",system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,monospace;
--gut:clamp(18px,4.5vw,64px);
--e:cubic-bezier(.22,1,.36,1);
--r:13px;
/* Sidhuvudets hojd. scroll-padding raknar fran samma tal — forr stod
53px har och 63px dar, och flikraden gled in 10px under sidhuvudet sa
fort man scrollade. Under 1040px vaxer raden till 71px, for da far
knappen 44px tryckyta; variabeln maste folja med. */
--hdr-h:63px;
/* Egna filer, inget externt beroende. Under varje ligger en ritad
gradient i respektive regel, sa ytan har farg aven om bilden fallerar.
1400px JPEG — storsta ritade bredd nagonstans ar 1308px vid dpr 2. */
--img-bygg:url("/img/bransch-bygg.jpg");
--img-rest:url("/img/bransch-rest.jpg");
--img-jur:url("/img/bransch-jur.jpg");
--img-el:url("/img/bransch-el.jpg");
--img-klin:url("/img/bransch-klin.jpg");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 21px)}
/* Flikraden foljer med sidan, sa bara sidhuvudet ar klistrat. Utan detta
landar ankarhopp for hogt och kapar sektionens overkant. */
@media(max-width:1040px){:root{--hdr-h:71px}html{scroll-padding-top:calc(var(--hdr-h) + 14px)}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.04em;margin:0;line-height:1.03}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3)}
.sheet{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.wide{max-width:1560px;margin:0 auto;padding:0 var(--gut)}
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);background:rgba(243,243,241,.76);border-bottom:1px solid transparent;transition:border-color .35s}
header.stuck{border-bottom-color:var(--line)}
/* padding:13px 0 slog ut .wide:s sidmarginal — samma specificitet, senare
i filen. Logotypen och knappen lag darfor tatt mot fonsterkanten och ur
linje med innehallet under. Sidmarginalen ar samma variabel igen. */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:13px var(--gut)}
.brand{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center;gap:9px}
/* Pricken ar ett markesarke, inte en statuslampa. Den pulserade forut. */
.blip{width:7px;height:7px;border-radius:50%;background:var(--ink)}
nav{display:flex;gap:26px}
nav a{text-decoration:none;font-size:14px;color:var(--ink2);position:relative;padding-bottom:2px}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)}
nav a:hover{color:var(--ink)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:1040px){nav{display:none}}
.btn{display:inline-block;width:max-content;max-width:100%;white-space:nowrap;padding:13px 22px;border-radius:100px;text-decoration:none;text-align:center;font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:-.015em;line-height:1.2;background:var(--ink);color:#fff;border:0;cursor:pointer;
/* lyft och magnet adderas i stället för att skriva över varandra */
--mx:0px;--my:0px;--lift:0px;
transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0);
transition:transform .4s var(--e),box-shadow .4s var(--e)}
.btn:hover{--lift:-2px;box-shadow:0 16px 30px -18px rgba(13,14,15,.8)}
.btn.mag{transition:transform .18s var(--e),box-shadow .4s var(--e)}
.btn.mag.slapp{transition:transform .6s cubic-bezier(.2,1.4,.4,1),box-shadow .4s var(--e)}
.btn .ar{display:inline-block;margin-left:7px;transition:transform .4s var(--e)}
.btn:hover .ar{transform:translateX(5px)}
.btn.sm{padding:10px 17px;font-size:13.5px}
/* Pa pekskarm far knappen inte vara mindre an tummen. */
@media(max-width:1040px){.btn.sm{min-height:44px;display:inline-flex;align-items:center}
/* Logotypen ar sidans "hem"-lank och lag pa 26px hog tryckyta. */
.brand{min-height:44px}}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.inv{background:#fff;color:var(--ink)}
.btn.ghostD{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.btn.ghostD:hover{box-shadow:inset 0 0 0 1px #fff}
section{position:relative}
.pad{padding:clamp(56px,6.5vw,96px) 0}
/* .bord: sektionsstrecken borttagna — luften separerar i stället */
h2{font-size:clamp(32px,5vw,58px);max-width:19ch}
.lede{font-size:18px;color:var(--ink2);max-width:56ch;margin-top:18px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--e),transform .85s var(--e)}
.in .rv{opacity:1;transform:none}
.in .rv:nth-child(2){transition-delay:.08s}
.in .rv:nth-child(3){transition-delay:.16s}
.in .rv:nth-child(4){transition-delay:.24s}
/* ============ MOCKUP COMPONENT ============ */
.chrome{height:26px;background:var(--bg3);display:flex;align-items:center;gap:5px;padding:0 11px;border-bottom:1px solid var(--line);flex:0 0 auto}
.chrome b{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.chrome span{font-family:var(--mono);font-size:8.5px;color:var(--ink3);margin-left:9px;letter-spacing:.04em}
.pane{position:relative;overflow:hidden;background:#fff}
.site{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.4em;
font-size:clamp(6px,.74vw,11px);background:var(--s-bg,#fff);color:var(--s-fg,#0D0E0F);overflow:hidden}
.site .top{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:.9em;min-width:0;justify-content:space-between;align-items:center;padding-bottom:.9em;border-bottom:1px solid var(--s-line,rgba(0,0,0,.1))}
.site .lg{font-family:var(--disp);font-weight:600;font-size:1.3em;letter-spacing:-.03em;white-space:nowrap;flex:0 0 auto}
.site .nv{display:flex;gap:1.15em;font-size:.9em;align-items:center;min-width:0;flex-wrap:nowrap;overflow:hidden}
.site .nv>span{white-space:nowrap}
.site.narrow .nv>span:not(.bt){display:none}
.site.narrow .mh4{font-size:2.2em}
.site .nv>span:not(.bt){opacity:.58}
.site .bt{background:var(--s-acc,#0D0E0F);color:var(--s-btf,#fff);padding:.42em 1em;border-radius:100px;font-size:.88em;font-weight:500}
.site .body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.site .mh4{font-family:var(--disp);font-size:2.6em;line-height:1.04;font-weight:600;letter-spacing:-.05em;margin:.85em 0 0;max-width:13ch}
.site .sb{opacity:.6;margin:.55em 0 0;max-width:34ch;font-size:1.02em}
.site .cta2{align-self:flex-start;margin-top:.85em;background:var(--s-acc,#0D0E0F);color:var(--s-btf,#fff);padding:.58em 1.25em;border-radius:100px;font-family:var(--disp);font-weight:500}
/* photo: always fills leftover space, never half-cropped */
.shot{position:relative;flex:1 1 auto;min-height:2.5em;margin-top:.95em;border-radius:9px;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);background:var(--s-card,rgba(0,0,0,.05))}
.shot i{position:absolute;inset:-5%;background-image:var(--s-img),
linear-gradient(140deg,rgba(120,130,140,.45),rgba(40,46,52,.75));background-size:cover;background-position:center;
animation:kb 26s ease-in-out infinite alternate;will-change:transform}
.site.narrow .shot i{inset:0;background-position:68% center;animation:none;transform:none}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.4%,-1%)}}
.shot.kb2 i{animation-duration:32s;animation-direction:alternate-reverse}
.shot.kb3 i{animation-duration:22s;animation-delay:-6s}
.p-bygg{--s-bg:#16181A;--s-fg:#F5F5F3;--s-acc:#D8FF4F;--s-btf:#16181A;--s-line:rgba(255,255,255,.13);--s-card:rgba(255,255,255,.07);--s-img:var(--img-bygg)}
.p-rest{--s-bg:#123A2D;--s-fg:#F3EFE4;--s-acc:#F3EFE4;--s-btf:#123A2D;--s-line:rgba(255,255,255,.15);--s-card:rgba(255,255,255,.08);--s-img:var(--img-rest)}
.p-jur{--s-bg:#FBFAF7;--s-fg:#12224A;--s-acc:#12224A;--s-btf:#fff;--s-line:rgba(18,34,74,.13);--s-card:rgba(18,34,74,.05);--s-img:var(--img-jur)}
.p-el{--s-bg:#fff;--s-fg:#0D0E0F;--s-acc:#2B54F0;--s-btf:#fff;--s-line:rgba(0,0,0,.1);--s-card:rgba(43,84,240,.07);--s-img:var(--img-el)}
.p-klin{--s-bg:#F4F1EC;--s-fg:#1E2A26;--s-acc:#3E6B58;--s-btf:#fff;--s-line:rgba(30,42,38,.12);--s-card:rgba(62,107,88,.09);--s-img:var(--img-klin)}
.p-frisor{--s-bg:#FBF4F2;--s-fg:#2A1E23;--s-acc:#A64C63;--s-btf:#fff;--s-line:rgba(42,30,35,.12);--s-card:rgba(166,76,99,.08);--s-img:linear-gradient(150deg,#C9899A,#5E3543)}
.p-bil{--s-bg:#15181C;--s-fg:#F2F4F6;--s-acc:#FF7A1A;--s-btf:#15181C;--s-line:rgba(255,255,255,.13);--s-card:rgba(255,255,255,.07);--s-img:linear-gradient(150deg,#4A5058,#15181C)}
.p-butik{--s-bg:#FFF8F1;--s-fg:#2A1C14;--s-acc:#B23F12;--s-btf:#fff;--s-line:rgba(42,28,20,.12);--s-card:rgba(178,63,18,.07);--s-img:linear-gradient(150deg,#E0A47E,#6B3B22)}
.p-fast{--s-bg:#16212B;--s-fg:#EBF1F6;--s-acc:#C9A227;--s-btf:#16212B;--s-line:rgba(255,255,255,.14);--s-card:rgba(255,255,255,.07);--s-img:linear-gradient(150deg,#5C7891,#16212B)}
.p-transp{--s-bg:#EFF2F4;--s-fg:#111A21;--s-acc:#0E7C86;--s-btf:#fff;--s-line:rgba(17,26,33,.12);--s-card:rgba(14,124,134,.08);--s-img:linear-gradient(150deg,#6FA9AE,#123A3F)}
/* HERO main window: the page actually scrolls itself */
.site.live .body{overflow:hidden}
.site.live .stack{display:flex;flex-direction:column;animation:autoscroll 24s var(--e) infinite;animation-play-state:paused;will-change:transform}
@keyframes autoscroll{
0%,20%{transform:translateY(0)}
38%,52%{transform:translateY(-30%)}
68%,82%{transform:translateY(-58%)}
96%,100%{transform:translateY(0)}
}
.site.live .shot{flex:0 0 auto;height:8.4em}
.site .cards{display:flex;gap:.7em;margin-top:.9em;flex:0 0 auto}
.site .cards div{flex:1;height:3.2em;border-radius:8px;background:var(--s-card,rgba(0,0,0,.05));position:relative}
.site .cards div::before{content:"";position:absolute;left:.8em;top:.8em;width:44%;height:.26em;border-radius:2px;background:currentColor;opacity:.4}
.site .cards div::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.7em;height:.7em;border-radius:3px;background:currentColor;opacity:.1}
.site .rows{margin-top:.9em;flex:0 0 auto}
.site .rows u{display:block;height:.3em;border-radius:2px;background:currentColor;opacity:.16;margin-bottom:.5em}
.site .rows u:nth-child(2){width:76%}
.site .rows u:nth-child(3){width:88%}
.site .rows u:nth-child(4){width:62%}
.site .mh5{font-family:var(--disp);font-size:1.7em;font-weight:600;letter-spacing:-.04em;margin:1.2em 0 0}
/* ghost cursor that uses the mockup */
.mockcursor{position:absolute;z-index:9;width:1.5em;height:1.5em;pointer-events:none;left:20%;top:86%;opacity:0;
animation:ghost 11s var(--e) infinite;animation-play-state:paused}
.mockcursor svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
@keyframes ghost{
0%{left:22%;top:92%;opacity:0;transform:scale(1)}
8%{opacity:1}
30%{left:15%;top:60%;transform:scale(1)}
36%{left:15%;top:60%;transform:scale(.78)}
42%{left:15%;top:60%;transform:scale(1)}
70%{left:64%;top:22%;transform:scale(1)}
92%{left:64%;top:22%;opacity:1}
100%{left:64%;top:22%;opacity:0}
}
.site.live .cta2{animation:ctahit 11s var(--e) infinite;animation-play-state:paused}
@keyframes ctahit{
0%,30%{transform:none;filter:brightness(1)}
36%{transform:scale(.93);filter:brightness(.88)}
44%{transform:scale(1.03);filter:brightness(1)}
50%,100%{transform:none}
}
.toast{position:absolute;z-index:8;left:1.4em;bottom:1.4em;background:var(--s-acc);color:var(--s-btf);
padding:.55em 1em;border-radius:100px;font-family:var(--disp);font-weight:500;font-size:1em;
opacity:0;transform:translateY(.6em);animation:toast 11s var(--e) infinite;animation-play-state:paused}
@keyframes toast{
0%,42%{opacity:0;transform:translateY(.6em)}
48%,68%{opacity:1;transform:none}
76%,100%{opacity:0;transform:translateY(.6em)}
}
/* HERO */
.hero{padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(32px,4vw,56px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(30px,4vw,64px);align-items:center}
.hero-grid>*{min-width:0}
@media(max-width:1180px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(34px,5.2vw,74px);font-weight:600;letter-spacing:-.05em;max-width:13ch;overflow-wrap:break-word}
.ln{display:block;overflow:hidden}
.ln i{display:block;font-style:normal;transform:translateY(110%);transition:transform 1.05s var(--e)}
.loaded .ln i{transform:none}
.loaded .ln:nth-child(2) i{transition-delay:.07s}
.loaded .ln:nth-child(3) i{transition-delay:.14s}
.rot{display:inline-block;position:relative;height:1.03em;overflow:hidden;vertical-align:bottom}
.rot .sz{position:static;display:block;visibility:hidden;transform:none;opacity:1;pointer-events:none}
/* Bredden pa rotationen kommer fran det langsta ordet — men som ::before
ur ett attribut, inte som textnod. Da innehaller h1:ans textContent bara
det ord som faktiskt syns, bade for Googlebot och for hjalpmedel. */
.rot .sz::before{content:attr(data-w)}
.rot span{display:block;position:absolute;left:0;top:0;width:100%;transform:translateY(110%);opacity:0;transition:transform .7s var(--e),opacity .5s var(--e)}
.rot span.on{transform:none;opacity:1}
.rot span.out{transform:translateY(-110%);opacity:0}
.fade{opacity:0;transform:translateY(14px);transition:opacity .85s var(--e),transform .85s var(--e)}
.loaded .fade{opacity:1;transform:none}
.d0{transition-delay:.04s}.d1{transition-delay:.26s}.d2{transition-delay:.38s}.d3{transition-delay:.5s}
.hero-sub{font-size:18.5px;color:var(--ink2);max-width:44ch;margin:24px 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px;align-items:center;max-width:100%}
@media(max-width:520px){.btn{white-space:normal;width:auto}}
.cta-note{font-size:13.5px;color:var(--ink3);margin-top:13px}
.cluster{position:relative;height:clamp(350px,45vw,570px);perspective:1600px}
.win{position:absolute;border-radius:var(--r);overflow:hidden;background:#fff;transform-style:preserve-3d;
box-shadow:0 2px 3px rgba(13,14,15,.05),0 44px 80px -46px rgba(13,14,15,.5),inset 0 0 0 1px rgba(13,14,15,.07);
opacity:0;transition:opacity 1s var(--e)}
/* Fönstren svarar på markören med olika djup (data-sp) och landar från
en svag zoom vid sidladdning — en rörelse, inte tre. */
.win{--px:0px;--py:0px;--s:.965;--fx:0px;--fy:0px;--fz:0px;
transform:translate3d(calc(var(--px) + var(--fx)),calc(var(--py) + var(--fy)),var(--fz)) scale(var(--s));
transition:opacity 1s var(--e),transform 1.1s var(--e)}
.loaded .win{opacity:1;--s:1}
.cluster.live .win{transition:opacity 1s var(--e),transform .25s var(--e)}
.cluster{--rx:0deg;--ry:0deg}
.cluster.live{transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s var(--e)}
.win .pane{aspect-ratio:16/10.6}
/* Fonstren ligger som ett kollage, men overlappet far bara falla pa bild
och tom yta — aldrig pa rubrik eller brodtext i fonstret under. Darfor
ar w3 hogerankrad i stallet for att sitta pa mitten: forr lag den pa
left:25% och skar rakt genom Nordviks rubrik och ingress.
w2 gar tillbaka till top:0: nar w3 ar bottenankrad till hoger maste w2
ligga i topp, annars kryper w3 upp i "Nordisk husman."-rubriken. */
.w1{width:62%;left:0;top:0;z-index:3;transition-delay:.55s}
.w2{width:35%;right:0;top:0;z-index:2;transition-delay:.72s}
.w2 .pane{aspect-ratio:16/12}
.w3{width:42%;left:auto;right:0;bottom:0;z-index:4;transition-delay:.88s}
.w3 .pane{aspect-ratio:16/11}
@media(max-width:1060px){.w1{width:60%}.w2{width:36%}.w3{width:42%;left:auto;right:0}}
@media(max-width:640px){.w2{display:none}.w1{width:88%;top:0}.w3{width:56%;left:auto;right:0}}
@keyframes slide{to{transform:translateX(-100%)}}
/* REBUILD */
.rebuild{background:var(--dark);color:#fff}
.rb-intro{padding:clamp(52px,6vw,86px) 0 26px}
.rb-intro h2{color:#fff;max-width:21ch}
.rb-intro .lede{color:#9DA1A6}
.rb-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,70px);align-items:start;padding-bottom:clamp(44px,5vw,72px);min-height:250vh}
@media(max-width:1000px){.rb-grid{grid-template-columns:1fr;gap:24px}}
.rb-sticky{position:sticky;top:calc(var(--hdr-h) + 21px)}
.rb-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#8A8E92;margin-bottom:11px}
.rb-label b{color:#fff;font-weight:400}
.rb-prog{height:2px;background:rgba(255,255,255,.13);border-radius:2px;margin-bottom:16px;overflow:hidden}
.rb-prog i{display:block;height:100%;width:0;background:#fff;transition:width .18s linear}
.rb-steps{display:flex;flex-direction:column;justify-content:space-around;min-height:230vh;padding:14vh 0 16vh}
.rb-step{opacity:.28;transition:opacity .5s var(--e)}
.rb-step.on{opacity:1}
.rb-step .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:#fff;display:block;margin-bottom:9px;opacity:.5}
.rb-step h3{font-size:clamp(20px,2.2vw,26px);color:#fff;letter-spacing:-.035em}
.rb-step p{margin:9px 0 0;color:#9DA1A6;font-size:15.5px;max-width:40ch}
.stage{border-radius:var(--r);overflow:hidden;box-shadow:0 44px 90px -50px #000,inset 0 0 0 1px var(--dline)}
.stage .chrome{background:#151618;border-bottom-color:var(--dline)}
.stage .chrome b{background:#2C2E31}
.stage .chrome span{color:#6E7175}
.stage .pane{aspect-ratio:16/10.4}
.old,.newv{position:absolute;inset:0}
.old{z-index:2;transition:opacity .8s var(--e)}
.newv{z-index:1}
.o{background:#fff;font-family:"Times New Roman",Times,serif;color:#111;height:100%;font-size:clamp(6px,.78vw,10px)}
.o-top{background:linear-gradient(#4a6fa5,#2d4d7a);color:#fff;padding:1.2em 1.6em;text-align:center;transition:all .7s var(--e)}
.o-top .mh5{margin:0;font-size:2em}
.o-top p{margin:.2em 0 0;font-size:.95em;font-style:italic;color:#cfe0f5;transition:opacity .5s}
.o-nav{background:#e8eef7;border-bottom:1px solid #b9c8dd;padding:.6em 1.6em;display:flex;gap:1.4em;transition:all .7s var(--e)}
.o-nav a{color:#1c3f7a;text-decoration:underline;transition:all .5s}
.o-body{display:flex;gap:1.4em;padding:1.4em 1.6em}
.o-body .col{flex:1}
.o-body .mh6{margin:0 0 .5em;font-size:1.35em;color:#2d4d7a}
.o-body p{margin:0 0 .6em;line-height:1.45;color:#333}
.o-img{background:#d9d9d9;border:1px solid #bbb;height:5.2em;margin-bottom:.7em;display:flex;align-items:center;justify-content:center;color:#999}
.o-side{width:27%;background:#f4f6fa;border:1px solid #ccd6e4;padding:.9em;transition:opacity .5s var(--e),transform .7s var(--e)}
.o-side b{color:#2d4d7a;display:block;margin-bottom:.4em}
.o-foot{border-top:1px solid #ccc;margin:0 1.6em;padding:.7em 0;color:#777;display:flex;justify-content:space-between;transition:opacity .5s}
/* steg 1 — röj undan bruset */
.stage:not([data-s="0"]) .o-side{opacity:0;transform:translateX(30px)}
.stage:not([data-s="0"]) .o-foot{opacity:0}
/* steg 2 — platta ut sidhuvudet och menyn */
.stage[data-s="2"] .o-top,.stage[data-s="3"] .o-top,.stage[data-s="4"] .o-top,.stage[data-s="5"] .o-top{
background:#16181A;color:#F5F5F3;padding:1.1em 1.6em;text-align:left}
.stage[data-s="2"] .o-top p,.stage[data-s="3"] .o-top p,.stage[data-s="4"] .o-top p,.stage[data-s="5"] .o-top p{opacity:0;height:0;margin:0}
.stage[data-s="2"] .o-nav,.stage[data-s="3"] .o-nav,.stage[data-s="4"] .o-nav,.stage[data-s="5"] .o-nav{
background:#16181A;border-bottom-color:rgba(255,255,255,.12)}
.stage[data-s="2"] .o-nav a,.stage[data-s="3"] .o-nav a,.stage[data-s="4"] .o-nav a,.stage[data-s="5"] .o-nav a{
text-decoration:none;color:rgba(245,245,243,.55)}
.stage[data-s="2"] .o-nav a:nth-child(n+4),.stage[data-s="3"] .o-nav a:nth-child(n+4),
.stage[data-s="4"] .o-nav a:nth-child(n+4),.stage[data-s="5"] .o-nav a:nth-child(n+4){opacity:0}
/* steg 3 — byt budskapet */
.o-h-new{display:block;font-family:var(--disp);font-weight:600;font-size:1.9em;letter-spacing:-.04em;line-height:1.06;
max-width:14ch;opacity:0;max-height:0;overflow:hidden;transition:opacity .55s var(--e),max-height .55s var(--e)}
.stage[data-s="3"] .o-h-new,.stage[data-s="4"] .o-h-new,.stage[data-s="5"] .o-h-new{opacity:1;max-height:4em}
.stage[data-s="3"] .o-top .mh5,.stage[data-s="4"] .o-top .mh5,.stage[data-s="5"] .o-top .mh5{
font-family:var(--disp);font-size:1.05em;font-weight:600;letter-spacing:-.01em;opacity:.65}
.stage[data-s="3"] .o-body,.stage[data-s="4"] .o-body,.stage[data-s="5"] .o-body{opacity:.25}
/* steg 4 — gör kontakten omöjlig att missa */
.o-cta-new{display:inline-block;margin-top:.9em;background:#D8FF4F;color:#16181A;padding:.6em 1.3em;border-radius:100px;
font-family:var(--disp);font-weight:600;font-size:1em;opacity:0;transform:translateY(8px) scale(.94);
transition:opacity .5s var(--e),transform .5s var(--e)}
.stage[data-s="4"] .o-cta-new,.stage[data-s="5"] .o-cta-new{opacity:1;transform:none}
/* steg 5 — färdig sida */
.stage[data-s="5"] .old{opacity:0}
/* stegräknare */
.rb-seg{display:flex;gap:5px;margin-bottom:16px}
.rb-seg i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.13);transition:background .4s var(--e)}
.rb-seg i.on{background:#fff}
/* CONFIGURATOR */
.cfg-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:40px}
@media(max-width:1000px){.cfg-grid{grid-template-columns:1fr;gap:26px}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{border:0;cursor:pointer;font-family:var(--disp);font-weight:500;font-size:14.5px;padding:10px 17px;min-height:44px;border-radius:100px;background:var(--card);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);
/* transition:all animerade aven fokusringen — den tonade in over
350ms i stallet for att synas direkt nar man tabbade hit. */
transition:background .35s var(--e),color .35s var(--e),box-shadow .35s var(--e)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.cfg-frame{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 2px 3px rgba(13,14,15,.05),0 44px 84px -48px rgba(13,14,15,.5),inset 0 0 0 1px rgba(13,14,15,.07)}
.cfg-frame .pane{aspect-ratio:16/10}
.cfg-frame .site{transition:opacity .3s var(--e),filter .3s var(--e)}
.cfg-frame .site.swap{opacity:0;filter:blur(8px)}
.cfg-note{font-size:14px;color:var(--ink3);margin-top:16px}
/* real screenshot overlay — drops in over the CSS mockup when the file exists */
.shotreal{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Levande mockuper — den riktiga sidan i en ram bakom stillbilden.
Ramen renderas i 1400 px och skalas ner, så kortet visar skrivbords-
layouten precis som stillbilden gjorde. Laddas först när kortet syns,
och aldrig på små skärmar där en nedskalad ram inte går att använda. */
.livemock{position:relative}
.livemock .mockscale{position:absolute;inset:0;overflow:hidden;z-index:5;
opacity:0;transition:opacity .55s var(--e);background:#fff}
.livemock.on .mockscale{opacity:1}
.livemock .mockscale iframe{width:1400px;border:0;display:block;
transform-origin:top left;background:#fff}
.livemock .mocktag{position:absolute;z-index:7;left:11px;bottom:11px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
color:#fff;background:rgba(13,14,15,.72);backdrop-filter:blur(6px);
padding:5px 9px;border-radius:999px;pointer-events:none;
opacity:0;transition:opacity .55s var(--e);display:flex;align-items:center;gap:6px}
.livemock.on .mocktag{opacity:1}
/* Pricken sitter kvar dar den betyder nagot: ramen ar levande. Fargen var
dock Tailwinds standardgrona — nu sajtens egen, samma som vaxeln. */
.livemock .mocktag i{width:5px;height:5px;border-radius:50%;background:#57D98A;
display:block;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){
.livemock .mockscale,.livemock .mocktag{transition:none}}
/* app mockups — Cognio & Bovia */
.p-cognio{--s-bg:#18181B;--s-fg:#FAFAFA;--s-acc:#2D6CDF;--s-btf:#fff;--s-line:rgba(255,255,255,.1);--s-card:rgba(255,255,255,.055)}
.p-bovia{--s-bg:#FBFBF9;--s-fg:#14201A;--s-acc:#0E9384;--s-btf:#fff;--s-line:rgba(0,0,0,.09);--s-card:rgba(14,147,132,.08)}
.app .kpis{display:flex;gap:.6em;margin-top:.9em;flex:0 0 auto}
.app .kpi{flex:1;background:var(--s-card);border-radius:8px;padding:.65em .75em}
.app .kpi em{display:block;font-style:normal;font-size:.82em;opacity:.5;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.25em}
.app .kpi strong{font-family:var(--disp);font-size:1.55em;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.app .kpi i{font-style:normal;font-size:.85em;margin-left:.35em;color:#0E9384}
.app .chart{flex:1 1 auto;min-height:2.6em;margin-top:.6em;background:var(--s-card);border-radius:8px;padding:.8em;display:flex;align-items:flex-end;gap:.4em}
.app .chart span{flex:1;border-radius:3px 3px 0 0;background:var(--s-acc);transform-origin:bottom;animation:bar 4.6s var(--e) infinite alternate}
.app .chart span:nth-child(2n){background:#0E9384}
.app .chart span:nth-child(5n){background:#DBA514}
.app .chart span:nth-child(1){animation-delay:0s}.app .chart span:nth-child(2){animation-delay:-.5s}
.app .chart span:nth-child(3){animation-delay:-1s}.app .chart span:nth-child(4){animation-delay:-1.5s}
.app .chart span:nth-child(5){animation-delay:-2s}.app .chart span:nth-child(6){animation-delay:-2.5s}
.app .chart span:nth-child(7){animation-delay:-3s}.app .chart span:nth-child(8){animation-delay:-3.5s}
@keyframes bar{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
.app .list{flex:1 1 auto;min-height:0;margin-top:.8em;display:flex;flex-direction:column;gap:.45em;overflow:hidden}
.app .row2{display:flex;gap:.65em;align-items:center;background:var(--s-card);border-radius:8px;padding:.5em .65em;flex:0 0 auto}
.app .row2 .th{width:3.2em;height:2.2em;border-radius:5px;background:linear-gradient(135deg,var(--s-acc),rgba(0,0,0,.05));flex:0 0 auto}
.app .row2 .tx{flex:1;min-width:0}
.app .row2 .tx u{display:block;height:.26em;border-radius:2px;background:currentColor;opacity:.32;margin-bottom:.32em}
.app .row2 .tx u:last-child{width:58%;opacity:.18;margin:0}
.app .row2 .sc{font-family:var(--mono);font-size:.82em;background:var(--s-acc);color:var(--s-btf);padding:.25em .6em;border-radius:100px;flex:0 0 auto}
.app .fbar{display:flex;gap:.4em;margin-top:.8em;flex:0 0 auto}
.app .fbar b{font-weight:400;font-size:.85em;padding:.3em .7em;border-radius:100px;background:var(--s-card);opacity:.75}
.app .fbar b:first-child{background:var(--s-acc);color:var(--s-btf);opacity:1}
/* URL DEMO */
.urlbar{display:flex;gap:9px;margin-top:26px;flex-wrap:wrap}
.urlbar .fld{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:100px;
box-shadow:inset 0 0 0 1px var(--line);padding:4px 6px 4px 18px;transition:box-shadow .35s var(--e)}
.urlbar .fld:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.urlbar .fld:has(input:focus-visible){outline:2px solid var(--link);outline-offset:3px}
.urlbar input{flex:1;border:0;outline:0;background:none;font-family:var(--body);font-size:15.5px;color:var(--ink);padding:11px 0;min-width:0}
.urlbar input::placeholder{color:var(--ink3)}
.log{margin-top:20px;min-height:96px}
.log-line{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink3);padding:5px 0;opacity:0;transform:translateY(6px);transition:all .5s var(--e)}
.log-line.on{opacity:1;transform:none}
.log-line.done{color:var(--ink)}
.log-line b{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);position:relative;flex:0 0 auto}
.log-line.done b{background:var(--ink);box-shadow:none}
.log-line.done b::after{content:"";position:absolute;left:4px;top:6.5px;width:5px;height:2.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.log-line.act b{box-shadow:inset 0 0 0 1.5px var(--ink);animation:spin 1s linear infinite}
.log-line.act b::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-wrap{position:relative}
.demo-veil{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
text-align:center;padding:0 26px;border-radius:var(--r);background:#FBFBFA;
transition:opacity .8s var(--e),visibility 0s linear .8s}
.demo-veil::before{content:"";position:absolute;inset:0;border-radius:var(--r);opacity:.9;
background:
linear-gradient(var(--bg3) 0 0) 7% 12%/16% 7% no-repeat,
linear-gradient(var(--bg3) 0 0) 70% 12%/23% 7% no-repeat,
linear-gradient(var(--bg3) 0 0) 7% 30%/48% 11% no-repeat,
linear-gradient(var(--bg3) 0 0) 7% 45%/34% 5% no-repeat,
linear-gradient(var(--bg3) 0 0) 7% 62%/86% 26% no-repeat;
animation:skel 2.4s var(--e) infinite}
@keyframes skel{0%,100%{opacity:.55}50%{opacity:1}}
.demo-veil b,.demo-veil span,.demo-veil .dots{position:relative;z-index:2}
.demo-veil b{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.035em;color:var(--ink)}
.demo-veil span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.demo-veil .dots{display:flex;gap:7px;margin-top:3px}
.demo-veil .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:dot 1.5s var(--e) infinite}
.demo-veil .dots i:nth-child(2){animation-delay:.18s}
.demo-veil .dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-4px)}}
.demo-wrap.ready .demo-veil{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s var(--e),visibility 0s linear .8s}
.demo-wrap .cfg-frame .site{transition:filter .8s var(--e),transform .8s var(--e)}
.demo-wrap:not(.ready) .cfg-frame .site{opacity:0}
.demo-cap{margin-top:14px;font-size:13.5px;color:var(--ink3)}
.demo-cap b{color:var(--ink);font-weight:500}
/* MOBIL MORPH */
.mm{height:125vh;position:relative}
.mm-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.mm-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:center;width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
@media(max-width:1000px){.mm{height:auto}.mm-stick{position:static;height:auto;padding:clamp(60px,8vw,100px) 0}.mm-inner{grid-template-columns:1fr;gap:30px}}
.mm-holder{display:flex;justify-content:center}
.mm-dev{width:100%;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 2px 3px rgba(13,14,15,.05),0 40px 76px -46px rgba(13,14,15,.5),inset 0 0 0 1px rgba(13,14,15,.07)}
.mm-dev .pane{aspect-ratio:16/10}
.mm-cap{display:flex;gap:26px;margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.mm-cap b{color:var(--ink);font-weight:400}
/* FÖRE/EFTER */
.ba{position:relative;--x:100%;aspect-ratio:16/9.6;border-radius:var(--r);overflow:hidden;cursor:ew-resize;touch-action:none;box-shadow:0 44px 84px -48px rgba(13,14,15,.5),inset 0 0 0 1px var(--line);background:#fff;margin-top:34px}
.ba .chrome{position:absolute;top:0;left:0;right:0;z-index:8;height:28px}
.layer{position:absolute;top:28px;left:0;right:0;bottom:0;overflow:hidden}
.layer-new{clip-path:inset(0 0 0 var(--x));z-index:3}
.layer .site{font-size:clamp(6px,.9vw,12px)}
.handle{position:absolute;top:28px;bottom:0;left:var(--x);width:2px;background:#fff;z-index:6;pointer-events:none;box-shadow:0 0 0 1px rgba(13,14,15,.18)}
.handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 10px 26px -6px rgba(13,14,15,.5)}
.handle::before{content:"⇤⇥";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:12px;color:var(--ink);letter-spacing:-1px}
.ba-tag{position:absolute;bottom:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:100px;z-index:7}
.ba-tag.l{left:12px;background:rgba(255,255,255,.95);color:#75797E}
.ba-tag.r{right:12px;background:var(--ink);color:#fff}
/* PORTFOLIO */
.hs{height:190vh;position:relative}
.hs-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hs-head{padding:0 var(--gut);max-width:1560px;margin:0 auto 30px;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.hs-track{display:flex;gap:24px;padding-left:max(var(--gut),calc((100vw - 1240px)/2));will-change:transform}
.proj{flex:0 0 clamp(280px,42vw,560px)}
.proj .fr{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 2px 3px rgba(13,14,15,.05),0 34px 64px -44px rgba(13,14,15,.5),inset 0 0 0 1px rgba(13,14,15,.07);transition:transform .55s var(--e)}
/* lyftet vid hover ligger numera i --ly, se Byggplatsen längst ner */
.proj .pane{aspect-ratio:16/11}
.proj .meta{padding:20px 4px 0}
.proj .tg{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.proj h3{font-size:21px;margin:9px 0 10px;letter-spacing:-.035em}
.proj dl{margin:0;font-size:14.5px}
.proj dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.proj dd{margin:0 0 10px;color:var(--ink2)}
@media(max-width:900px){
.hs{height:auto}.hs-stick{position:static;height:auto;padding:clamp(60px,8vw,100px) 0}
.hs-track{flex-direction:column;padding:0 var(--gut);transform:none!important;gap:40px}
.proj{flex:auto}}
/* PROCESS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:46px;position:relative}
@media(max-width:900px){.steps{grid-template-columns:1fr;gap:16px}}
.steps::before{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:var(--line)}
.steps::after{content:"";position:absolute;top:8px;left:0;height:1px;background:var(--ink);width:0;transition:width 1.7s var(--e)}
.in .steps::after{width:100%}
@media(max-width:900px){.steps::before,.steps::after{display:none}}
.step{padding-top:30px;position:relative}
.step::before{content:"";position:absolute;top:4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:0;transform:scale(.4);transition:.45s var(--e)}
.in .step::before{opacity:1;transform:none}
.in .step:nth-child(2)::before{transition-delay:.42s}
.in .step:nth-child(3)::before{transition-delay:.84s}
.in .step:nth-child(4)::before{transition-delay:1.26s}
.step .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink3)}
.step h3{font-size:19px;margin:8px 0;letter-spacing:-.035em}
.step p{margin:0;color:var(--ink2);font-size:15px}
.step .t{font-family:var(--mono);font-size:11px;margin-top:10px;display:block;letter-spacing:.06em}
/* COMPARISON */
.cmp{margin-top:42px;border-top:1px solid var(--line)}
.cmp .row{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center;opacity:0;transform:translateY(12px);transition:opacity .6s var(--e),transform .6s var(--e)}
.in .cmp .row{opacity:1;transform:none}
.cmp .row.head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding-bottom:11px}
.cmp .row.head b{color:var(--ink);font-weight:400}
.cmp .row span{font-size:14.5px;color:var(--ink2)}
.cmp .row span:first-child{font-size:15.5px;color:var(--ink)}
.cmp .yes{color:var(--ink);font-weight:500}
@media(max-width:820px){
.cmp .row{grid-template-columns:1fr 1fr;gap:10px 16px}
.cmp .row span:first-child{grid-column:1/-1;font-weight:600}
.cmp .row.head{display:none}
.cmp .row span::before{content:attr(data-l);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:2px}
}
/* PRICING */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
@media(max-width:940px){.price{grid-template-columns:1fr}}
.pbox{background:var(--card);border-radius:var(--r);padding:28px;box-shadow:inset 0 0 0 1px var(--line);position:relative;transition:transform .45s var(--e),box-shadow .45s var(--e)}
.pbox:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line2),0 28px 52px -40px rgba(13,14,15,.5)}
.pbox.hi{background:var(--ink);color:#fff;box-shadow:none}
.pbox.hi .mono,.pbox.hi .who,.pbox.hi .plist li{color:#9DA1A6}
.pbox.hi .plist{border-top-color:var(--dline)}
.pbox.hi .plist li{border-bottom-color:var(--dline)}
.pbox.hi .plist li::before{background:#fff}
.pbox.hi .fig small{color:#9DA1A6}
.badge{position:absolute;z-index:2;top:-10px;right:20px;background:var(--link);color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.fig{font-family:var(--disp);font-size:clamp(31px,4vw,42px);font-weight:600;letter-spacing:-.05em;line-height:1;margin:14px 0 5px}
.fig small{font-size:15px;font-weight:400;letter-spacing:-.01em;color:var(--ink3)}
.who{font-size:14.5px;color:var(--ink2);margin:12px 0 18px;min-height:46px}
.plist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pdrift{display:none}
.plist li{padding:9px 0;font-size:14.5px;color:var(--ink2);border-bottom:1px solid var(--line);display:flex;gap:10px}
.plist li::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;background:var(--ink);margin-top:9px}
.drift{margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:900px){.drift{grid-template-columns:1fr}}
.dbox{background:var(--bg3);border-radius:var(--r);padding:22px 24px}
.dbox .f{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.045em;margin:8px 0 6px}
.dbox p{margin:0;font-size:14.5px;color:var(--ink2)}
.guarantee{margin-top:16px;padding:24px 28px;border-radius:var(--r);font-size:16px;color:var(--ink2);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-left:2px solid var(--ink)}
.guarantee b{font-family:var(--disp);font-weight:600;color:var(--ink)}
/* ABOUT / FAQ / FINAL */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
@media(max-width:940px){.about{grid-template-columns:1fr;gap:32px}}
.about p{margin:0 0 18px;color:var(--ink2)}
.about .big{font-family:var(--disp);font-size:clamp(22px,2.7vw,30px);letter-spacing:-.04em;color:var(--ink);line-height:1.28;margin-bottom:24px}
.facts>div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts>div:first-child{border-top:1px solid var(--line)}
.facts>div span:first-child{color:var(--ink3)}
details{border-bottom:1px solid var(--line);padding:19px 0}
summary{font-family:var(--disp);font-weight:500;font-size:17.5px;letter-spacing:-.03em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;transition:color .3s}
summary:hover{color:var(--ink2)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ink3);font-weight:400;transition:transform .35s var(--e)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:13px 0 0;color:var(--ink2);max-width:68ch;font-size:15.5px}
.final{background:var(--dark);color:#fff}
.final h2{color:#fff;font-size:clamp(38px,7vw,88px);max-width:14ch;letter-spacing:-.05em}
.final .lede{color:#9DA1A6}
.final .cta-note{color:#8A8E92}
footer{background:var(--dark);color:#8B8F94;padding:0 0 44px}
.foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--dline);font-size:13.5px}
.foot a{text-decoration:none;color:#8B8F94}
.foot a:hover{color:#fff}
.foot nav{gap:20px}
/* ============ v24: liv och rörelse ============ */
/* läsindikator */
.pk-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
background:var(--ink);z-index:80;pointer-events:none;will-change:transform}
/* rubriker som avslöjas ord för ord */
.pk-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.pk-w>i{display:inline-block;font-style:normal;transform:translateY(105%);opacity:0;
transition:transform .8s var(--e),opacity .6s var(--e)}
.in .pk-w>i{transform:none;opacity:1}
/* Kortet hade en ljusstrimma och en 3D-lutning som foljde muspekaren.
Spotlight, tilt och magnetiska knappar ar standarduppsattningen i
mallbiblioteken; CSS-lyftet pa hover racker. */
/* prisrutor med samma ljusstrimma.
Ingen overflow:hidden här — "Populärast"-etiketten ligger med flit
uppe på kortkanten och blir kapad på mitten av en klippande ruta.
Ljuskäglan rundas av med egen border-radius i stället. */
.rebuild{overflow:clip}
.rebuild .sheet{position:relative;z-index:1}
/* mjukare FAQ */
details p{overflow:hidden}
summary{user-select:none}
/* knappar som dras mot pekaren */
.btn{will-change:transform}
/* prissektionen som mörk paus mitt i sidan */
#pris{background:var(--dark);color:#fff}
#pris h2{color:#fff}
#pris .lede{color:#9DA1A6}
#pris .mono{color:#7E8A82}
#pris .pbox{background:#17181A;box-shadow:inset 0 0 0 1px var(--dline)}
#pris .pbox:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 28px 52px -40px #000}
#pris .who,#pris .plist li{color:#9DA1A6}
#pris .plist{border-top-color:var(--dline)}
#pris .plist li{border-bottom-color:var(--dline)}
#pris .plist li::before{background:#fff}
#pris .fig small{color:#7E8A82}
#pris .pbox.hi{background:#FAFAF8;color:var(--ink);box-shadow:none}
#pris .pbox.hi .mono{color:var(--ink3)}
#pris .pbox.hi .who,#pris .pbox.hi .plist li{color:var(--ink2)}
#pris .pbox.hi .plist{border-top-color:var(--line)}
#pris .pbox.hi .plist li{border-bottom-color:var(--line)}
#pris .pbox.hi .plist li::before{background:var(--ink)}
#pris .pbox.hi .fig small{color:var(--ink3)}
#pris .dbox{background:#17181A}
#pris .dbox p{color:#9DA1A6}
#pris .guarantee{background:#17181A;box-shadow:inset 0 0 0 1px var(--dline);border-left-color:#fff;color:#9DA1A6}
#pris .guarantee b{color:#fff}
/* ===== offertbyggare ===== */
.pk-calc{margin-top:18px;background:#17181A;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--dline);
display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden}
@media(max-width:900px){.pk-calc{grid-template-columns:1fr}}
.pk-calc .pk-l{padding:30px}
.pk-calc .pk-r{padding:30px;background:#0A0B0C;box-shadow:inset 1px 0 0 var(--dline);display:flex;flex-direction:column}
@media(max-width:900px){.pk-calc .pk-r{box-shadow:inset 0 1px 0 var(--dline)}}
.pk-row{padding:16px 0;border-bottom:1px solid var(--dline)}
.pk-row:first-child{padding-top:0}
.pk-row:last-child{border-bottom:0;padding-bottom:0}
.pk-lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7E8A82;display:block;margin-bottom:11px}
.pk-opts{display:flex;flex-wrap:wrap;gap:8px}
.pk-opt{border:0;cursor:pointer;font-family:var(--disp);font-weight:500;font-size:14px;padding:9px 15px;border-radius:100px;
background:transparent;color:#9DA1A6;box-shadow:inset 0 0 0 1px var(--dline);white-space:nowrap;
transition:background .3s var(--e),color .3s var(--e),box-shadow .3s var(--e)}
.pk-opt:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pk-opt[aria-pressed="true"]{background:#FAFAF8;color:var(--ink);box-shadow:none}
.pk-step{display:flex;align-items:center;gap:14px}
.pk-step button{width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;background:transparent;color:#fff;
box-shadow:inset 0 0 0 1px var(--dline);font-size:17px;line-height:1;
transition:background .25s var(--e),color .25s var(--e),box-shadow .25s var(--e)}
.pk-step button:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.pk-step b{font-family:var(--disp);font-size:19px;font-weight:600;min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums;color:#fff}
.pk-step span{font-size:14px;color:#9DA1A6}
.pk-sum{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:14.5px;color:#9DA1A6;
border-bottom:1px solid var(--dline)}
.pk-sum[hidden]{display:none}
.pk-calc .pk-l{display:flex;flex-direction:column;justify-content:center}
.pk-sum b{font-family:var(--disp);font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.pk-tot{margin-top:auto;padding-top:20px}
.pk-tot .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7E8A82}
.pk-big{font-family:var(--disp);font-size:clamp(34px,4.4vw,48px);font-weight:600;letter-spacing:-.05em;line-height:1;
color:#fff;font-variant-numeric:tabular-nums;margin:8px 0 4px}
.pk-sub{font-size:14.5px;color:#9DA1A6}
.pk-sub b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.pk-calc .btn{margin-top:20px;background:#FAFAF8;color:var(--ink);width:100%}
.pk-note{font-size:12.5px;color:#6E7175;margin-top:11px}
.pk-flash{animation:pkflash .5s var(--e)}
@keyframes pkflash{0%{opacity:.35;transform:translateY(-4px)}100%{opacity:1;transform:none}}
/* ===== v28: liv i process, jämförelse och offert ===== */
/* tidslinjen ritas av scrollen i stället för på en gång */
.steps::after{width:calc(var(--fill,0) * 100%)!important;transition:width .25s linear!important}
.step::before{transition:opacity .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e)!important}
.step.lit::before{box-shadow:0 0 0 6px rgba(13,14,15,.10)}
.step{transition:opacity .5s var(--e)}
.step:not(.lit){opacity:.42}
.step .t{color:var(--ink3);transition:color .4s var(--e)}
.step.lit .t{color:var(--ink)}
/* tidsbudgeten */
.tbud{margin-top:44px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;
padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:700px){.tbud{grid-template-columns:1fr;align-items:start}}
.tbud .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:12px}
.tbar{height:8px;border-radius:8px;background:var(--bg3);overflow:hidden;position:relative}
.tbar i{display:block;height:100%;width:0;background:var(--ink);border-radius:8px;transition:width .3s linear}
.tbar u{position:absolute;top:0;bottom:0;width:1px;background:var(--line2)}
.tnum{font-family:var(--disp);font-size:clamp(30px,3.6vw,40px);font-weight:600;letter-spacing:-.05em;line-height:1;
white-space:nowrap;font-variant-numeric:tabular-nums}
.tnum span{font-size:15px;font-weight:400;color:var(--ink3);letter-spacing:-.01em}
/* jämförelsen: vinstkolumnen byggs rad för rad */
.cmp .row .yes{position:relative;padding:7px 12px;margin:-7px -12px;border-radius:8px;
background:transparent;transition:background .55s var(--e)}
.in .cmp .row .yes{background:rgba(13,14,15,.055)}
.cmp .row:hover span:not(.yes){color:var(--ink3);transition:color .3s}
/* Accentstapeln pa EZ Studio-cellen ligger pa ::after, inte ::before.
::before bar redan kolumnetiketten (content:attr(data-l)) i mobilvyn,
sa den dekorativa varianten slog ut den — och just EZ Studio-kolumnen,
den enda som betyder nagot, blev den enda utan rubrik pa mobil. */
.cmp .row .yes::after{content:"";position:absolute;left:-1px;top:12%;bottom:12%;width:2px;border-radius:2px;
background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--e)}
.in .cmp .row .yes::after{transform:scaleY(1)}
@media(max-width:820px){.cmp .row .yes{margin:0;background:transparent!important}.cmp .row .yes::after{display:none}}
/* offerten: sammansättningen som stapel */
.pk-bar{display:flex;height:8px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.08);margin:16px 0 4px}
.pk-bar i{height:100%;width:0;transition:width .55s var(--e)}
.pk-bar i[data-k="paket"]{background:#FAFAF8}
.pk-bar i[data-k="sidor"]{background:#9DA1A6}
.pk-bar i[data-k="bild"]{background:#6E7175}
.pk-bar i[data-k="express"]{background:#4A4D50}
.pk-key{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
text-transform:uppercase;color:#7E8A82;margin-bottom:4px}
.pk-key span{display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .4s var(--e)}
.pk-key span.on{opacity:1}
.pk-key b{width:7px;height:7px;border-radius:2px;display:block}
.pk-sum{overflow:hidden}
.pk-sum.pk-in{animation:pkslide .45s var(--e)}
@keyframes pkslide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
/* ===== KALENDERN — tio dagar mot 45 minuter ===== */
.cal{margin-top:40px}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:12px}
.cal-head b{color:var(--ink);font-weight:500}
.cal-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
@media(max-width:900px){.cal-grid{grid-template-columns:repeat(5,1fr)}}
.cal-d{position:relative;aspect-ratio:3/4;border-radius:10px;background:var(--bg3);overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line);padding:32px 10px 11px;display:flex;flex-direction:column;
transition:background .5s var(--e),box-shadow .5s var(--e),transform .5s var(--e)}
.cal-d .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink3);transition:color .5s var(--e)}
.cal-d .w{margin-top:auto;font-family:var(--disp);font-size:12.5px;font-weight:500;letter-spacing:-.02em;
color:var(--ink3);transition:color .5s var(--e)}
.cal-d.on{background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-3px)}
.cal-d.on .n{color:rgba(255,255,255,.45)}
.cal-d.on .w{color:#fff}
.cal-d .you{position:absolute;left:0;right:0;top:0;height:24px;background:var(--link);
opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity .4s var(--e),transform .5s var(--e)}
.cal-d.on .you{opacity:1;transform:none}
.cal-d .you em{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);
font-size:9px;letter-spacing:.08em;color:#fff;white-space:nowrap;opacity:0;transition:opacity .4s var(--e) .25s}
.cal-d.on .you em{opacity:1}
.cal-foot{display:grid;grid-template-columns:auto auto;gap:34px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:640px){.cal-foot{grid-template-columns:1fr;gap:16px}}
.cal-foot .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:5px}
.cal-foot .v{font-family:var(--disp);font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.cal-foot .v.mine{color:var(--link)}
/* ===== KAPPLÖPNINGEN — vem är klar när ===== */
.race{margin-top:38px;padding:26px 28px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.race-ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
color:var(--ink3);padding-left:132px;margin-bottom:10px}
@media(max-width:700px){.race-ax{padding-left:0}}
.lane{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:0;padding:9px 0}
@media(max-width:700px){.lane{grid-template-columns:1fr;gap:6px}}
.lane .who{font-size:14.5px;color:var(--ink2)}
.lane.me .who{color:var(--ink);font-weight:500}
.lane .tr{position:relative;height:12px;border-radius:12px;background:var(--bg3);overflow:visible}
.lane{padding:14px 0}
.lane .tr i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:12px;background:var(--ink3);
transition:width 1.5s var(--e)}
.lane.me .tr i{background:var(--ink)}
.in .lane .tr i{width:var(--w)}
.lane .tr .band{position:absolute;top:0;bottom:0;border-radius:12px;opacity:0;transition:opacity .6s var(--e) .9s;
background:repeating-linear-gradient(115deg,var(--line2) 0 6px,transparent 6px 12px)}
.in .lane .tr .band{opacity:1}
.lane .tag{position:absolute;top:50%;z-index:3;transform:translate(8px,-50%) scale(.8);opacity:0;white-space:nowrap;
font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
background:var(--card);padding:4px 9px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);
transition:opacity .5s var(--e) 1.4s,transform .5s var(--e) 1.4s}
.in .lane .tag{opacity:1;transform:translate(8px,-50%)}
.lane.me .tag{background:var(--ink);color:#fff;box-shadow:none}
.lane.me .tr i::after{content:"";position:absolute;right:-4px;top:50%;width:11px;height:11px;border-radius:50%;
background:var(--ink);transform:translateY(-50%);box-shadow:0 0 0 0 rgba(13,14,15,.28);
animation:pulse2 2.2s var(--e) infinite 1.6s}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(13,14,15,.3)}70%{box-shadow:0 0 0 12px rgba(13,14,15,0)}100%{box-shadow:0 0 0 0 rgba(13,14,15,0)}}
.race-note{margin-top:16px;font-size:13.5px;color:var(--ink3)}
/* ===== 1. SIDAN BYGGS MEDAN DAGARNA GÅR ===== */
.proc-live{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,3vw,44px);margin-top:40px;align-items:start}
@media(max-width:980px){.proc-live{grid-template-columns:1fr}}
.bframe{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 2px 3px rgba(13,14,15,.05),0 34px 66px -46px rgba(13,14,15,.45),inset 0 0 0 1px var(--line)}
.bpane{position:relative;aspect-ratio:16/11;background:#fff;overflow:hidden;transition:background .8s var(--e)}
.bpane[data-b="6"],.bpane[data-b="7"],.bpane[data-b="8"],.bpane[data-b="9"],.bpane[data-b="10"]{background:#16181A}
.bl{position:absolute;border-radius:6px;background:var(--bg3);opacity:0;transform:translateY(10px);
transition:opacity .6s var(--e),transform .6s var(--e),background .7s var(--e)}
.bpane[data-b="6"] .bl,.bpane[data-b="7"] .bl,.bpane[data-b="8"] .bl,.bpane[data-b="9"] .bl,.bpane[data-b="10"] .bl{background:rgba(255,255,255,.08)}
.bl.on{opacity:1;transform:none}
.btx{position:absolute;font-family:var(--disp);letter-spacing:-.04em;color:var(--ink);opacity:0;transform:translateY(8px);
transition:opacity .6s var(--e),transform .6s var(--e),color .7s var(--e)}
.bpane[data-b="6"] .btx,.bpane[data-b="7"] .btx,.bpane[data-b="8"] .btx,.bpane[data-b="9"] .btx,.bpane[data-b="10"] .btx{color:#F5F5F3}
.btx.on{opacity:1;transform:none}
.bimg{position:absolute;left:6%;right:6%;bottom:8%;height:34%;border-radius:8px;overflow:hidden;opacity:0;transform:scale(.97);
transition:opacity .7s var(--e),transform .7s var(--e)}
.bimg i{position:absolute;inset:0;background-image:var(--img-bygg),linear-gradient(140deg,rgba(120,130,140,.45),rgba(40,46,52,.75));background-size:cover;background-position:center}
.bimg.on{opacity:1;transform:none}
.bcta{position:absolute;left:6%;top:56%;background:#D8FF4F;color:#16181A;padding:.6em 1.2em;border-radius:100px;
font-family:var(--disp);font-weight:600;font-size:clamp(9px,1vw,13px);opacity:0;transform:translateY(10px) scale(.9);
transition:opacity .5s var(--e),transform .5s var(--e)}
.bcta.on{opacity:1;transform:none}
.blive{position:absolute;right:14px;top:14px;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
background:#D8FF4F;color:#16181A;padding:5px 10px;border-radius:100px;opacity:0;transform:scale(.8);
transition:opacity .5s var(--e),transform .5s var(--e)}
.blive.on{opacity:1;transform:none}
.bstate{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.bstate b{color:var(--ink);font-weight:400}
.cal-grid{grid-template-columns:repeat(5,1fr)!important}
/* ===== 2. VAD KOSTAR DIN EGEN TID ===== */
.rate{margin-top:38px;padding:28px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.rate-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.rate-top .q{font-family:var(--disp);font-size:clamp(17px,2vw,21px);font-weight:600;letter-spacing:-.03em}
.rate-top .v{font-family:var(--disp);font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.rate input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--bg3);margin:10px 0 4px}
.rate input[type=range]:focus-visible{outline:2px solid var(--link);outline-offset:4px}
#ezd-fe .ezd-lapView:focus-visible,#ezd-fe .ezd-phoneView:focus-visible{outline-offset:-3px}
.rate input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ink);cursor:grab;box-shadow:0 4px 12px -3px rgba(13,14,15,.5)}
.rate input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--ink);cursor:grab}
.rate .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink3);margin-bottom:24px}
.rbar{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:16px;padding:11px 0}
@media(max-width:720px){.rbar{grid-template-columns:1fr;gap:6px}}
.rbar .who{font-size:14.5px;color:var(--ink2)}
.rbar.me .who{color:var(--ink);font-weight:500}
.rtrack{position:relative;height:34px;border-radius:8px;background:var(--bg3);overflow:hidden;display:flex}
.rtrack i{height:100%;transition:width .45s var(--e)}
.rtrack .fee{background:var(--ink3)}
.rtrack .yours{background:repeating-linear-gradient(115deg,var(--link) 0 8px,rgba(43,84,240,.72) 8px 16px)}
.rbar.me .rtrack .fee{background:var(--ink)}
.rtrack b{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:600;
font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.rkey{display:flex;gap:20px;margin-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.rkey span{display:flex;align-items:center;gap:7px}
.rkey u{width:10px;height:10px;border-radius:3px;display:block;text-decoration:none}
.rverdict{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink2)}
.rverdict b{color:var(--ink);font-weight:500}
/* ===== 3. SIDKARTAN VÄXER MED OFFERTEN ===== */
.pk-map{margin-top:18px;padding-top:16px;border-top:1px solid var(--dline)}
.pk-map .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E8A82;display:block;margin-bottom:11px}
.pk-pages{display:flex;flex-wrap:wrap;gap:8px}
.pg{width:44px;height:58px;border-radius:6px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
position:relative;overflow:hidden;opacity:0;transform:translateY(8px) scale(.9);
transition:opacity .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e)}
.pg.on{opacity:1;transform:none}
.pg::before{content:"";position:absolute;left:6px;right:16px;top:8px;height:4px;border-radius:2px;background:rgba(255,255,255,.75)}
.pg::after{content:"";position:absolute;left:6px;right:8px;top:17px;height:3px;border-radius:2px;background:rgba(255,255,255,.28)}
.pg.home{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
/* Fotot ligger pa en extern adress som studion inte rader over. Overallt
annars finns en ritad gradient under det — har saknades den, sa strecket
hade blivit tomt om adressen slutar svara. */
.pg.img i{position:absolute;left:6px;right:6px;bottom:6px;height:22px;border-radius:4px;
background-image:var(--img-bygg),linear-gradient(140deg,rgba(120,130,140,.55),rgba(40,46,52,.8));
background-size:cover;background-position:center;opacity:0;transition:opacity .5s var(--e)}
.pg.img.shown i{opacity:1}
.pk-stamp{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:#16181A;background:#D8FF4F;padding:5px 10px;border-radius:100px;opacity:0;transform:rotate(-3deg) scale(.85);
transition:opacity .4s var(--e),transform .4s var(--e)}
.pk-stamp.on{opacity:1;transform:rotate(-3deg)}
/* ===== PROCESSEN — en bild, en lista ===== */
.proc{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,4vw,64px);margin-top:44px;align-items:start}
@media(max-width:980px){.proc{grid-template-columns:1fr;gap:32px}}
.proc-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
.proc-meta b{color:var(--ink);font-weight:400}
.proc-days{display:flex;align-items:center;gap:14px;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.proc-days b{color:var(--ink);font-weight:400}
.proc-days i{flex:1;height:2px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.proc-days i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--ink);border-radius:2px;transition:width .5s var(--e)}
.proc-steps{list-style:none;margin:0;padding:0}
.proc-steps li{position:relative;padding:17px 0 17px 30px;border-bottom:1px solid var(--line);opacity:.38;transition:opacity .5s var(--e)}
.proc-steps li::before{content:"";position:absolute;left:0;top:25px;width:9px;height:9px;border-radius:50%;background:var(--line2);transition:background .5s var(--e),box-shadow .5s var(--e)}
.proc-steps li.on{opacity:1}
.proc-steps li.on::before{background:var(--ink);box-shadow:0 0 0 5px rgba(13,14,15,.09)}
.proc-steps .d{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.proc-steps h3{font-size:18px;letter-spacing:-.03em;margin:6px 0}
.proc-steps p{margin:0;font-size:14.5px;color:var(--ink2)}
.proc-steps .mine{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#fff;background:var(--link);padding:4px 9px;border-radius:100px}
.proc-steps .mine.none{color:var(--ink3);background:var(--bg3)}
.proc-steps li.tot{display:flex;gap:36px;border-bottom:0;opacity:1;padding-top:22px}
.proc-steps li.tot::before{display:none}
.proc-steps li.tot .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.proc-steps li.tot .v{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:block}
.proc-steps li.tot .v.mine2{color:var(--link)}
.bpane{aspect-ratio:16/10.5}
/* ===== förtroende: identitet och sidfot ===== */
.who-me{margin-bottom:26px}
.who-me .nm{font-family:var(--disp);font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.04em}
.who-me .rl{font-size:15px;color:var(--ink2);margin:4px 0 14px}
.who-me .ez{font-size:15px;color:var(--ink2);padding-left:14px;border-left:2px solid var(--ink)}
.who-me .ez b{color:var(--ink);font-weight:500}
.legal{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:26px;margin-top:30px;border-top:1px solid var(--dline)}
@media(max-width:820px){.legal{grid-template-columns:1fr 1fr;gap:18px}}
.legal .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E7175;margin-bottom:5px}
.legal .v{font-size:14px;color:#C9CDD1}
/* Var ett piller med gron prick. Rundad kapsel plus liten fargad prick ar
mallsignalen framfor andra — den satt pa tre stallen har. Nu ar det en
rad text. */
.svar{margin:16px 0 0;font-size:13.5px;color:var(--ink2)}
.final .svar{color:#8A8E92}
/* ===== 2. KÖPLATSER ===== */
/* ===== 3. GARANTIER ===== */
.guards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:900px){.guards{grid-template-columns:1fr}}
.guard{padding:24px;border-radius:var(--r);background:#17181A;box-shadow:inset 0 0 0 1px var(--dline)}
.guard .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E8A82;display:block;margin-bottom:12px}
.guard h3{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.03em;color:#fff;margin:0 0 8px}
.guard p{margin:0;font-size:14.5px;color:#9DA1A6}
/* ================= KOMPOSITIONEN BRYTS ================= */
/* hjälterubriken är sidans bild — kant till kant */
h1.mega{font-size:clamp(36px,6.3vw,110px);line-height:.95;letter-spacing:-.058em;max-width:none;margin:8px 0 0;font-weight:600}
h1.mega .rot{min-width:0}
.hero-grid{grid-template-columns:.86fr 1.14fr;align-items:end;margin-top:clamp(28px,4vw,56px)}
.hero-copy .hero-sub{max-width:38ch;margin-top:0}
.hero-copy .hero-sub b{color:var(--ink);font-weight:600}
.cluster{height:clamp(300px,29vw,440px)}
@media(max-width:1180px){.hero-grid{grid-template-columns:1fr}.cluster{margin-top:12px}}
/* klustret blir fullbrett under 1180 — hojden maste folja bredden, annars
spiller fonstren ut ur ladan (regeln ovan slog ut media-fragan pa rad 224) */
@media(max-width:1180px){.cluster{height:auto;aspect-ratio:1.85/1}}
@media(max-width:640px){.cluster{height:auto;aspect-ratio:16/11}}
/* sektionsnummer i marginalen — stort, tunt, kallt */
section.pad .sheet, .rebuild .sheet{position:relative}
section[data-sec] .sheet::before{content:attr(data-sec);position:absolute;left:calc(var(--gut) * -1 + 6px);top:-6px;
font-family:var(--disp);font-size:clamp(46px,7vw,104px);font-weight:600;letter-spacing:-.06em;line-height:.8;
color:var(--ink);opacity:.07;pointer-events:none}
@media(max-width:1400px){section[data-sec] .sheet::before{position:static;display:block;opacity:.1;margin-bottom:-14px;font-size:clamp(38px,5vw,64px)}}
/* full bredd-band med löpande påstående */
.band{background:var(--ink);color:var(--bg);padding:26px 0;overflow:hidden;display:flex;
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.band ul{display:flex;gap:60px;margin:0;padding:0 30px 0 0;list-style:none;flex:0 0 auto;animation:slide 42s linear infinite}
.band li{font-family:var(--disp);font-size:clamp(24px,3.4vw,44px);font-weight:600;letter-spacing:-.04em;white-space:nowrap;
display:flex;align-items:center;gap:60px}
.band li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--bg);opacity:.45}
.band.rev ul{animation-direction:reverse}
/* rubriker som faktiskt tar plats */
section.pad h2{font-size:clamp(34px,5.6vw,68px);letter-spacing:-.05em;max-width:17ch}
.rb-intro h2{font-size:clamp(34px,5.6vw,66px);letter-spacing:-.05em}
.final h2{font-size:clamp(42px,8.4vw,110px);max-width:12ch;letter-spacing:-.055em}
/* varannan sektion högerställd — bryter enformigheten */
/* #foreefter dog nar sektionen byttes mot #ezd-fe. Reglerna nedan traffade
ingenting, inklusive mobilaterstallningen — darav att fore/efter-rubriken
satt kvar hogerstalld pa telefon. Kvar star bara #varfor, som finns. */
#varfor .mono,#varfor h2,#varfor .lede{margin-left:auto;text-align:right}
#varfor h2{max-width:18ch}#varfor .lede{max-width:48ch;margin-left:auto}
@media(max-width:820px){#varfor .mono,#varfor h2,#varfor .lede{text-align:left;margin-left:0}}
/* ===== 1. DEN GAMLA SAJTEN AVFÄRGAS — grå och trist, inte blå ===== */
.o-top{background:linear-gradient(#7C7F84,#5A5D62)!important}
.o-top p{color:#D5D7DA!important}
.o-nav{background:#EDEDEB!important;border-bottom-color:#CFCFCC!important}
.o-nav a{color:#5A5D62!important}
.o-body .mh6{color:#5A5D62!important}
.o-side{background:#F2F2F0!important;border-color:#DCDCD9!important}
.o-side b{color:#5A5D62!important}
.o{filter:grayscale(1)}
/* ===== 2. TOMMA LÄGET: rent skelett, etikett i underkant ===== */
.demo-veil{justify-content:flex-end;align-items:flex-start;text-align:left;padding:0 0 30px 30px;gap:7px}
.demo-veil::before{opacity:.75;
background:
linear-gradient(var(--bg3) 0 0) 8% 13%/14% 6% no-repeat,
linear-gradient(var(--bg3) 0 0) 92% 13%/18% 6% no-repeat,
linear-gradient(var(--bg3) 0 0) 8% 30%/44% 10% no-repeat,
linear-gradient(var(--bg3) 0 0) 8% 44%/28% 4% no-repeat,
linear-gradient(var(--bg3) 0 0) 8% 56%/13% 5% no-repeat}
.demo-veil b{font-size:clamp(16px,1.5vw,19px)}
.demo-veil .dots{margin-top:2px}
/* ===== 3. FÖRE/EFTER: hela ytan syns direkt ===== */
#foreefter .ba{aspect-ratio:16/9.6}
/* efter-sidan i reglaget: innehållet ligger där man ser det */
.layer-new .site{text-align:right;align-items:stretch}
.layer-new .site .top{flex-direction:row-reverse}
.layer-new .site .nv{flex-direction:row-reverse}
.layer-new .site .mh4{max-width:18ch;margin-left:auto}
.layer-new .site .sb{max-width:38ch;margin-left:auto}
.layer-new .site .cta2{align-self:flex-end}
/* ===== DET JAG INTE GÖR ===== */
.nope{background:var(--ink);color:var(--bg)}
.nope .mono{color:#8B9094}
.nope h2{color:var(--bg);max-width:15ch}
.nope .lede{color:#9DA1A6}
.nolist{margin-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.nolist .n{display:grid;grid-template-columns:auto 1fr 1.15fr;gap:26px;align-items:baseline;
padding:22px 0;border-bottom:1px solid rgba(255,255,255,.14);
opacity:0;transform:translateY(14px);transition:opacity .6s var(--e),transform .6s var(--e)}
.in .nolist .n{opacity:1;transform:none}
.in .nolist .n:nth-child(2){transition-delay:.08s}
.in .nolist .n:nth-child(3){transition-delay:.16s}
.in .nolist .n:nth-child(4){transition-delay:.24s}
.in .nolist .n:nth-child(5){transition-delay:.32s}
@media(max-width:820px){.nolist .n{grid-template-columns:auto 1fr;gap:10px 18px}.nolist .n em{grid-column:2}}
.nolist .x{width:26px;height:26px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.nolist .x::before,.nolist .x::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:1.5px;background:#fff}
.nolist .x::before{transform:rotate(45deg)}.nolist .x::after{transform:rotate(-45deg)}
.nolist b{font-family:var(--disp);font-size:clamp(18px,2vw,23px);font-weight:600;letter-spacing:-.03em;color:var(--bg)}
.nolist em{font-style:normal;font-size:15px;color:#9DA1A6}
.nope .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:900px){.nope .proof{grid-template-columns:1fr 1fr}}
.nope .proof div{padding:18px 20px;border-radius:var(--r);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.nope .proof .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8B9094;margin-bottom:6px}
.nope .proof .v{font-size:15px;font-weight:500;color:#fff}
.nope .foot2{margin-top:26px;font-size:16px;color:#C9CDD1;max-width:66ch}
.nope .foot2 b{color:#fff;font-weight:500}
/* ===== SÅ RÄKNAS PRISET ===== */
.calcopen{margin-top:20px;background:#FBFBFA;color:#0D0E0F;border-radius:var(--r);box-shadow:none;padding:30px}
.calcopen .h,.calcopen .hh,.csum b{color:#0D0E0F}
.calcopen .t,.calcopen .s{color:#55585C}
.crow{border-bottom-color:rgba(0,0,0,.09)}
.crow .bar{background:#E4E5E1}
.crow .bar i{background:#0D0E0F}
.csum{border-top-color:rgba(0,0,0,.16)}
.csum span,.cnote{color:#6E7175}
.calcopen .h{font-family:var(--disp);font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.03em;margin-bottom:6px}
.calcopen .s{font-size:14.5px;color:var(--ink2);margin:0 0 20px}
.crow{display:grid;grid-template-columns:1fr auto 76px;gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.crow .t{color:var(--ink2)}
.crow .bar{width:clamp(60px,15vw,200px);height:6px;border-radius:6px;background:var(--bg3);overflow:hidden;justify-self:end}
.crow .bar i{display:block;height:100%;background:var(--ink);border-radius:6px;width:0;transition:width 1.1s var(--e)}
.in .crow .bar i{width:var(--w)}
.crow .hh{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--disp);font-weight:600}
.csum{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:1px solid var(--line2)}
.csum span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.csum b{font-family:var(--disp);font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.04em}
.cnote{margin-top:14px;font-size:14px;color:var(--ink3)}
/* Prissektionen ar mork — dar maste samma etikett ga at andra hallet.
Barnkombinatorn haller regeln borta fran .cnote inuti det ljusa
timkortet (.csum-blocket), som ligger djupare i samma sektion. */
#pris > .sheet > .cnote,.teaser .cnote,.final .cnote{color:#8A8E92}
/* ===== SIDFOT ===== */
footer{padding:0 0 34px}
.foot-top{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr 1.1fr;gap:clamp(24px,4vw,60px);
padding:clamp(46px,6vw,74px) 0 40px;border-top:1px solid var(--dline)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-brand .lg{font-family:var(--disp);font-weight:600;font-size:23px;letter-spacing:-.035em;color:#fff;display:flex;align-items:center;gap:10px}
/* Pricken arvde --ink och lag svart pa svart i sidfoten, alltsa osynlig.
Den ska folja logotypens farg. */
.foot-brand .lg .blip{background:#fff}
.foot-brand p{margin:14px 0 0;font-size:14.5px;color:#8B9094;max-width:30ch;line-height:1.6}
.foot-brand .status{margin:12px 0 0;font-size:13.5px;color:#8B9094}
.fcol h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#8A8E92;margin:0 0 16px;font-weight:400}
.fcol a,.fcol span{display:block;font-size:14.5px;color:#C9CDD1;text-decoration:none;padding:5px 0;transition:color .25s}
.fcol a:hover{color:#fff}
.fcol .big{font-family:var(--disp);font-size:17px;font-weight:500;color:#fff;letter-spacing:-.02em;padding-bottom:2px}
.foot-bot{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;
padding-top:22px;border-top:1px solid var(--dline)}
.foot-bot .legal2{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:#8A8E92}
.foot-bot .legal2 b{color:#8B9094;font-weight:400}
.foot-bot .top{font-size:13px;color:#8B9094;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.foot-bot .top:hover{color:#fff}
/* ===== FAQ I KATEGORIER ===== */
.faqcat{margin-top:36px}
.faqcat > h3{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);
margin:0 0 4px;padding-top:26px;border-top:1px solid var(--line)}
.faqcat:first-of-type > h3{padding-top:0;border-top:0}
/* ===== KONTAKTFORMULÄR ===== */
.formwrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,64px);align-items:start;margin-top:40px}
@media(max-width:900px){.formwrap{grid-template-columns:1fr;gap:30px}}
.fform{background:var(--card);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,3vw,34px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fld2{display:block}
.fld2 span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.fld2 input,.fld2 textarea,.fld2 select{width:100%;background:var(--bg);color:var(--ink);border:0;border-radius:9px;
box-shadow:inset 0 0 0 1px var(--line2);padding:12px 14px;font-family:var(--body);font-size:15px;
transition:box-shadow .25s}
.fld2 input:focus,.fld2 textarea:focus,.fld2 select:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fld2.full{grid-column:1/-1}
.fld2 textarea{min-height:104px;resize:vertical}
.fform .btn{width:100%;justify-content:center;margin-top:16px}
.fform .fine{margin:12px 0 0;font-size:13px;color:var(--ink3);text-align:center}
.fside .lead{font-family:var(--disp);font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:-.035em;line-height:1.3;margin:0 0 18px}
.fside ul{list-style:none;margin:0;padding:0}
.fside li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.fside li:last-child{border-bottom:0}
.fside li b{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);
display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);margin-top:1px}
.fside .alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.fside .alt a{color:var(--ink);font-weight:500}
/* Rubrik som bara finns for uppläsning. Tva sektioner — prispaketen och
tiodagarsforloppet — ar de enda pa sina sidor utan rubrik, sa rubriktradet
hoppade fran h1 till h3. Innehallet ar sjalvforklarande for den som ser
det, och sidorna ska inte bli langre, sa niván fylls i har i stallet.
Inte display:none — da laser inga hjalpmedel den heller. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
*{transition-duration:.01ms!important;animation:none!important}
.rv,.fade,.cmp .row,.win{opacity:1!important;transform:none!important}
.ln i{transform:none!important}
.rb-step{opacity:1!important}
.steps::after{width:100%!important}
.step::before{opacity:1!important;transform:none!important}
.rot span{position:relative;transform:none;opacity:1}
.rot span:not(:first-child){display:none}
.mockcursor,.toast{display:none}
}
/* ==== EZD device before/after (scoped) ==== */
#ezd-fe{padding:clamp(50px,7vw,100px) 0}
#ezd-fe .ezd-head{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
/* Hogerstalld rubrik ar en rytm som bara funkar nar texten star i en smal
spalt mot en bred layout. Pa telefon ar spalten hela skarmen, och tre
rader lopande text med fransig vansterkant laser illa. */
@media(max-width:820px){#ezd-fe .ezd-head{text-align:left;align-items:flex-start}}
#ezd-fe .ezd-h1{font-size:clamp(34px,6vw,84px);letter-spacing:-.055em;line-height:.98;margin:0}
#ezd-fe .ezd-sub{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;font-size:clamp(18px,2.4vw,30px);color:var(--ink2);margin:14px 0 0}
#ezd-fe .ezd-lede{color:var(--ink2);max-width:58ch;margin:16px 0 0;font-size:17px}
#ezd-fe .ezd-toggle{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;margin:26px 0 0}
#ezd-fe .ezd-toggle button{border:0;background:transparent;font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink2);padding:10px 22px;min-height:44px;justify-content:center;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:8px;
transition:background .28s var(--e),color .28s var(--e)}
#ezd-fe .ezd-toggle button.on{background:var(--ink);color:#fff}
#ezd-fe .ezd-toggle .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45}
#ezd-fe .ezd-toggle button.on[data-v="before"] .dot{opacity:1;background:#F6675A}
#ezd-fe .ezd-toggle button.on[data-v="after"] .dot{opacity:1;background:#57D98A}
#ezd-fe .ezd-stage{position:relative;perspective:2200px;margin-top:clamp(30px,4vw,56px);padding-bottom:64px}
#ezd-fe .ezd-rig{position:relative;transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-10deg) rotateZ(.5deg);transition:transform .8s var(--e);will-change:transform;width:min(84%,860px);margin:0 auto}
#ezd-fe .ezd-stage:hover .ezd-rig{transform:rotateX(3deg) rotateY(-5deg)}
#ezd-fe .ezd-badge{position:absolute;z-index:30;background:var(--ink);color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 14px 34px rgba(13,14,15,.28);transition:.35s}
#ezd-fe .ezd-badge i{width:6px;height:6px;border-radius:50%;background:#F6675A;transition:.35s}
#ezd-fe .ezd-badge.isafter i{background:#57D98A}
#ezd-fe .ezd-badge.live{top:-6px;left:26px}
#ezd-fe .ezd-laptop{position:relative;width:100%}
#ezd-fe .ezd-screen{background:#0D0E0F;border-radius:18px 18px 6px 6px;padding:13px 13px 0;box-shadow:0 55px 120px -38px rgba(13,14,15,.55),0 18px 44px -18px rgba(13,14,15,.34)}
#ezd-fe .ezd-bezel{position:relative;background:#000;border-radius:9px 9px 0 0;overflow:hidden;aspect-ratio:16/10.2}
#ezd-fe .ezd-cam{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#1b1b1b;z-index:40}
#ezd-fe .ezd-lapView{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:#fff;scroll-behavior:smooth}
#ezd-fe .ezd-chin{height:15px;background:linear-gradient(#c8ccd0,#a6aab0);border-radius:0 0 6px 6px;position:relative}
#ezd-fe .ezd-chin .ezd-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:13%;height:6px;background:#8f949b;border-radius:0 0 8px 8px}
#ezd-fe .ezd-base{height:11px;width:116%;margin-left:-8%;background:linear-gradient(#dcdfe2,#adb1b7);border-radius:0 0 15px 15px;box-shadow:0 28px 36px -22px rgba(13,14,15,.5)}
#ezd-fe .ezd-phone{position:absolute;right:2%;bottom:-30px;width:18%;min-width:120px;z-index:35;transform:rotateY(-10deg) translateZ(90px);transition:transform .8s var(--e)}
#ezd-fe .ezd-stage:hover .ezd-phone{transform:rotateY(-5deg) translateZ(104px) translateY(-10px)}
#ezd-fe .ezd-pbody{background:#0D0E0F;border-radius:30px;padding:7px;box-shadow:0 46px 80px -28px rgba(13,14,15,.6)}
#ezd-fe .ezd-pscreen{position:relative;border-radius:23px;overflow:hidden;background:#fff;aspect-ratio:9/19.3}
#ezd-fe .ezd-pnotch{position:absolute;top:4%;left:50%;transform:translateX(-50%);width:30%;aspect-ratio:6/1;height:auto;background:#0D0E0F;border-radius:999px;z-index:20}
#ezd-fe .ezd-phoneView{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:#fff;scroll-behavior:smooth}
#ezd-fe .ezd-badge.mob{right:4%;bottom:-48px}
#ezd-fe .ezd-phoneView .ezd-siteScale{transform-origin:top left}
#ezd-fe .ezd-phoneView .w-phone{width:390px}
#ezd-fe .ezd-phoneView .w-desk{width:660px}
/* gamla sidan har ingen safe area — lägg bandet i headerns egen färg */
#ezd-fe .w-desk .o-top{padding-top:15%}
#ezd-fe .ezd-hint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:36;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);display:flex;gap:6px;pointer-events:none;animation:ezdpu 2.6s var(--e) infinite}
@keyframes ezdpu{0%,100%{opacity:.5}50%{opacity:1}}
#ezd-fe .ezd-lapView::-webkit-scrollbar,#ezd-fe .ezd-phoneView::-webkit-scrollbar{width:8px}
#ezd-fe .ezd-lapView::-webkit-scrollbar-thumb,#ezd-fe .ezd-phoneView::-webkit-scrollbar-thumb{background:rgba(13,14,15,.18);border-radius:8px}
@media(max-width:900px){
#ezd-fe .ezd-phone{width:30%;min-width:0;right:0;bottom:-38px}
/* Etiketten forklarar telefonen bredvid laptopen. Laser man i en telefon
sager den ingenting — och den lag som en tredje pratbubbla runt samma
widget, utover ingressen och scrollhinten. */
#ezd-fe .ezd-badge.mob{display:none}
}
#ezd-fe .ezd-cap{margin-top:64px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
@media(max-width:720px){#ezd-fe .n-hero{grid-template-columns:1fr!important}}
/* --- Riktig mobillayout inne i telefonmockupen. Media queries mäter mot
webbläsarfönstret, inte mot den skalade 390px-behållaren, så de reglerna
tänder aldrig här. Därför scopas allt på .w-phone. --- */
#ezd-fe .w-phone .n-nav{padding:12px 16px;padding-top:62px}
#ezd-fe .w-phone .n-menu{display:none}
#ezd-fe .w-phone .n-lg{font-size:16px;gap:8px}
#ezd-fe .w-phone .n-mark{width:26px;height:26px;font-size:11px;border-radius:7px}
#ezd-fe .w-phone .n-cta{font-size:13px;padding:9px 14px}
#ezd-fe .w-phone .n-hero{grid-template-columns:1fr;gap:22px;padding:30px 16px 28px}
#ezd-fe .w-phone .kick{font-size:11px;letter-spacing:.1em;margin-bottom:12px}
#ezd-fe .w-phone .n-hero h1{font-size:32px;margin-bottom:14px}
#ezd-fe .w-phone .n-hero p{font-size:15px;margin-bottom:20px;line-height:1.55}
#ezd-fe .w-phone .n-btns{flex-direction:column;align-items:stretch}
#ezd-fe .w-phone .n-b1,#ezd-fe .w-phone .n-b2{text-align:center;font-size:14.5px;padding:13px 18px}
#ezd-fe .w-phone .n-b1.big{font-size:15px;padding:14px 20px}
#ezd-fe .w-phone .n-trust{gap:9px 16px;margin-top:18px;font-size:12.5px}
#ezd-fe .w-phone .n-hero-card{padding:20px;border-radius:14px}
#ezd-fe .w-phone .hc-big{font-size:26px}
#ezd-fe .w-phone .hc-div{margin:14px 0}
#ezd-fe .w-phone .hc-row{font-size:13px;gap:14px;padding:6px 0}
#ezd-fe .w-phone .hc-row b{text-align:right}
#ezd-fe .w-phone .n-strip{padding:18px 16px;gap:14px 22px}
#ezd-fe .w-phone .n-strip>div{flex:1 1 40%}
#ezd-fe .w-phone .n-strip b{font-size:19px}
#ezd-fe .w-phone .n-sec{padding:36px 16px}
#ezd-fe .w-phone .n-sec h2{font-size:25px}
#ezd-fe .w-phone .n-sec .sub{font-size:14.5px;margin-bottom:22px}
#ezd-fe .w-phone .n-cards,#ezd-fe .w-phone .n-steps{grid-template-columns:1fr;gap:12px}
#ezd-fe .w-phone .n-card,#ezd-fe .w-phone .n-step{padding:18px}
#ezd-fe .w-phone .n-card .ci{width:32px;height:32px;border-radius:9px;margin-bottom:9px}#ezd-fe .w-phone .n-card .ci svg{width:17px;height:17px}
#ezd-fe .w-phone .n-card b,#ezd-fe .w-phone .n-step b{font-size:16px}
#ezd-fe .w-phone .n-card p,#ezd-fe .w-phone .n-step p{font-size:13.5px}
#ezd-fe .w-phone .n-band{margin:0 16px;padding:24px 20px;border-radius:14px}
#ezd-fe .w-phone .n-band h3{font-size:21px}
#ezd-fe .w-phone .n-quote{padding:38px 16px}
#ezd-fe .w-phone .n-quote p{font-size:20px}
#ezd-fe .w-phone .n-cta-final{padding:38px 16px}
#ezd-fe .w-phone .n-cta-final h2{font-size:25px}
#ezd-fe .w-phone .n-cta-final p{font-size:15px}
#ezd-fe .w-phone .n-foot{grid-template-columns:1fr 1fr;padding:26px 16px;gap:16px;font-size:12.5px}
/* OLD/NEW PAGE STYLES */
— authentic dated Swedish electrician site (~2013)
============================================================ */
#ezd-fe .old{font-family:Arial,Helvetica,sans-serif;color:#222;background:#fff}#ezd-fe .old *{box-sizing:border-box}#ezd-fe .o-top{background:linear-gradient(#2264b5,#194f92);color:#fff;padding:14px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #123c72}#ezd-fe .o-top .lg{font-size:26px;font-weight:700;font-style:italic;text-shadow:1px 1px 0 rgba(0,0,0,.3)}#ezd-fe .o-top .lg span{color:#ffd34d}#ezd-fe .o-top .tel{font-size:12px;text-align:right;line-height:1.4}#ezd-fe .o-top .tel b{font-size:17px}#ezd-fe .o-nav{background:#e6e6e6;border-bottom:2px solid #bcbcbc;display:flex;flex-wrap:wrap;padding:0 20px}#ezd-fe .o-nav a{font-size:13px;color:#194f92;padding:9px 14px;text-decoration:underline;border-right:1px solid #cfcfcf;cursor:pointer}#ezd-fe .o-nav a:hover{background:#d8d8d8}#ezd-fe .o-hero{background:#dde6f0 url('data:image/svg+xml;utf8,') repeat-x bottom;padding:22px 26px}#ezd-fe .o-hero .o-h1{font-family:Arial;font-weight:700;color:#194f92;font-size:22px;margin:0 0 10px;letter-spacing:0}#ezd-fe .o-hero p{font-size:13.5px;margin:0 0 10px;max-width:70ch}#ezd-fe .o-hero .marq{background:#ffe;border:1px dashed #c9a800;color:#8a6d00;font-size:12px;padding:6px 10px;margin:10px 0;font-style:italic}#ezd-fe .o-btn{display:inline-block;background:linear-gradient(#f4ab22,#d8891a);color:#fff;font-size:13px;font-weight:700;padding:8px 18px;border:1px solid #b5720f;border-radius:4px;text-shadow:1px 1px 0 rgba(0,0,0,.25);text-decoration:none;cursor:pointer}#ezd-fe .o-main{display:flex;gap:22px;padding:22px 26px}#ezd-fe .o-main .col{flex:1}#ezd-fe .o-main .side{width:220px;flex:none}#ezd-fe .o-img{width:100%;aspect-ratio:16/9;background-image:var(--img-el),linear-gradient(160deg,#c6cdd4,#98a0a8);background-size:cover;background-position:center;background-color:#b7c2d1;border:3px solid #fff;box-shadow:1px 1px 4px rgba(0,0,0,.25);margin-bottom:14px;filter:saturate(.6) contrast(.9) brightness(1.05)}#ezd-fe .o-h2{color:#194f92;font-size:16px;font-weight:700;border-bottom:2px solid #dce3ec;padding-bottom:5px;margin:18px 0 8px}#ezd-fe .o-main p{font-size:13px;line-height:1.6;margin:0 0 10px;color:#333}#ezd-fe .o-main ul{font-size:13px;padding-left:20px;margin:0 0 12px}#ezd-fe .o-main ul li{margin:3px 0}#ezd-fe .o-box{background:#f5f5f5;border:1px solid #ccc;padding:14px;margin-bottom:14px}#ezd-fe .o-box b{color:#194f92;font-size:14px;display:block;border-bottom:1px solid #ddd;padding-bottom:5px;margin-bottom:7px}#ezd-fe .o-box p{font-size:12.5px;margin:4px 0;color:#444}#ezd-fe .o-news p{font-size:12px;color:#555;border-bottom:1px dotted #ccc;padding:5px 0}#ezd-fe .o-news b{color:#194f92}#ezd-fe .o-foot{background:#194f92;color:#c5d3e6;font-size:11.5px;padding:14px 26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}#ezd-fe .o-foot a{color:#ffd34d}#ezd-fe .o-badge{display:inline-block;background:#eee;border:1px solid #bbb;font-size:10px;color:#777;padding:2px 6px;margin-right:5px}
/* ============ NEW SITE — electrician (warm, trustworthy, trade) ============ */
.new{background:#FBFAF7;color:#1A1D21;font-family:var(--disp)}#ezd-fe .new *{box-sizing:border-box}#ezd-fe .new p, #ezd-fe .new .n-menu, #ezd-fe .new .n-cta, #ezd-fe .new .n-b1, #ezd-fe .new .n-b2, #ezd-fe .new .sub, #ezd-fe .new .n-card p, #ezd-fe .new .n-step p, #ezd-fe .new .hc-sub, #ezd-fe .new .hc-row, #ezd-fe .new .n-trust, #ezd-fe .new .n-strip, #ezd-fe .new .who, #ezd-fe .new .n-foot{font-family:var(--body)}#ezd-fe .n-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:15px 30px;background:rgba(251,250,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid #ECE9E2}#ezd-fe .n-lg{font-weight:700;font-size:19px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;color:#0F1F3D}#ezd-fe .n-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#0F1F3D;color:#FFC53D;font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:0}#ezd-fe .n-menu{display:flex;gap:26px;font-size:14px;color:#5A5F66}#ezd-fe .n-menu span{cursor:pointer}#ezd-fe .n-menu span:hover{color:#0F1F3D}#ezd-fe .n-cta{background:#FFC53D;color:#1A1D21;font-weight:700;font-size:14px;padding:11px 20px;border-radius:8px;cursor:pointer;box-shadow:0 2px 0 #C99A14}#ezd-fe .n-hero{display:grid;grid-template-columns:1.35fr .9fr;gap:34px;align-items:center;padding:56px 30px 44px}
@media(max-width:720px){.n-hero{grid-template-columns:1fr;gap:26px}}#ezd-fe .kick{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C08A00;margin-bottom:16px;display:flex;align-items:center;gap:8px}#ezd-fe .n-hero .n-h1{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.4vw,58px);line-height:1;letter-spacing:-.045em;color:#0F1F3D;margin:0 0 18px}#ezd-fe .n-hero p{font-size:16.5px;color:#4B5057;max-width:44ch;margin:0 0 24px;line-height:1.6}#ezd-fe .n-btns{display:flex;gap:12px;flex-wrap:wrap}#ezd-fe .n-btns.center{justify-content:center}#ezd-fe .n-b1{background:#0F1F3D;color:#fff;font-weight:600;font-size:15px;padding:14px 26px;border-radius:9px;cursor:pointer;box-shadow:0 3px 0 #08122a}#ezd-fe .n-b1.big{font-size:16px;padding:16px 30px}#ezd-fe .n-b2{background:#fff;color:#0F1F3D;font-weight:600;font-size:15px;padding:14px 26px;border-radius:9px;border:1.5px solid #DDD8CE;cursor:pointer}#ezd-fe .n-trust{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:24px;font-size:13.5px;color:#4B5057;font-weight:500}#ezd-fe .n-trust span{white-space:nowrap}#ezd-fe .n-hero-card{background:#0F1F3D;color:#fff;border-radius:16px;padding:26px;box-shadow:0 30px 60px -28px rgba(15,31,61,.5)}#ezd-fe .hc-top{font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9DB0D0;margin-bottom:8px}#ezd-fe .hc-big{font-size:30px;font-weight:700;letter-spacing:-.02em;color:#FFC53D}#ezd-fe .hc-sub{font-size:13px;color:#B9C6DC;margin-top:4px}#ezd-fe .hc-div{height:1px;background:rgba(255,255,255,.14);margin:18px 0}#ezd-fe .hc-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#C9D4E6;padding:7px 0}#ezd-fe .hc-row b{color:#fff;font-family:var(--disp)}#ezd-fe .n-strip{display:flex;gap:36px;flex-wrap:wrap;padding:22px 30px;background:#0F1F3D;color:#B9C6DC;font-size:13px}#ezd-fe .n-strip b{color:#fff;display:block;font-family:var(--disp);font-size:23px;letter-spacing:-.03em}#ezd-fe .n-sec{padding:54px 30px}#ezd-fe .n-eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C08A00;margin-bottom:14px}#ezd-fe .n-sec h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.04em;margin:0 0 10px;max-width:22ch;color:#0F1F3D}#ezd-fe .n-sec .sub{font-size:16px;color:#4B5057;max-width:54ch;margin:0 0 30px}#ezd-fe .n-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.n-cards{grid-template-columns:1fr}}#ezd-fe .n-card{background:#fff;border:1px solid #ECE9E2;border-radius:14px;padding:24px;transition:.3s var(--e)}#ezd-fe .n-card:hover{border-color:#FFC53D;transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(15,31,61,.3)}#ezd-fe .n-card .ci{width:42px;height:42px;border-radius:11px;background:#FFF3D2;color:#0F1F3D;display:flex;align-items:center;justify-content:center;margin-bottom:14px}#ezd-fe .n-card .ci svg{width:22px;height:22px;display:block}#ezd-fe .n-card b{font-size:18px;letter-spacing:-.02em;display:block;margin-bottom:6px;color:#0F1F3D}#ezd-fe .n-card p{font-size:14px;color:#5A5F66;margin:0;line-height:1.55}#ezd-fe .n-band{margin:0 30px;background:#FFC53D;border-radius:16px;padding:32px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}#ezd-fe .n-band .nb-kick{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A6400;margin-bottom:6px}#ezd-fe .n-band h3{font-size:clamp(21px,2.8vw,30px);letter-spacing:-.03em;max-width:22ch;color:#1A1D21}#ezd-fe .n-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:640px){.n-steps{grid-template-columns:1fr}}#ezd-fe .n-step{background:#fff;border:1px solid #ECE9E2;border-radius:14px;padding:22px}#ezd-fe .n-step .sn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#0F1F3D;color:#FFC53D;font-family:var(--disp);font-weight:700;font-size:15px;margin-bottom:14px}#ezd-fe .n-step b{font-size:17px;letter-spacing:-.02em;display:block;margin-bottom:5px;color:#0F1F3D}#ezd-fe .n-step p{font-size:14px;color:#5A5F66;margin:0;line-height:1.5}#ezd-fe .n-quote{padding:56px 30px;text-align:center;background:#F3F1EA;margin:0}#ezd-fe .n-quote .stars{color:#FFC53D;font-size:20px;letter-spacing:3px;margin-bottom:14px}#ezd-fe .n-quote p{font-size:clamp(20px,2.6vw,28px);letter-spacing:-.02em;max-width:26ch;margin:0 auto 16px;line-height:1.3;color:#0F1F3D;font-family:var(--disp)}#ezd-fe .n-quote .who{font-size:14px;color:#6A6F76}#ezd-fe .n-cta-final{text-align:center;padding:56px 30px}#ezd-fe .n-cta-final h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.04em;color:#0F1F3D;margin:0 0 8px}#ezd-fe .n-cta-final p{font-size:16px;color:#4B5057;margin:0 0 24px}#ezd-fe .n-foot{border-top:1px solid #ECE9E2;padding:34px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;font-size:13.5px;color:#6A6F76;background:#FBFAF7}
@media(max-width:640px){.n-foot{grid-template-columns:1fr 1fr}}#ezd-fe .n-foot b{color:#0F1F3D;font-family:var(--disp);display:block;margin-bottom:6px}
/* ===== MOBILNEDBANTNING ===== */
/* Allt nedanför är mobilspecifikt. Inga regler utanför media queries,
så datorversionen är opåverkad. Ta bort hela blocket för att backa. */
@media(max-width:900px){
/* --- DÖLJ (de fem punkterna) --- */
/* 1. Mobilmorfen bevisar mobilanpassning för någon som redan sitter i mobilen */
#mobil{display:none}
/* 2. Offertbyggaren + öppna priskalkylen. .price står kvar */
#pris .pk-calc,
#pris .calcopen{display:none}
/* 2b. Driftpriser och garantier. Tillagt efter mätning — se not nedan. */
#pris .drift,
#pris .guards{display:none}
/* Driftpriserna fanns bara i .drift. En kompakt rad per prisruta
i stället, så månadskostnaden inte försvinner från mobilen. */
/* #pris inverterar paletten: .pbox är det mörka kortet, .pbox.hi det ljusa.
Färgerna speglar .plist li, som redan ligger rätt i båda. */
#pris .pbox .pdrift{display:block;margin:12px 0 0;padding-top:10px;
border-top:1px solid var(--line);font-size:13.5px;color:#9DA1A6}
#pris .pbox .pdrift b{color:#fff;font-weight:500}
#pris .pbox.hi .pdrift{border-top-color:var(--dline);color:var(--ink2)}
#pris .pbox.hi .pdrift b{color:var(--ink)}
/* 3. Timprisreglaget. Jämförelsetabellen .cmp står kvar */
#varfor .rate{display:none}
/* 4. Portfoliokorten göms inte längre — se KONCEPT I TVÅ SPALTER nedan.
Rubriken lovar "tre egna produkter, fyra koncept", och då ska sju
kort finnas där även i telefonen. */
/* 5. De två sista styckena i om-sektionens vänsterspalt.
Barnkombinatorn skyddar de
som ligger inuti .who-me. */
.about > .rv:not(.facts) > p:nth-last-of-type(-n+2){display:none}
/* --- SCROLLBANOR ---
#problem reserverar 250vh + 230vh enbart som körsträcka åt en
scrollstyrd animation. På mobil är det 4 000 px tomrum. Banan kortas
men behålls, så stegen tänds fortfarande i tur och ordning. */
.rb-grid{min-height:120vh}
.rb-steps{min-height:0;padding:0;gap:22px;justify-content:flex-start}
.hs-stick{padding:clamp(28px,5vw,44px) 0}
.hs-track{gap:22px}
/* De egna produkterna bar tva monoetiketter var. I en 350px spalt tar de
nastan lika stor plats som texten under. Pa mobil far styckena tala
for sig sjalva; ordningen — vad det ar, sedan varfor det angar dig —
framgar anda. */
.proj.real dt{display:none}
.proj.real dd + dd,
.proj.real dd:last-of-type{margin-top:9px}
/* Tio branschchips blev fem rader pa 390px — en vagg av piller innan man
kommer till adressfaltet. Tightare padding ger tre per rad utan att
tryckytan understiger 44px, som kommer fran min-height. */
.chips{gap:7px}
.chip{font-size:13.5px;padding:8px 13px}
/* Bildtexten under fore/efter-riggen hade 64px luft over sig och hamnade
ensam mitt i tomrummet pa en telefon. */
#ezd-fe .ezd-cap{margin-top:30px}
/* --- KONCEPT I TVÅ SPALTER ---
De tre egna produkterna är beviset och behåller full bredd. De fyra
koncepten är affischer i telefonen — de interaktiva ramarna är ändå
avstängda under 860px — och en affisch med bildtext klarar sig på
halva bredden. Alla sju får plats utan att sektionen växer. */
.hs-track{flex-direction:row;flex-wrap:wrap}
.hs-track .proj.real{flex:0 0 100%}
.hs-track .proj:not(.real){flex:0 0 calc(50% - 11px);min-width:0}
.proj:not(.real) .pane{aspect-ratio:16/12}
.proj:not(.real) h3{font-size:16.5px;margin:7px 0 7px}
.proj:not(.real) dl{font-size:13px;line-height:1.5}
/* Etiketterna Utmaning/Lösning och själva utmaningen ryms inte på halva
bredden. Lösningsraden beskriver det man ser på affischen och bär
kortet ensam. */
.proj:not(.real) dt,
.proj:not(.real) dd:first-of-type{display:none}
}
@media(max-width:760px){
/* --- LUFT --- */
.pad{padding:clamp(26px,5.5vw,40px) 0}
section.pad h2{font-size:clamp(25px,6.8vw,33px)}
.lede{font-size:16px;margin-top:12px}
.proc,.formwrap,.about{gap:22px}
body{line-height:1.5}
/* radavstånd och blockmarginaler, samma andel överallt */
.proc,.formwrap{margin-top:24px}
.cmp{margin-top:24px}
.cmp .row{padding:11px 0}
.pbox{padding:20px}
.plist li{padding:6px 0}
.drift{margin-top:12px}
details{padding:12px 0}
.faqcat{margin-top:22px}
.nolist{margin-top:24px}
.proc-steps li{padding:12px 0 12px 30px}
.proc-steps li::before{top:19px}
.proj .meta{padding:12px 4px 0}
.proj .pane{aspect-ratio:16/10}
.hs-head{margin-bottom:16px}
.who-me{margin-bottom:18px}
}
/* ============ FLIKAR, UNDERSIDOR OCH GENVÄGAR ============
Sajten är uppdelad på flera sidor i stället för en enda lång scroll.
Allt nedan hör till den uppdelningen. */
/* Aktiv flik i toppnavigationen */
nav a[aria-current="page"]{color:var(--ink);font-weight:500}
nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
/* Mobilflikar — toppnavigationen göms under 1040px, så flikarna
ligger som en scrollbar rad i stället. */
/* Flikarna foljer med sidan i stallet for att ligga kvar. Sidhuvudet ar
63 px och flikraden lika mycket — tillsammans at de 15 % av en
telefonskarm pa varje skarmbild man scrollade forbi. Sidhuvudet med
knappen racker som permanent kroms; flikarna behovs nar man kommer
till sidan, inte medan man laser. */
.tabs{display:none;position:relative;z-index:55;background:var(--bg);
border-bottom:1px solid var(--line)}
.tabs .in{display:flex;gap:7px;overflow-x:auto;padding:9px var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs .in::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
text-decoration:none;font-family:var(--disp);font-size:13.5px;font-weight:500;
letter-spacing:-.015em;color:var(--ink2);padding:0 15px;border-radius:100px;
box-shadow:inset 0 0 0 1px var(--line);background:var(--card);white-space:nowrap}
.tabs a[aria-current="page"]{background:var(--ink);color:#fff;box-shadow:none}
@media(max-width:1040px){.tabs{display:block}}
/* Prisgenväg på startsidan — hela prissektionen bor på /pris */
.teaser{background:var(--dark);color:#fff}
.teaser .mono{color:#8D9095}
.teaser h2{color:#fff}
.teaser .lede{color:rgba(255,255,255,.66)}
.tz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 26px}
.tz{border:1px solid var(--dline);border-radius:var(--r);padding:22px 20px;background:rgba(255,255,255,.03)}
.tz .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:#8D9095;display:block}
.tz .p{font-family:var(--disp);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.045em;margin:9px 0 6px}
.tz .p small{font-size:.44em;font-weight:400;color:#8D9095;letter-spacing:0}
.tz p{margin:0;font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.5}
.tz.hi{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
@media(max-width:820px){.tz-grid{grid-template-columns:1fr;gap:10px}}
.tz-note{font-size:14.5px;color:rgba(255,255,255,.55);margin:16px 0 0}
/* Kortlänkar till det som flyttat till egna sidor */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.more a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);padding:24px 22px;transition:transform .4s var(--e),border-color .4s var(--e)}
.more a:hover{transform:translateY(-3px);border-color:var(--line2)}
.more .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3)}
.more h3{font-size:20px;margin:11px 0 7px;letter-spacing:-.035em}
.more p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.5}
.more .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:500;font-family:var(--disp)}
@media(max-width:900px){.more{grid-template-columns:1fr}}
/* Sidhuvud på undersidorna */
.phead{padding:clamp(38px,5vw,68px) 0 0}
.crumb{display:inline-flex;gap:8px;text-decoration:none;color:var(--ink3);font-size:14px;margin-bottom:22px}
.crumb:hover{color:var(--ink)}
.phead h1{font-size:clamp(34px,5.4vw,62px);max-width:17ch;letter-spacing:-.045em}
/* Kortare scroll: de skrollstyrda sektionerna tar mindre höjd än förut.
Överskrivningarna ligger i min-width så att mobilblocket på 900px,
som nollar banorna helt, fortfarande vinner. */
@media(min-width:901px){
.rb-grid{min-height:145vh}
.rb-steps{min-height:132vh;padding:8vh 0 10vh}
.hs{height:128vh}
}
@media(max-width:900px){
.rb-grid{min-height:100vh}
/* En kolumn + klistrad scen = scenen lagger sig over stegtexten,
for stegen scrollar upp under den. Pa mobil star scenen still
ovanfor stegen i stallet. */
.rb-sticky{position:static}
.rb-steps{padding-top:26px}
}
/* Kategorirubrik i frågelistan — liten etikett, inte en display-rubrik */
.faqcat h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
color:var(--ink3);font-weight:400;max-width:none;margin:0 0 4px;padding-top:26px;border-top:1px solid var(--line)}
.faqcat:first-of-type h2{padding-top:0;border-top:0}
/* ============================================================
SHOWROOM — helskärmsvisare för mockupperna.
I kortet är sajten 560 px bred i skala 0,4. Det räcker för att
ana, inte för att övertyga. Visaren öppnar samma sida i nära
full storlek så att besökaren kan använda den på riktigt.
Mörk bakgrund med flit: den är den enda mörka ytan på sajten,
så den läser som ett eget rum snarare än som en sektion till.
============================================================ */
/* öppna-knappen i kortet */
.sr-open{position:absolute;z-index:8;top:10px;right:10px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
color:#fff;background:rgba(13,14,15,.74);backdrop-filter:blur(6px);
border:0;padding:7px 11px;border-radius:999px;cursor:pointer;
display:flex;align-items:center;gap:6px;
opacity:0;transform:translateY(-3px);transition:opacity .3s var(--e),transform .3s var(--e)}
.proj:hover .sr-open,.sr-open:focus-visible{opacity:1;transform:none}
.sr-open:hover{background:var(--ink)}
@media(hover:none){.sr-open{opacity:1;transform:none}}
/* ---- själva visaren ---- */
.sr{position:fixed;inset:0;z-index:300;display:none;
background:rgba(8,9,10,.94);backdrop-filter:blur(18px) saturate(.9);
opacity:0;transition:opacity .4s var(--e)}
.sr.open{display:grid;grid-template-rows:auto 1fr auto}
.sr.in{opacity:1}
body.sr-lock{overflow:hidden}
/* topprad */
.sr-top{display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:16px clamp(14px,3vw,30px);color:#fff}
.sr-id{display:flex;align-items:baseline;gap:12px;min-width:0}
.sr-id b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.02em;
white-space:nowrap}
.sr-id span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
color:rgba(255,255,255,.44);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* enhetsväxel */
.sr-dev{display:flex;background:rgba(255,255,255,.09);border-radius:999px;padding:3px}
.sr-dev button{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.55);background:0;border:0;padding:7px 14px;border-radius:999px;
cursor:pointer;transition:background .25s var(--e),color .25s var(--e)}
.sr-dev button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.sr-x{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.09);color:#fff;font-size:17px;line-height:1;
transition:background .25s var(--e)}
.sr-x:hover{background:rgba(255,255,255,.2)}
/* scenen */
.sr-stage{display:flex;align-items:center;justify-content:center;
padding:0 clamp(10px,3vw,30px);min-height:0}
.sr-frame{position:relative;background:#fff;overflow:hidden;
box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
transition:width .45s var(--e),height .45s var(--e),border-radius .45s var(--e)}
.sr-frame.desk{border-radius:10px}
.sr-frame.phone{border-radius:34px;border:9px solid #16181b;box-shadow:0 50px 90px -30px rgba(0,0,0,.85)}
.sr-frame iframe{border:0;display:block;transform-origin:top left;background:#fff}
/* laddindikator */
.sr-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink3);transition:opacity .4s var(--e)}
.sr-frame.ready .sr-wait{opacity:0;pointer-events:none}
/* bottenrad */
.sr-bot{display:flex;align-items:center;justify-content:center;gap:10px;
padding:14px clamp(14px,3vw,30px) 20px;flex-wrap:wrap}
.sr-nav{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
background:rgba(255,255,255,.09);color:#fff;font-size:15px;line-height:1;
transition:background .25s var(--e)}
.sr-nav:hover{background:rgba(255,255,255,.2)}
.sr-dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.sr-dots button{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
color:rgba(255,255,255,.42);background:0;border:0;padding:7px 11px;border-radius:999px;
cursor:pointer;white-space:nowrap;transition:background .25s var(--e),color .25s var(--e)}
.sr-dots button:hover{color:#fff;background:rgba(255,255,255,.08)}
.sr-dots button[aria-current="true"]{color:var(--ink);background:#fff}
.sr-hint{width:100%;text-align:center;font-family:var(--mono);font-size:9.5px;
letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.3)}
@media(max-width:760px){
.sr-id span,.sr-hint{display:none}
/* pilarna ska flankera namnraden, inte hamna ovanför och under den —
därför rullar raden i sidled i stället för att radbrytas */
.sr-bot{flex-wrap:nowrap}
.sr-dots{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.sr-dots::-webkit-scrollbar{display:none}
.sr-dots button{padding:6px 9px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
.sr,.sr-frame,.sr-wait{transition:none}
.sr-open{transition:none}
}
/* ============================================================
SIDBYTEN — View Transitions mellan dokument.
Sidhuvudet behåller sitt namn över navigeringen och står stilla
medan resten tonar över. Webbläsare utan stöd navigerar som vanligt.
============================================================ */
@view-transition{navigation:auto}
#hdr{view-transition-name:hdr}
::view-transition-old(root),::view-transition-new(root){
animation-duration:.28s;animation-timing-function:var(--e)}
::view-transition-old(hdr),::view-transition-new(hdr){animation:none}
@media(prefers-reduced-motion:reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.cluster.live{transform:none!important}
}
/* ============================================================
BYGGET — Nordvik-fönstret bygger sig självt vid sidladdning.
Fyra lager i den ordning en sida faktiskt blir till: struktur
(streckade platshållare på ett blåkopieark), färg (arket lyfts
och det mörka temat flödar in), text (skrivs fram), bild
(framkallas). Till sist skrivs adressen klart i ramen, och först
då släpps markör-berättelsen lös. 3,4 s, en gång, klick på ramen
spelar om. Utan .bygg står fönstret färdigt — JS kan inte lämna
det halvbyggt.
============================================================ */
.w1 .chrome{cursor:pointer}
.w1.spelar .site.live .stack,.w1.spelar .mockcursor,.w1.spelar .site.live .cta2,.w1.spelar .toast{
animation-play-state:running}
/* Fönstret ska synas från första bildrutan när det bygger sig — annars
spelas strukturstadiet upp medan fönstret ännu tonar in. Arket blir
ankomsten; w2 och w3 behåller sin intoning runt om. */
.w1.bygg{opacity:1;--s:1;transition:none}
/* blåkopiearket ligger ovanpå bakgrunden men under innehållet */
.w1.bygg .site{isolation:isolate}
.w1.bygg .site::before{content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(rgba(13,14,15,.055) 1px,transparent 1px) 0 0/100% 1.6em,
linear-gradient(90deg,rgba(13,14,15,.055) 1px,transparent 1px) 0 0/1.6em 100%,
#F7F7F4;
animation:ark .55s var(--e) .85s both}
@keyframes ark{to{opacity:0;visibility:hidden}}
/* varje byggsten: in som streckad platshållare, hålls, fylls sedan.
Strecken är neutralgrå med flit — de ska läsas både på det vita arket
och på det mörka temat som flödar in under dem.
100 %-nyckeln är tom med flit — då glider allt till elementets egna
värden, vilket är det enda sättet att "sluta som vanligt" i keyframes. */
@keyframes sten{
0%{opacity:0;transform:translateY(.45em);color:transparent;background-color:transparent;
outline:1px dashed rgba(128,134,140,.72);outline-offset:-1px;box-shadow:none}
14%,68%{opacity:1;transform:none;color:transparent;background-color:transparent;
outline:1px dashed rgba(128,134,140,.72);outline-offset:-1px;box-shadow:none}
100%{outline:1px dashed transparent;outline-offset:-1px}
}
.w1.bygg .site .lg,.w1.bygg .site .nv>span,.w1.bygg .site .mh4,.w1.bygg .site .sb,
.w1.bygg .site .cta2,.w1.bygg .site .mh5,.w1.bygg .site .cards div,.w1.bygg .site .rows u{
animation:sten var(--dur,1.6s) var(--e) var(--d,0s) both}
.w1.bygg .site .lg{--d:.05s;--dur:1.5s}
.w1.bygg .site .nv>span:nth-child(1){--d:.14s;--dur:1.55s}
.w1.bygg .site .nv>span:nth-child(2){--d:.19s;--dur:1.55s}
.w1.bygg .site .nv>span:nth-child(3){--d:.24s;--dur:1.55s}
.w1.bygg .site .nv>span:nth-child(4){--d:.3s;--dur:1.6s}
.w1.bygg .site .mh4{--d:.2s;--dur:1.5s}
.w1.bygg .site .sb{--d:.32s;--dur:1.75s}
.w1.bygg .site .cta2{--d:.42s;--dur:1.85s}
.w1.bygg .site .mh5{--d:.55s;--dur:1.9s}
.w1.bygg .site .cards div{--d:.62s;--dur:1.95s}
.w1.bygg .site .rows u{--d:.7s;--dur:2s}
/* skelettraderna är redan grå streck — de ska bara dyka upp, inte ramas in */
.w1.bygg .site .rows u{animation-name:stenEnkel}
@keyframes stenEnkel{0%{opacity:0;transform:translateY(.45em)}14%{transform:none}100%{}}
/* rubriken skrivs fram vänster → höger när den fylls. forwards, inte both:
both skulle klippa bort platshållaren redan under fördröjningen, och
den största byggstenen saknades då i hela blåkopiestadiet. */
.w1.bygg .site .mh4{animation:sten 1.5s var(--e) .2s both,skriv .7s var(--e) 1.45s forwards}
.w1.bygg .site .sb{animation:sten 1.75s var(--e) .32s both,skriv .6s var(--e) 1.78s forwards}
@keyframes skriv{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
/* fotot: platshållare → framkallas ur oskärpa */
.w1.bygg .site .shot{animation:sten 1.9s var(--e) .5s both}
.w1.bygg .site .shot i{animation:kb 26s ease-in-out infinite alternate,framkalla 1s var(--e) 2.3s both}
@keyframes framkalla{0%{opacity:0;filter:blur(18px) grayscale(1) brightness(1.25)}
40%{opacity:1}100%{opacity:1;filter:blur(0) grayscale(0) brightness(1)}}
/* adressen i ramen skrivs klart sist — det är signalen att sidan är uppe */
.w1.bygg .chrome span{animation:skriv .5s steps(14,end) 3.05s both}
@media(prefers-reduced-motion:reduce){
.w1.bygg .site::before{display:none}
.w1.bygg .site *{animation:none!important;clip-path:none!important;outline:0!important}
.w1.bygg .chrome span{animation:none!important;clip-path:none!important}
}
/* ================= BYGGPLATSEN — rörelser på förstasidan =================
Löpbandet reagerar på scrollfarten, en markörring berättar vad som går
att göra, korten lutar sig efter handen och sektionsnumren glider i
egen takt. Hjälten har ett eget block längre ner (NATTEN). Inga
bibliotek. Allt som inte svarar på besökarens egen hand stängs av under
reduced-motion. */
/* 4. Löpbandet skevar och drar iväg med scrollfarten. Skevningen ligger på
varje ord, inte på bandet — annars skulle bandets hörn lämna sidkanten. */
.band li{transform:skewX(var(--sk,0deg))}
.band ul{translate:var(--sh,0px) 0}
/* 5. Markörringen. Difference-blandning gör den vit på mörkt och mörk på
ljust utan att veta vilken sektion den är över. */
.cur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:999px;
border:1.5px solid #fff;mix-blend-mode:difference;opacity:0;
transform:translate3d(var(--x,-100px),var(--y,-100px),0) scale(var(--k,1));
transition:opacity .3s var(--e),width .35s var(--e),height .35s var(--e),margin .35s var(--e),background-color .35s var(--e),transform .08s linear}
.cur.syns{opacity:1}
.cur span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:#000;white-space:nowrap;opacity:0;transition:opacity .2s var(--e)}
.cur.ord{width:86px;height:86px;margin:-43px 0 0 -43px;background:#fff}
.cur.ord span{opacity:1}
.cur.prick{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#fff}
.cur.lank{width:46px;height:46px;margin:-23px 0 0 -23px}
.cur.ner{--k:.82}
/* 6. Korten i arbetssektionen lutar sig efter handen */
.proj .fr{--tx:0deg;--ty:0deg;--ly:0px;transform:perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--ly));
transition:transform .6s var(--e),box-shadow .6s var(--e)}
.proj:hover .fr{--ly:-8px;box-shadow:0 2px 3px rgba(13,14,15,.05),0 54px 84px -44px rgba(13,14,15,.62),inset 0 0 0 1px rgba(13,14,15,.07)}
.proj .fr.lutar{transition:transform .14s linear,box-shadow .6s var(--e)}
/* 7. Sektionsnumren i marginalen glider i egen takt medan sektionen passerar */
@supports (animation-timeline:view()){
section[data-sec] .sheet::before{animation:glid linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes glid{from{translate:0 90px}to{translate:0 -170px}}
@media(max-width:1400px){section[data-sec] .sheet::before{animation:none}}
}
@media(prefers-reduced-motion:reduce){
.cur{display:none}
section[data-sec] .sheet::before{animation:none}
.band li{transform:none}.band ul{translate:none}
.proj .fr,.proj .fr.lutar{transition:none}
}
/* ================= NATTEN — den mörka hjälten =================
Förstasidan öppnar i mörker. Ett punktfält ligger bakom allt och viker
sig för handen; bokstäverna reser sig ur baslinjen en i taget och
flyr sedan svagt från markören; de tre fönstren svävar i verkligt djup.
När man scrollar flyger kameran framåt: de främre fönstren passerar och
försvinner, Nordvik växer tills det fyller bilden, och sedan tonar
allt till svart precis där Problemet-sektionen tar vid med samma sida.
Flygningen kräver bredd och höjd (>900 × 620) och ingen reduced-motion;
annars är hjälten en vanlig mörk sektion med samma typografi. */
.hero.natt{background:var(--dark);color:#fff;padding:0;overflow:visible}
.natt .hero-stick{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
min-height:calc(100vh - var(--hdr-h));padding:clamp(22px,3vw,40px) 0 clamp(30px,4vw,52px)}
.hero.natt.flyg{height:260vh}
.natt.flyg .hero-stick{position:sticky;top:var(--hdr-h);height:calc(100vh - var(--hdr-h));min-height:0}
.natt .falt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.natt>.hero-stick>.wide{position:relative;z-index:1;width:100%}
.natt h1.mega{color:#fff;font-size:clamp(36px,5.9vw,100px)}
.natt .hero-sub{color:#B5B9BE}
.natt .hero-copy .hero-sub b{color:#fff}
.natt .cta-note{color:#8A8E92}
.natt .btn:not(.ghost){background:#fff;color:var(--ink)}
.natt .btn:not(.ghost):hover{box-shadow:0 16px 30px -18px rgba(255,255,255,.5)}
.natt .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.natt .btn.ghost:hover{box-shadow:inset 0 0 0 1px #fff}
.natt .cluster{height:clamp(240px,min(29vw,100vh - 480px),440px)}
@media(max-width:1180px){.natt .cluster{height:auto;aspect-ratio:1.85/1}}
@media(max-width:640px){.natt .cluster{height:auto;aspect-ratio:16/11}}
.natt .win{box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1);will-change:transform,opacity}
/* svävningen ligger på translate och krockar inte med transform */
.loaded .natt .win{animation:svava var(--fd,7s) ease-in-out infinite alternate}
.natt .w1{--fd:7.5s}.natt .w2{--fd:9s;animation-delay:-3s}.natt .w3{--fd:6s;animation-delay:-1.5s}
@keyframes svava{from{translate:0 -4px}to{translate:0 6px}}
.cluster.flyg .win{transition:opacity .35s var(--e)}
.cluster.flyg{transition:none}
/* bokstäverna: reser sig ur baslinjen, en i taget, och flyr sedan handen */
.natt .ln{overflow:visible;perspective:700px}
.natt .ln i{transform:none;transition:none}
.bok{display:inline-block;white-space:pre;transform-origin:50% 100%;opacity:0}
.loaded .mega .bok{animation:res 1.1s var(--e) var(--d,0s) both}
@keyframes res{from{opacity:0;transform:translateY(.35em) rotateX(-70deg)}to{opacity:1;transform:none}}
/* när alla rest sig tar handen över: animationen släpps, flykten ligger i variabler */
.loaded .klar .bok{animation:none;opacity:1;transform:translate3d(var(--kx,0px),var(--ky,0px),0);transition:transform .55s cubic-bezier(.2,1.3,.3,1)}
.natt .rot{overflow:visible}
.natt .rot span{-webkit-text-stroke-color:#fff}
.natt .rot span.on{color:#fff}
/* scrollhinten, bara när flygningen finns */
.hint{position:absolute;left:50%;bottom:20px;translate:-50% 0;z-index:2;display:none;flex-direction:column;align-items:center;gap:9px;
font-size:12px;letter-spacing:.02em;color:#8A8E92;opacity:0;transition:opacity 1s var(--e) 2.6s}
.flyg .hint{display:flex}
.loaded .hint{opacity:1}
.hero.ivag .hint{opacity:0;transition-delay:0s}
.hint i{width:1px;height:40px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:ned 1.9s var(--e) infinite}
@keyframes ned{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* sidhuvudet och flikraden går mörka över mörka sektioner */
header{transition:border-color .35s,background .35s}
header.morkt{background:rgba(13,14,15,.72);border-bottom-color:rgba(255,255,255,.1)}
header.morkt .brand{color:#fff}
header.morkt .blip{background:#fff}
header.morkt nav a{color:#B5B9BE}
header.morkt nav a:hover{color:#fff}
header.morkt nav a::after{background:#fff}
header.morkt .btn.sm{background:#fff;color:var(--ink)}
.natt-sida .tabs{background:var(--dark);border-bottom-color:rgba(255,255,255,.1)}
.natt-sida .tabs a{color:#B5B9BE;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.natt-sida .tabs a[aria-current="page"]{background:#fff;color:var(--ink)}
.band{border-top:1px solid var(--dline);border-bottom:1px solid var(--dline)}
@media(prefers-reduced-motion:reduce){
.bok,.loaded .bok,.loaded .klar .bok{opacity:1;transform:none;animation:none;transition:none}
.loaded .natt .win{animation:none}
.hint{display:none}
}
/* ================= HELA VÄGEN NER =================
Varje sektion har sitt eget ögonblick, i samma språk som hjälten.
Problemet: scenen lutar med scrollfarten och sveps av ljus vid varje
steg. Bransch och Före/efter: fönstren vänder sig i 3D när innehållet
byts. Arbete: korten får djup längs spåret. Pris: en ljuskant följer
handen över korten och siffrorna rullar fram. Läs vidare: en
förhandsvisning av sidan följer handen över länken. Kontakt: natten
återvänder med punktfältet, och sidfoten bär namnet i jätteformat med
bokstäver som reser sig. Rubrikerna i de mörka sektionerna reser sig
ord för ord. */
/* rubriker som reser sig ord för ord */
.ordb{display:inline-block;opacity:0;transform-origin:50% 100%}
h2.syns .ordb{animation:res 1s var(--e) var(--d,0s) both}
h2.ordh{perspective:600px}
/* Problemet */
.rb-sticky{perspective:1400px}
.stage{position:relative;transform:rotateX(var(--vx,0deg));transition:transform .5s var(--e)}
.stage::after{content:"";position:absolute;left:0;right:0;top:-24%;height:20%;z-index:9;pointer-events:none;opacity:0;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 50%,transparent)}
.stage.svep::after{animation:svep .8s cubic-bezier(.4,0,.2,1)}
@keyframes svep{0%{top:-24%;opacity:1}100%{top:112%;opacity:1}}
/* fönster som vänder sig */
.demo-wrap,.ezd-screen{perspective:1400px}
.vand{animation:vand .64s cubic-bezier(.65,0,.35,1)}
@keyframes vand{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(-74deg) scale(.95)}100%{transform:rotateY(0) scale(1)}}
/* Arbete: djup längs spåret */
.proj{--dj:1;--do:1;transform:scale(var(--dj));opacity:var(--do)}
/* Pris */
.tz{position:relative}
.tz::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s var(--e);
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.95),rgba(255,255,255,.14) 45%,transparent 72%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.tz::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--e);
background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 62%)}
.tz-grid.lys .tz::before,.tz-grid.lys .tz::after{opacity:1}
.tz .p{line-height:1;font-variant-numeric:tabular-nums}
.sif{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.sif .rull{display:block;transform:translateY(0);transition:transform 1.6s cubic-bezier(.2,.9,.2,1) var(--d,0s)}
.syns .sif .rull{transform:translateY(calc(var(--n,0) * -1em))}
.sif .rull b{display:block;height:1em;line-height:1;font-weight:inherit}
/* Läs vidare: förhandsvisning som följer handen */
.peek{position:fixed;left:0;top:0;z-index:70;width:300px;pointer-events:none;transform:translate3d(var(--x,-999px),var(--y,-999px),0)}
.peek .in{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 34px 70px -24px rgba(13,14,15,.5),0 0 0 1px rgba(13,14,15,.08);
opacity:0;transform:rotate(var(--r,0deg)) scale(.82) translateY(10px);transition:opacity .28s var(--e),transform .5s var(--e)}
.peek.syns .in{opacity:1;transform:rotate(var(--r,0deg)) scale(1) translateY(0)}
.peek .in .chrome{padding:7px 10px}
.peek img{display:block;width:100%;aspect-ratio:1200/750;object-fit:cover}
.more a{position:relative}
/* Kontakt: natten återvänder */
#kontakta.natt2{background:var(--dark);color:#fff;position:relative;overflow:hidden}
#kontakta.natt2 .falt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#kontakta.natt2 .sheet{position:relative;z-index:1}
#kontakta.natt2 h2{color:#fff}
#kontakta.natt2 .lede{color:#9DA1A6}
#kontakta.natt2 .mono{color:#8D9095}
#kontakta.natt2 .sheet::before{color:#fff}
#kontakta.natt2 .fform{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);backdrop-filter:blur(6px)}
#kontakta.natt2 .fld2 span{color:#8D9095}
#kontakta.natt2 .fld2 input,#kontakta.natt2 .fld2 textarea,#kontakta.natt2 .fld2 select{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color-scheme:dark}
#kontakta.natt2 .fld2 input::placeholder,#kontakta.natt2 .fld2 textarea::placeholder{color:rgba(255,255,255,.35)}
#kontakta.natt2 .fld2 input:focus,#kontakta.natt2 .fld2 textarea:focus,#kontakta.natt2 .fld2 select:focus{box-shadow:inset 0 0 0 1.5px #fff}
#kontakta.natt2 .btn{background:#fff;color:var(--ink)}
#kontakta.natt2 .fine{color:#8A8E92}
#kontakta.natt2 .fside .lead{color:#fff}
#kontakta.natt2 .fside li{border-color:rgba(255,255,255,.1);color:#B5B9BE}
#kontakta.natt2 .fside li b{background:#fff;color:var(--ink)}
#kontakta.natt2 .fside .alt{border-color:rgba(255,255,255,.1);color:#B5B9BE}
#kontakta.natt2 .fside .alt a{color:#fff}
/* Sidfoten: namnet i jätteformat */
.jatte{font-family:var(--disp);font-weight:600;font-size:clamp(64px,16.6vw,292px);line-height:.84;letter-spacing:-.06em;color:#fff;
padding:clamp(36px,6vw,88px) 0 clamp(26px,4vw,56px);white-space:nowrap;overflow:hidden;perspective:900px;user-select:none;
-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35))}
.jatte .bok{opacity:0}
.jatte.syns .bok{animation:res 1.2s var(--e) var(--d,0s) both}
@media(prefers-reduced-motion:reduce){
.ordb,h2.syns .ordb,.jatte .bok,.jatte.syns .bok{opacity:1;animation:none}
.stage{transform:none}.vand{animation:none}
.proj{transform:none;opacity:1}
.sif .rull{transition:none}
.peek{display:none}
}
/* ================= MATERIAL =================
Ingen accentfärg. Sidan är svart, benvitt och grått; fotografierna står
för färgen. Mörkret har en svag vinjett och ett filmkorn ligger över
hela sidan. Mörka och ljusa sektioner glider in över varandra som ark.
Punktfältet och koboltaccenten är borttagna: de lästes som mall. */
/* mörker med rymd: en svag vinjett, inget mer */
.hero.natt,.rebuild,.teaser,#kontakta.natt2,footer{background:radial-gradient(120% 90% at 50% 0%,var(--dark2) 0%,var(--dark) 60%)}
.band{background:var(--dark)}
.rebuild,.teaser,footer{position:relative}
.teaser .sheet,footer .sheet{position:relative;z-index:1}
/* filmkorn över hela sidan */
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:220px 220px}
/* sömmarna: sektioner glider in över varandra som ark */
.ark{position:relative;z-index:2;border-radius:clamp(18px,3vw,36px) clamp(18px,3vw,36px) 0 0;margin-top:calc(-1 * clamp(18px,3vw,36px))}
.band{padding:30px 0 calc(30px + clamp(18px,3vw,36px))}
#bransch.ark{background:var(--bg)}
#las-vidare.ark{background:var(--bg)}
/* etiketterna i versaler är borta; rubrikerna bär sig själva */
h2.lit{font-size:clamp(26px,3vw,40px)!important;max-width:none;margin-bottom:0}
.proj .tg,.proj dt,.tz .k,.more .k,.fld2 span,.fcol h3,.rb-step .k,.rb-label,.ezd-badge,.mocktag,.demo-veil span,.cfg-note,.foot-bot .legal2{font-family:var(--body);text-transform:none;letter-spacing:0}
.proj .tg,.more .k,.tz .k{font-size:13px}
.proj dt,.fld2 span,.fcol h3{font-size:12.5px;letter-spacing:.01em}
.rb-step .k{font-size:13px;opacity:.6}
.rb-label{font-size:12px}
.ezd-badge,.mocktag{font-size:11.5px;font-weight:500}
.demo-veil span{font-size:13px}
/* Bandet ligger numera i ett mörkt stråk. Masken på hela bandet tonade
även bakgrunden, så den ljusa sidan lyste igenom i kanterna. Nu tonar
två täckande kanter i bandets egen färg i stället. */
.band{-webkit-mask-image:none;mask-image:none;position:relative}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
.band::before{left:0;background:linear-gradient(90deg,var(--dark),rgba(13,14,15,0))}
.band::after{right:0;background:linear-gradient(270deg,var(--dark),rgba(13,14,15,0))}
/* ================= PAPPER OCH BLÄCK =================
Texten i de mörka sektionerna är papper, inte vitt. De tre vita
knapparna i mörkret likaså. Kundfönstren i Arbete bär var sitt
varumärkes färg: en hårfin kant överst och etiketten. Det är kundens
färg, inte studions. En enda materialfärg, dammigt grön som en målad
vägg, på två ställen: det markerade priskortet och den valda chipen. */
.natt h1.mega,.rb-intro h2,.teaser h2,#kontakta.natt2 h2,.jatte,.foot-brand .lg,.rb-step h3,#kontakta.natt2 .fside .lead,
.band li,.final h2,.fcol .big,.fcol a:hover,.foot-bot .top:hover,.rb-label b{color:var(--pap)}
.natt .btn:not(.ghost),header.morkt .btn.sm,#kontakta.natt2 .btn,.natt-sida .tabs a[aria-current="page"],.btn.inv{background:var(--pap);color:var(--ink)}
.natt .hero-sub,.rb-intro .lede,#kontakta.natt2 .lede,.teaser .lede{color:#B3AEA5}
.natt .hero-copy .hero-sub b{color:var(--pap)}
.tz{background:rgba(244,242,238,.035)}
.cur{border-color:var(--pap)}.cur.ord,.cur.prick{background:var(--pap)}
.hint i{background:linear-gradient(var(--pap),rgba(243,240,234,0))}
#kontakta.natt2 .fside li b{background:var(--pap);color:var(--ink)}
/* kundfönstren bär färgen */
.proj .fr{position:relative}
.proj .fr::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand,var(--ink));z-index:9}
.proj .tg{color:var(--brand,var(--ink3))}
.proj .tg::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand,var(--ink3));margin-right:8px;vertical-align:1px}
/* materialfärgen */
.tz.hi{background:var(--moss);border-color:var(--moss)}
.tz.hi .k,.tz.hi p,.tz.hi .p small{color:rgba(255,255,255,.76)}
.tz.hi .p{color:#fff}
.tz.hi::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 62%)}
.chip[aria-pressed="true"]{background:var(--moss);color:#fff}
/* ================= TELEFONEN =================
Samma omsorg i handen som på skärmen. Sidhuvudet går mörkt redan när
flikraden ligger över en mörk sektion. Hjälten håller ihop: kortare
avstånd mellan texten och fönstren. Stegen i Problemet står i full
styrka, för scenen är inte klistrad på telefon och dämpningen hade
ingen mening. Loggen i Din bransch tar ingen plats förrän den körs.
De sista versala monospace-etiketterna är satta i brödtext. */
@media(max-width:900px){
.natt .hero-grid{gap:26px}
.natt .hero-stick{padding-bottom:36px}
.rb-step{opacity:1}
.rb-step .k{opacity:.7}
.log:not(:has(.on)){display:none}
}
@media(max-width:1000px){.log{margin-top:14px;min-height:0}}
#ezd-fe .ezd-cap,#ezd-fe .ezd-hint{font-family:var(--body);text-transform:none;letter-spacing:0}
#ezd-fe .ezd-cap{font-size:13.5px}
#ezd-fe .ezd-hint{font-size:12.5px}
.sr-open{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;padding:7px 12px}