main .template
{display: grid;
grid-template-areas: 
'nth-01' 'nth-02' 'nth-03' 'nth-04' 'nth-05' 'nth-06' 'nth-07' 'nth-08' 'nth-09' 'nth-10'
}

main{
--filter-glass-effect:saturate(180%) blur(20px);
--nav-canvas-rgba:rgba(245,245,247,.8)
}


main .template > section,main .template > div{
justify-self:center
}

.grd-start{
display:grid;
justify-self:unset!important;
width:100dvw;
overflow-x:hidden
}

button,button a,a:-webkit-any-link{
font-family:'Poppins',sans-serif;
letter-spacing:-.022em;
font-size:15px;
line-height:1;
color:var(--rtm-accent)
}

a:-webkit-any-link:visited{
color:var(--rtm-accent)
}

*{
box-sizing:border-box
}

.flx,main{
overflow-x:hidden
}

.flx{
flex-direction:column
}

@media screen and (min-width:1px){
[role="portal"]{
--irw:min(100dvw,692px)
}
}

@media screen and (min-width:768px){
[role="portal"]{
--irw:728px
}
}

@media screen and (min-width:1068px){
[role="portal"]{
--irw:min(100dvw,2560px)
}
}

[role="portal"]{
width:var(--irw);
height:auto;
padding-block:0 80px;
display:grid
}

@media screen and (max-width:1068px){
[role="portal"]{
padding-block:0 22px
}
}

[role="portal"]>div{
justify-self:center
}


.frontface>.btn{
grid-area:frontface
}

.btn{
display:grid;
position:relative;
isolation:isolate
}

.btn>div{
grid-area:btn;
display:grid;
position:relative
}

.btn>div:nth-of-type(1){
z-index:99
}

.has-logo>.btn{
width:38px;
height:38px;
overflow:hidden
}

.has-logo>.btn span{
padding-block-start:6px
}



[role="portal"] .imagebox{grid-template-areas:'gta'}
[role="portal"] .imagebox>div{grid-template-areas:'nth'}
@media screen and (min-width:1068px) {
[role="portal"] .header{grid-template-areas:'gta'}}
.role-train-module .rtm-car{grid-template-areas:'wgn'}
.assist-form{grid-template-areas:'assist-form'}

.has-banner::before,.has-banner::after{content:"";position:absolute;inset:0;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;z-index:-10}body,html,main,section{font-family:'Poppins',sans-serif;margin:0;padding:0;height:100%;touch-action:manipulation;overscroll-behavior:none;-webkit-font-smoothing:antialiased}[role="portal"]:nth-of-type(1){padding-block-start:90px}


/* header */

[role="portal"] .header{display:grid;width:100%}@media screen and (min-width:1px){[role="portal"] .header>.container{--arw:280px}}@media screen and (min-width:390px){[role="portal"] .header>.container{--arw:360px}}@media screen and (min-width:410px){[role="portal"] .header>.container{--arw:390px}}@media screen and (min-width:480px){[role="portal"] .header>.container{--arw:450px}}@media screen and (min-width:768px){[role="portal"] .header>.container{--arw:718px}}@media screen and (min-width:1068px){[role="portal"] .header>.container{--arw:1018px}}[role="portal"] .header>.container{width:var(--arw);justify-self:center}[role="portal"] .header>.container h1{font-size:calc(var(--arw) * .0775);letter-spacing:-.022em;line-height:1.199;text-align:center}[role="portal"] .header>.container p{text-align:center;line-height:1.3;letter-spacing:-.004em;margin:0;padding-block:22px 50px}@media screen and (max-width:9999px){[role="portal"] .header>.container p{font-size:calc(var(--arw) * .0228)}}@media screen and (max-width:767px){[role="portal"] .header>.container p{font-size:calc(var(--arw) * .0428)}}
@media screen and (min-width:1068px){
[role="portal"] .header{
justify-self:center;
}
[role="portal"] >.header div{
grid-area:gta;
display:grid
}

}

[role="portal"] .header>.container h2{
font-size:calc(var(--arw) * .0775);
letter-spacing:-.022em;
line-height:1.199;
text-align:center
}

[role="portal"] .imagebox{overflow:hidden}@media screen and (min-width:450px){[role="portal"] .imagebox{border-radius:23px}}[role="portal"] .imagebox{--arw:min(100dvw,550px);--arh:calc((var(--arw) * 1.712))}[role="portal"] .imagebox{width:var(--arw);height:var(--arh)}[role="portal"] .imagebox,[role="portal"] .imagebox *{display:grid;position:relative}[role="portal"] .imagebox>div>div{grid-area:nth}[role="portal"] .imagebox>div{grid-area:gta}[role="portal"] .imagebox .textlager{z-index:10;color:#fff;width:calc(var(--arw) * .88);justify-self:center;align-self:end;text-align:center;margin-block-end:calc(var(--arh) * .18)}@media screen and (max-width:480px) and (orientation:portrait){[role="portal"] .imagebox .textlager{margin-block-end:calc(var(--arh) * .13)}}[role="portal"] .imagebox .textlager h3{font-size:calc(var(--arw) * .05);font-weight:600;letter-spacing:-.018em;line-height:1.119}@media screen and (min-width:450px) and (orientation:landscape){[role="portal"] .imagebox{--arw:min(71dvw,980px);--arh:calc((var(--arw) * .75))}[role="portal"] .imagebox .landscape .svglager{mask-image:url(../svg/svg-overlay/imagebox_landscape.svg);mask-position:bottom center;mask-repeat:no-repeat;mask-size:100% auto;background:#000}[role="portal"] .imagebox .textlager{width:calc(var(--arw) * .66);margin-block-end:calc(var(--arh) * .07)}[role="portal"] .imagebox .textlager h3{font-size:calc(var(--arw) * .033);letter-spacing:-.018em;line-height:1.119}}@media screen and (min-width:450px) and (orientation:landscape){[role="portal"] .imagebox>div:nth-of-type(2){display:none;visibility:hidden;grid-template-rows:0}}[role="portal"] .imagebox .bildlager{z-index:1}[role="portal"] .imagebox .svglager{z-index:2}[role="portal"] .imagebox .bildlager{width:calc(calc(100% / 3) - 4px);background:#fff}[role="portal"] .imagebox>div .bildlager:nth-of-type(2),[role="portal"] .imagebox>div .bildlager:nth-of-type(3),[role="portal"] .imagebox>div .bildlager:nth-of-type(4){height:65.5%}@media screen and (orientation: landscape){[role="portal"] .imagebox>div .bildlager:nth-of-type(2),[role="portal"] .imagebox>div .bildlager:nth-of-type(3),[role="portal"] .imagebox>div .bildlager:nth-of-type(4){height:73.5%}}@media screen and (orientation: portrait) and (min-width:481px) and (max-width:1440px){[role="portal"] .imagebox>div .bildlager:nth-of-type(2),[role="portal"] .imagebox>div .bildlager:nth-of-type(3),[role="portal"] .imagebox>div .bildlager:nth-of-type(4){height:58%}}[role="portal"] .imagebox>div .bildlager:nth-of-type(2){justify-self:start}[role="portal"] .imagebox>div .bildlager:nth-of-type(3){justify-self:center}[role="portal"] .imagebox>div .bildlager:nth-of-type(4){justify-self:end}[role="portal"] .imagebox picture,[role="portal"] .imagebox img,[role="portal"] .imagebox source{width:100%;height:100%;object-fit:cover;display:block;position:absolute}[role="portal"] .imagebox .portrait .svglager,[role="portal"] .imagebox .tablet .svglager{mask-position:bottom center;mask-repeat:no-repeat;mask-size:100% auto;background:#000;mask-image:url(../svg/svg-overlay/imagebox-portrait.svg)}@media screen and (min-width:480px) and (orientation: portrait){[role="portal"] .imagebox{--arw:min(100dvw,550px);--arh:calc((var(--arw) * 1.333))}}[role="portal"] .imagebox>.portrait{display:none}[role="portal"] .imagebox>.tablet{display:none}[role="portal"] .imagebox>.landscape{display:none}@media screen and (max-width:480px) and (orientation: portrait){[role="portal"] .imagebox>.portrait{display:grid}}@media screen and (min-width:481px) and (max-width:1440px) and (orientation: portrait){[role="portal"] .imagebox>.tablet{display:grid}}@media screen and (min-width:550px) and (orientation: landscape){[role="portal"] .imagebox>.landscape{display:grid}}

/* long-description */
@media screen and (min-width: 1px){[role="portal"] .long-description{--arw:280px;width:var(--arw);text-align:center;padding-block-start:calc(var(--arw) * .0188)}[role="portal"] .long-description p{font-size:max(calc(var(--arw) * .0388),15px)}}@media screen and (min-width: 390px){[role="portal"] .long-description{--arw:360px}}@media screen and (min-width: 410px){[role="portal"] .long-description{--arw:390px}[role="portal"] .long-description p{font-size:max(calc(var(--arw) * .0288),16px)}}@media screen and (min-width: 480px){[role="portal"] .long-description{--arw:450px}}@media screen and (min-width: 768px){[role="portal"] .long-description{--arw:718px}[role="portal"] .long-description p{font-size:max(calc(var(--arw) * .02),17px)}}@media screen and (min-width: 1068px){[role="portal"] .long-description{--arw:780px}}




[role="portal"]>.display-x4{display:grid;height:fit-content;--arw:min(100dvw,480px);width:var(--arw)}[role="portal"]>.display-x4,[role="portal"]>.display-x4>div,[role="portal"]>.display-x4>div>div{display:grid}[role="portal"]>.display-x4 .container{grid-template-columns:100%;grid-template-rows:repeat(4,auto);row-gap:6px}[role="portal"]>.display-x4 .container>div{width:100%;min-height:calc(var(--arw) * 1.33);background:#ffd700;position:relative}[role="portal"] .display-x4 picture,[role="portal"] .display-x4 img,[role="portal"] .display-x4 source{width:100%;height:100%;object-fit:cover;display:block!important;position:absolute}@media screen and (min-width:390px){[role="portal"]>.display-x4 .container{grid-template-columns:repeat(2,1fr);row-gap:0;gap:4px;grid-template-rows:repeat(2,auto)}[role="portal"]>.display-x4 .container>div{width:100%;min-height:calc(calc(var(--arw) / 2) * 1.33);background:#add8e6}}


[role="portal"]>.display-quote
{display: grid;
--ivv:min(88dvw, 550px);
--ivh:calc((var(--ivv) * .627));
width: var(--ivv);
height: var(--ivh);
background: white;
position: relative;
margin-block: 90px;}

[role="portal"]>.display-systembolaget::before
{background-image: url(../media/client-quotes/sparver/sparver.svg);
z-index: 1;}

[role="portal"]>.display-quote.display-nwg::before
{background-image: url(../media/client-quotes/nwg/nwg_quote_1024.svg);
z-index: 1;}

[role="portal"]>.display-quote.display-bars-peacock::before {
    background-image: url(../media/display-svg/style-1/svg3-peacock-1024x642.svg);
    z-index: 1;
}

[role="portal"]>.display-quote.display-projob::before {
    background-image: url(../media/client-quotes/projob/projob_quote_1024.svg);
    z-index: 1;
}

[role="portal"]>.display-quote.display-bars-citrus::before {
    background-image: url(../media/display-svg/style-1/svg3-citrus-1024x642.svg);
    z-index: 1;
}



section[role="pricing-table"]{width:min(88dvw,430px);display:grid;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden;margin-block:80px;height:fit-content;justify-self:center}section[role="pricing-table"] .pt-header{display:grid;grid-template-columns:1fr auto;padding:14px 16px;background:#3a3a3a;color:#fff;font-size:13px}section[role="pricing-table"] select{border-radius:8px;border:none;padding:4px 8px;font-size:12px}section[role="pricing-table"] .pt-row{display:grid;grid-template-columns:1fr auto;padding:12px 16px;font-size:13px}@media screen and (max-width:374px){section[role="pricing-table"] .pt-row{display:grid;grid-template-columns:1fr auto;padding:8px 10px;font-size:12px;letter-spacing:-.022em}}section[role="pricing-table"] .pt-row:nth-child(even){background:#f7f7f7}section[role="pricing-table"] .pt-price{font-weight:600;color:#0071e3}section[role="pricing-table"] .pt-row--emphasis .pt-price{color:#0071e3}



.role-train-module{--rtm-gap:12px;--rtm-car-w:320px;--rtm-car-h:550px;--rtm-radius:20px;--rtm-accent:#007aff;--rtm-arw:320px;font-family:inherit;box-sizing:border-box;display:grid}.role-train-module,.role-train-module *{box-sizing:inherit}.role-train-module{padding-block:60px 80px}.role-train-module .rtm-viewport{padding:20px 16px;background:transparent}@media screen and (min-width:1200px){.role-train-module .rtm-viewport{padding:0 calc(50% - min(1260px,87.5%) /2)}}.role-train-module .rtm-header{width:min(88dvw,477px);margin-inline-start:min(6dvw,50px)}.role-train-module .rtm-header h3{font-size:22px;font-weight:600;line-height:1.333}.role-train-module .rtm-header .mobile-break{display:contents}@media screen and (max-width:480px){.role-train-module .rtm-header .mobile-break{display:block}}.role-train-module .rtm-header p{margin:0 0 12px;color:#555;font-size:14px}.role-train-module .rtm-train-outer{position:relative;overflow-x:scroll}@media screen and (min-width:1px){.role-train-module .rtm-train-outer{width:min(100dvw,1670px)}}.role-train-module .rtm-train{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rtm-car-w);gap:var(--rtm-gap);height:var(--rtm-car-h);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:12px 12px 90px;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.role-train-module .rtm-train::-webkit-scrollbar{height:0}.role-train-module .rtm-train::-webkit-scrollbar-thumb{background:rgba(0,0,0,0);border-radius:999px}.role-train-module .rtm-car{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;background:#fff;border-radius:var(--rtm-radius);box-shadow:0 6px 18px rgba(0,0,0,0.06);overflow:hidden;scroll-snap-align:center;container-type:inline-size;container-name:wgn}.role-train-module .rtm-car > *{grid-area:wgn;position:relative}.role-train-module .rtm-hero{position:absolute;inset:16px 16px auto 16px;height:20%;border-radius:14px;background:linear-gradient(135deg,#ff8a00 0%,#ffe0c2 100%);z-index:10;overflow:hidden}.role-train-module .rtm-h4{position:absolute;top:calc(20% + 48px);left:16px;right:16px;margin:0;font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.01em;z-index:20;color:#111;hyphens:auto}.role-train-module .rtm-excerpt{position:absolute;top:calc(20% + 88px);left:16px;right:16px;margin:0;font-size:13px;line-height:1.38;color:#222;opacity:.94;z-index:20;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:80ch}.role-train-module .rtm-footer{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px;z-index:20}.role-train-module .rtm-btn{background:var(--rtm-accent);color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}.role-train-module .rtm-link-more{background:none;border:none;color:var(--rtm-accent);text-decoration:underline;cursor:pointer;font-weight:600}.role-train-module .rtm-overlay{position:absolute;inset:70% 50% 0 0;z-index:9999;background:transparent;-webkit-tap-highlight-color:transparent}.role-train-module .rtm-modal{position:absolute;inset:0;background:rgba(0,0,0,0.85);border-radius:16px;padding:20px;color:#fff;z-index:20000;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease;display:flex;flex-direction:column}

.role-train-module .rtm-car.rtm-open .rtm-modal{opacity:1;pointer-events:auto;transform:translateY(0)}.role-train-module .rtm-close{align-self:flex-end;width:36px;height:36px;border-radius:999px;border:none;background:rgba(255,255,255,0.12);color:#fff;cursor:pointer;font-size:18px}.role-train-module .rtm-modal-body{margin-block-start:32px;display:grid;height:fit-content}.role-train-module .rtm-controls{position:absolute;bottom:14px;left:80%;transform:translateX(-20%);display:flex!important;gap:8px;z-index:50}@media screen and (min-width:2084px){.role-train-module .rtm-controls{display:none!important}}@media screen and (max-width:480px){.role-train-module .rtm-controls{left:70%;transform:translateX(-30%)}}.role-train-module .rtm-control-btn{width:44px;height:44px;border-radius:44px;border:none;background:#fff;box-shadow:0 6px 18px rgba(12,20,30,0.08);cursor:pointer;font-size:18px}

.role-train-module .rtm-control-btn:disabled{opacity:.5;cursor:not-allowed}

@container wgn (min-width:1px){
.role-train-modulertm-h4
{font-size:19px;
letter-spacing:-.02em;
hyphens:auto
}
.role-train-module .rtm-excerpt{
font-size:15px;
line-height:1.42;
-webkit-line-clamp:6;
max-width:75ch
}
.role-train-module .rtm-modal-body h3{
font-size:24px
}
.role-train-module .rtm-modal-body p{
font-size:16px
}
}

.role-train-module .rtm-excerpt{-webkit-line-clamp:6;max-width:80ch;position:absolute;top:calc(20% + 108px);left:16px;right:16px;color:#222;opacity:.94;z-index:20;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.role-train-module .rtm-modal-body p,.role-train-module .rtm-excerpt{margin:0;font-size:16px;line-height:1.311;letter-spacing:-.005em;hyphens:manual;max-width:80ch}.role-train-module .rtm-modal-body p{color:#fff;hyphens:auto;padding-inline:8px}.role-train-module .rtm-viewport::-webkit-scrollbar,.role-train-module .rtm-train::-webkit-scrollbar{display:none}.role-train-module .rtm-viewport::-webkit-scrollbar,.role-train-module .rtm-train::-webkit-scrollbar{width:0;height:0;background:rgba(0,0,0,0)}.role-train-module .rtm-train-outer,.role-train-module .rtm-viewport,.role-train-module .rtm-train{scrollbar-width:none}.role-train-module .rtm-hero{--dark-01:url(https://mycke.se/site-2026/svg/card-deco/dark_01.svg);--dark-02:url(https://mycke.se/site-2026/svg/card-deco/dark_02.svg);--dark-03:url(https://mycke.se/site-2026/svg/card-deco/dark_03.svg);--dark-04:url(https://mycke.se/site-2026/svg/card-deco/dark_04.svg);--dark-05:url(https://mycke.se/site-2026/svg/card-deco/dark_05.svg);--dark-06:url(https://mycke.se/site-2026/svg/card-deco/dark_06.svg);--dark-07:url(https://mycke.se/site-2026/svg/card-deco/dark_07.svg);--dark-08:url(https://mycke.se/site-2026/svg/card-deco/dark_08.svg);--dark-09:url(https://mycke.se/site-2026/svg/card-deco/dark_09.svg);--dark-10:url(https://mycke.se/site-2026/svg/card-deco/dark_10.svg)}.role-train-module .rtm-car>.rtm-hero::before{position:absolute;inset:0;background-size:cover;background-position:50% 50%;content:''}.role-train-module .rtm-car:nth-of-type(1)>.rtm-hero::before{background-image:var(--dark-01)}.role-train-module .rtm-car:nth-of-type(2)>.rtm-hero::before{background-image:var(--dark-02)}.role-train-module .rtm-car:nth-of-type(3)>.rtm-hero::before{background-image:var(--dark-03)}.role-train-module .rtm-car:nth-of-type(4)>.rtm-hero::before{background-image:var(--dark-04)}.role-train-module .rtm-car:nth-of-type(5)>.rtm-hero::before{background-image:var(--dark-05)}



.guide-pricing>.guide-included{background:#000;padding:48px 28px;margin-block-start:90px}.guide-pricing>.guide-included,.guide-pricing>.guide-included>div{display:grid}.guide-included{position:relative;padding-block:80px}.guide-included::before{background:#000}.guide-included > .area{grid-template-rows:repeat(2,auto);row-gap:16px;--arw:min(430px,100dvw);height:auto;background:#111;border-radius:16px;color:#fff;font-size:17px;letter-spacing:-.016em;line-height:1.119em}.guide-included > .area>div{padding:40px 16px 16px;display:grid;height:fit-content}.guide-included > .area>div:nth-of-type(1){position:relative;width:85px;height:120px;justify-self:start;margin-inline-start:20px;margin-block-start:20px}.guide-included > .area>div:nth-of-type(1)::before{background-image:url(https://mycke.se/site-2026/svg/mycke_se.svg);background-size:55px auto;z-index:1;background-position:top 28px center}.guide-included > .area>div:nth-of-type(1)::after{content:'mycke fotostudio';color:#fff;letter-spacing:-.022em;font-size:15px;font-weight:600;text-align:center;z-index:2;bottom:0;top:auto;line-height:1.05}.guide-included > .area>div p{padding:0;margin:0;display:grid;height:fit-content;padding-block-end:8px}@media screen and (min-width:480px){.guide-included > .area{grid-template-rows:1fr;row-gap:0;column-gap:16px;grid-template-columns:repeat(2,auto);width:min(100%,550px);justify-self:center;height:fit-content}.guide-included > .area>div:nth-of-type(1){justify-self:start}.guide-included > .area>div{padding:40px 16px}.guide-included > .area>div:nth-of-type(1){margin-block-start:0}}@media screen and (min-width:768px){.guide-included > .area{width:min(100%,692px)}}


.live-mode
{visibility: visible;}