@font-face{font-family:'Schibsted Grotesk';src:url(/fonts/schibsted-grotesk-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(/fonts/schibsted-grotesk-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(/fonts/schibsted-grotesk-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(/fonts/schibsted-grotesk-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(/fonts/schibsted-grotesk-800.woff2) format('woff2');font-weight:800;font-display:swap}

/* Layout: a quiet black-on-white studio page; the one loud moment is the pinned gallery where the page takes on each firm's own colours. Left-aligned, one family (Schibsted Grotesk), type does the work. */
:root{
  --paper:#FFFFFF; --ink:#0E0E10; --logo:#000000; --mute:#5E5E5E; --rule:#DADADA; --soft:#F2F2F0;
  --f:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0B0B0C;--ink:#F4F4F2;--logo:#FFFFFF;--mute:#A3A3A3;--rule:#2E2E2E;--soft:#141414;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0B0B0C;--ink:#F4F4F2;--logo:#FFFFFF;--mute:#A3A3A3;--rule:#2E2E2E;--soft:#141414;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:24px;scroll-padding-bottom:96px;-webkit-tap-highlight-color:transparent}
a,button,summary,input{touch-action:manipulation}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:2px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--f);text-decoration:none;padding:16px 24px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-solid:hover{opacity:.85}
.btn{transition:transform .15s ease,background-color .2s ease,color .2s ease,opacity .2s ease}
.btn:active{transform:translateY(1px) scale(.98)}

/* header */
.top{position:relative;z-index:10}
.top .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 24px;padding-block:18px}
.nav{display:flex;gap:clamp(14px,2.4vw,34px);justify-self:center}
.nav a{text-decoration:none;font-weight:500;padding-block:12px;color:var(--mute)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media (max-width:820px){.top .wrap{grid-template-columns:1fr auto;padding-block:10px 0}.top .tools{grid-column:2;grid-row:1}.nav{grid-column:1/-1;grid-row:2;justify-self:start;gap:22px;border-top:1px solid var(--rule);width:100%;padding-top:2px}}
.brand{display:flex;align-items:center;gap:10px;padding-block:7px;text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.brand svg{width:30px;height:30px;color:var(--logo)}
.top a.tel{text-decoration:none;font-weight:600;padding-block:12px}
.top .tools{display:flex;align-items:center;gap:20px}
.top a.lang{text-decoration:none;font-weight:500;color:var(--mute);padding:12px 4px;min-width:44px;text-align:center}
.top a.lang:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.top a.tel:hover{text-decoration:underline;text-underline-offset:4px}

/* hero */
.hero{min-height:min(calc(100svh - 84px),900px);display:flex;align-items:flex-end;padding-block:48px 120px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end;width:100%}
.hero h1{font-size:clamp(3rem,min(9.2vw,12.5svh),9.6rem);line-height:.9;font-weight:850;letter-spacing:-.055em;max-width:12ch}
.hero .sub{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,36ch) auto;gap:24px 40px;align-items:end}
.hero .sub p{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--mute)}
.hero .sub p strong{color:var(--ink);font-weight:600}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.mark{width:clamp(140px,22vw,320px);height:auto;color:var(--logo);overflow:visible}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.mark{order:-1;width:130px}.hero .sub{grid-template-columns:1fr}}

.hero{position:relative}
@media (prefers-reduced-motion:reduce){.faq .pm::before,.faq .pm::after,.btn,.thumbs img{transition:none}}
/* gallery: the one loud moment */
@property --g-bg{syntax:'<color>';inherits:true;initial-value:#081A1B}
@property --g-ink{syntax:'<color>';inherits:true;initial-value:#E7F2F1}
@property --g-acc{syntax:'<color>';inherits:true;initial-value:#3CC0B4}
.gallery{--g-bg:#081A1B;--g-ink:#E7F2F1;--g-acc:#3CC0B4;background:var(--g-bg);color:var(--g-ink);overflow:hidden;transition:--g-bg .7s ease,--g-ink .7s ease,--g-acc .7s ease}
@media (prefers-reduced-motion:reduce){.gallery{transition:none}}
.track{gap:clamp(56px,8vw,112px)}
.panel{scroll-margin-top:24px}
.g-intro{padding-block:clamp(64px,9vw,120px) 32px}
.g-intro :is(h1,h2){font-size:clamp(2.2rem,5vw,4.6rem);line-height:.95;max-width:14ch}
.g-intro p{margin-top:20px;max-width:52ch;font-size:1.12rem;opacity:.82}
.track{display:flex;flex-direction:column;gap:56px;padding-bottom:clamp(64px,8vw,112px)}
.panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.panel figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.55);background:#fff}
.panel img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top}
.panel h3{font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1}
.panel .who{display:block;font-weight:500;font-size:1rem;margin-bottom:14px;color:var(--g-acc)}
.panel p{margin-top:16px;max-width:40ch;opacity:.86}
.g-note{font-size:.9rem;opacity:.7;padding-bottom:40px}
@media (max-width:820px){.panel{grid-template-columns:1fr}}
/* pinned horizontal mode, switched on by JS on wide screens */

/* before / after */
.ba{padding-block:clamp(80px,10vw,140px)}
.ba-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:40px}
.ba :is(h1,h2){font-size:clamp(2rem,4.2vw,3.6rem);line-height:.98}
.ba-head p{color:var(--mute);max-width:46ch}
@media (max-width:820px){.ba-head{grid-template-columns:1fr}}
.compare{--pos:52%;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:8/5;max-width:100%;background:#ddd;user-select:none}
.compare > *{position:absolute;inset:0}
.compare img{width:100%;height:100%;object-fit:cover;object-position:top}
.old{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);background:#E9E9E9;color:#000;font-family:"Times New Roman",Times,serif;overflow:hidden}
.old .bar{background:#1B3F8B;color:#fff;font:bold 22px/1 Arial,sans-serif;padding:18px 20px}
.old .nav{background:#C9D3E8;font:13px Verdana,sans-serif;padding:6px 20px;color:#1B3F8B}
.old .nav span{margin-right:14px;text-decoration:underline}
.old .body{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:18px 20px}
.old .side{background:#fff;border:1px solid #9AA6C2;font:12px Verdana,sans-serif;padding:10px;line-height:1.7}
.old .main h4{margin:0 0 8px;font-size:22px;color:#1B3F8B}
.old .main p{font-size:15px;line-height:1.45;margin-bottom:10px}
.old .main .counter{font:11px Verdana,sans-serif;color:#555;margin-top:18px}
.old .marq{background:#FFF59A;border:1px dashed #B59B00;font:13px Verdana,sans-serif;padding:6px 8px;margin-bottom:12px}
@media (max-width:600px){.old .body{grid-template-columns:1fr}.old .side{display:none}.old .main p{font-size:13px}}
.handle{left:var(--pos,50%);width:0;inset-block:0;pointer-events:none}
.handle::before{content:"";position:absolute;inset-block:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.handle svg{position:absolute;top:50%;left:-24px;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#fff;color:#000;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare input:focus-visible + .handle svg{outline:3px solid #000;outline-offset:3px}
.tags{display:flex;justify-content:space-between;margin-top:14px;font-size:.95rem;color:var(--mute)}

/* prices */
.prices{padding-block:clamp(48px,6vw,96px) clamp(64px,8vw,120px)}
.sec-h{font-size:clamp(2rem,4.2vw,3.6rem);line-height:.98;max-width:18ch}
.lead{margin-top:18px;color:var(--mute);max-width:52ch}
.rows{margin-top:48px;border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr);gap:12px 32px;padding-block:22px;border-bottom:1px solid var(--rule);align-items:baseline}
.row h3{font-size:1.6rem;letter-spacing:-.03em}
.row p{color:var(--mute);max-width:62ch}
.row .price{font-weight:700;font-size:1.25rem;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.row .price small{display:block;font-weight:400;font-size:.88rem;color:var(--mute);letter-spacing:0;margin-top:4px}
.price small:first-child{margin:0 0 2px}
.row.addon h3::after{content:" tillägg";font-weight:500;font-size:.9rem;color:var(--mute);letter-spacing:0}
html[lang=en] .row.addon h3::after{content:" add-on"}
html[lang=en] .price{font-variant-numeric:lining-nums proportional-nums}
@media (max-width:720px){.top .tel{display:none}}
@media (max-width:760px){.row{grid-template-columns:1fr}.row .price{text-align:left}}
.offer{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;background:var(--soft);border-radius:14px;padding:22px 26px}
.offer p{max-width:60ch}
.vat{margin-top:14px;font-size:.88rem;color:var(--mute)}

/* process */
.row p .inc{display:block;margin-top:8px;font-size:.88rem;color:var(--ink);opacity:.8}
.seo{padding-block:clamp(64px,8vw,120px);background:var(--soft)}
.seo-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.seo-head .lead{margin-top:0}
.seo-list{list-style:none;padding:0;margin:clamp(36px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.seo-list li{padding:20px 20px 8px 0;display:flex;flex-direction:column;gap:10px}
.seo-list li+li{padding-left:20px;border-left:1px solid var(--rule)}
.seo-list .in{font-size:.9rem;color:var(--ink);margin-top:auto;padding-top:6px}
.seo-list h3{font-size:1.3rem;letter-spacing:-.02em}
.seo-list p{color:var(--mute);font-size:.98rem}
.seo-note{margin-top:28px;color:var(--mute);font-size:.92rem;max-width:62ch}
@media (max-width:1100px){.seo-list{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-list li,.seo-list li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}.seo-list li:nth-child(even){padding-left:20px;border-left:1px solid var(--rule)}}
@media (max-width:820px){.seo-head{grid-template-columns:1fr}}
@media (max-width:560px){.seo-list{grid-template-columns:1fr}.seo-list li:nth-child(even){padding-left:0;border-left:0}}
.proc{padding-block:clamp(64px,8vw,120px)}
.steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:counter(s);display:block;font-weight:800;font-size:2.4rem;letter-spacing:-.05em;line-height:1;margin-bottom:14px}
.steps h3{font-size:1.25rem;letter-spacing:-.02em}
.steps p{color:var(--mute);margin-top:6px;font-size:.98rem}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* about */
.about{padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--rule)}
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,5vw,80px)}
.about :is(h1,h2){font-size:clamp(2rem,4.2vw,3.6rem);line-height:.98}
.about .role{margin-top:14px;color:var(--mute)}
.about .cv{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--rule)}
.about .cv>div{padding-block:14px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:9.5em 1fr;gap:4px 16px}
.about .cv dt{color:var(--mute);font-size:.9rem;padding-top:.15em}
.about .cv dd{margin:0;grid-column:2}
@media (max-width:520px){.about .cv>div{grid-template-columns:1fr}.about .cv dd{grid-column:1}}
.about .txt{display:grid;gap:18px;align-content:start;font-size:1.15rem;max-width:58ch}
.about .txt a{text-underline-offset:4px}
.name{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:center;margin-top:10px;padding-top:24px;border-top:1px solid var(--rule);color:var(--mute);font-size:1rem}
.name svg{width:64px;height:64px;color:var(--logo)}
@media (max-width:820px){.about .wrap{grid-template-columns:1fr}}

/* contact */
.faq{padding-block:clamp(64px,8vw,120px)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px 64px}
.faq-list{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding-block:22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.25rem;letter-spacing:-.02em}
.faq .pm{flex:none;width:16px;height:16px;position:relative}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor;transition:transform .25s}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details p{color:var(--mute);padding-bottom:24px;max-width:60ch}
.faq summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.faq summary:focus-visible{outline:3px solid currentColor;outline-offset:4px}
@media (max-width:820px){.faq .wrap{grid-template-columns:1fr}}
.contact{padding-block:clamp(80px,10vw,160px);border-top:1px solid var(--rule)}
.contact :is(h1,h2){font-size:clamp(2rem,4vw,3.4rem);line-height:1;max-width:20ch}
.contact .big{display:block;margin-top:28px;font-weight:850;font-size:clamp(2.6rem,8vw,6.5rem);line-height:.95;letter-spacing:-.05em;text-decoration:none;font-variant-numeric:tabular-nums}
.contact .big:hover{text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:12px}
.contact .more{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 40px;font-size:1.15rem}
.contact .more a{text-underline-offset:4px;display:inline-block;padding-block:10px}
footer{border-top:1px solid var(--rule);padding-block:26px;color:var(--mute);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.mbar{display:none}
@media (max-width:720px){.mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;inset:auto 0 0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--rule)}.mbar .btn{justify-content:center;padding:14px}body{padding-bottom:78px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* inner pages */
main>section:first-child{border-top:0}
.inner main>section:first-child:not(.gallery){padding-top:clamp(40px,6vw,88px)}
/* start: services teaser and work teaser */
.tease{padding-block:clamp(64px,8vw,120px);background:var(--soft)}
.tease .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px clamp(32px,6vw,96px);align-items:start}
.tease .more-link{grid-column:1;grid-row:2;margin-top:8px;align-self:start}
.tease .cols{grid-column:2;grid-row:1/span 2;margin:0;grid-template-columns:1fr;gap:0;border-top:2px solid var(--ink)}
.tease .cols li{border-top:0;border-bottom:1px solid var(--rule);padding-block:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px 32px;align-items:baseline}
.tease .cols p{margin-top:0}
@media (max-width:820px){.tease .wrap{grid-template-columns:1fr}.tease .cols{grid-column:1;grid-row:2}.tease .more-link{grid-row:3}.tease .cols li{grid-template-columns:1fr}}
.cols{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cols li{border-top:2px solid var(--ink);padding-top:18px}
.cols h3{font-size:1.35rem;letter-spacing:-.02em}
.cols p{color:var(--mute);margin-top:8px}
.cols.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
@media (max-width:820px){.cols,.cols.four{grid-template-columns:1fr}}
.more-link{display:inline-block;margin-top:32px;font-weight:600;text-underline-offset:5px;padding-block:10px}
.work{padding-block:clamp(64px,8vw,120px)}
.work-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 56px;align-items:end}
.work-head p{color:var(--mute);max-width:46ch}
@media (max-width:820px){.work-head{grid-template-columns:1fr}}
.thumbs{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px 24px}
.thumbs a:first-child{grid-row:span 2;display:flex;flex-direction:column}
.thumbs a:first-child .im{flex:1 1 0;min-height:0}
.thumbs a:first-child img{height:100%;aspect-ratio:auto;object-position:left top}
.thumbs .im{display:block;border-radius:12px;overflow:hidden;background:var(--soft)}
.thumbs img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.thumbs a:hover img{transform:scale(1.03)}
.thumbs a{text-decoration:none;display:block}
.thumbs img{aspect-ratio:8/5;object-fit:cover;object-position:top;width:100%;height:auto;background:var(--soft)}
.thumbs span{display:block;margin-top:12px;font-weight:600}
.thumbs a:hover span{text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){.thumbs{grid-template-columns:1fr}.thumbs a:first-child{grid-row:auto}.thumbs a:first-child .im{flex:none}.thumbs a:first-child img{aspect-ratio:8/5;height:auto}}
.princ{padding-block:clamp(64px,8vw,120px);background:var(--soft)}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.steps.three{grid-template-columns:1fr}}
.next{padding-block:0 clamp(64px,8vw,120px)}
footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
footer nav a{text-decoration:none;padding-block:8px}
footer nav a:hover{text-decoration:underline}