/* K05 · Rutenett */
:root{--bg:#FAFAF7;--ink:#111;--o:#C8501E;--o-txt:#A94319;--line:#111;--mute:#55534E;
 --sans:'Archivo',Helvetica,Arial,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
 --pad:clamp(14px,2.2vw,32px);--gap:clamp(10px,1.4vw,20px);--out:cubic-bezier(.16,1,.3,1);--focus:var(--o)}
body{background:var(--bg);color:var(--ink);font:450 17px/1.45 var(--sans)}
::selection{background:var(--o);color:#000}
.mono{font:400 12px/1.5 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.small{font-size:11px}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-left:var(--pad);padding-right:var(--pad)}
.g .g{padding:0}
.c1-1{grid-column:1/2}.c1-2{grid-column:1/3}.c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}.c1-9{grid-column:1/10}.c1-10{grid-column:1/11}.c1-11{grid-column:1/12}.c1-12{grid-column:1/13}.c2-2{grid-column:2/3}.c2-3{grid-column:2/4}.c2-4{grid-column:2/5}.c2-5{grid-column:2/6}.c2-6{grid-column:2/7}.c2-7{grid-column:2/8}.c2-8{grid-column:2/9}.c2-9{grid-column:2/10}.c2-10{grid-column:2/11}.c2-11{grid-column:2/12}.c2-12{grid-column:2/13}.c3-3{grid-column:3/4}.c3-4{grid-column:3/5}.c3-5{grid-column:3/6}.c3-6{grid-column:3/7}.c3-7{grid-column:3/8}.c3-8{grid-column:3/9}.c3-9{grid-column:3/10}.c3-10{grid-column:3/11}.c3-11{grid-column:3/12}.c3-12{grid-column:3/13}.c4-4{grid-column:4/5}.c4-5{grid-column:4/6}.c4-6{grid-column:4/7}.c4-7{grid-column:4/8}.c4-8{grid-column:4/9}.c4-9{grid-column:4/10}.c4-10{grid-column:4/11}.c4-11{grid-column:4/12}.c4-12{grid-column:4/13}.c5-5{grid-column:5/6}.c5-6{grid-column:5/7}.c5-7{grid-column:5/8}.c5-8{grid-column:5/9}.c5-9{grid-column:5/10}.c5-10{grid-column:5/11}.c5-11{grid-column:5/12}.c5-12{grid-column:5/13}.c6-6{grid-column:6/7}.c6-7{grid-column:6/8}.c6-8{grid-column:6/9}.c6-9{grid-column:6/10}.c6-10{grid-column:6/11}.c6-11{grid-column:6/12}.c6-12{grid-column:6/13}.c7-7{grid-column:7/8}.c7-8{grid-column:7/9}.c7-9{grid-column:7/10}.c7-10{grid-column:7/11}.c7-11{grid-column:7/12}.c7-12{grid-column:7/13}.c8-8{grid-column:8/9}.c8-9{grid-column:8/10}.c8-10{grid-column:8/11}.c8-11{grid-column:8/12}.c8-12{grid-column:8/13}.c9-9{grid-column:9/10}.c9-10{grid-column:9/11}.c9-11{grid-column:9/12}.c9-12{grid-column:9/13}.c10-10{grid-column:10/11}.c10-11{grid-column:10/12}.c10-12{grid-column:10/13}.c11-11{grid-column:11/12}.c11-12{grid-column:11/13}.c12-12{grid-column:12/13}
/* rutenett-overlegg */
.gridov{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:0 var(--pad);opacity:0;transition:opacity .4s}
.gridov i{background:rgba(200,80,30,.09);border-left:1px solid rgba(200,80,30,.5);border-right:1px solid rgba(200,80,30,.5)}
html.show-grid .gridov{opacity:1}

/* markør: trådkors over hele skjermen */
.cursor{left:0;top:0;transform:none;width:100vw;height:100vh;inset:0}
.cursor__h,.cursor__v{position:absolute;background:var(--ink);opacity:.35}
.cursor__h{left:0;right:0;height:1px;top:var(--py,0)}
.cursor__v{top:0;bottom:0;width:1px;left:var(--px,0)}
.cursor__sq{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--o);transition:width .3s var(--out),height .3s var(--out),margin .3s var(--out)}
.cursor__xy{position:absolute;left:calc(var(--px,0) + 10px);top:calc(var(--py,0) + 10px);font-size:10px;background:var(--bg);padding:2px 4px}
.cursor__label{position:absolute;left:calc(var(--x) + 18px);top:calc(var(--y) - 26px);font:900 14px/1 var(--sans);text-transform:uppercase;background:var(--o);color:#000;padding:5px 7px;opacity:0;transition:opacity .2s}
.cursor.has-label .cursor__label{opacity:1}
.cursor.state-link .cursor__sq,.cursor.has-label .cursor__sq{width:28px;height:28px;margin:-14px 0 0 -14px;background:var(--ink)}
.cursor.state-link .cursor__h,.cursor.state-link .cursor__v{opacity:.8;background:var(--o)}
.cursor.is-down .cursor__sq{width:6px;height:6px;margin:-3px 0 0 -3px}
.dark-zone .cursor__h{background:#fff}

/* header */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:stretch;gap:0;background:var(--bg);border-bottom:2px solid var(--ink);height:56px}
.logo{display:flex;align-items:center;gap:0;background:var(--ink);color:var(--bg);text-decoration:none;padding:0 18px 0 var(--pad);position:relative;font:900 26px/1 var(--sans);font-stretch:85%;letter-spacing:-.01em;margin-right:auto}
.logo i{position:absolute;right:-12px;top:-0px;width:12px;height:12px;background:var(--o);transition:transform .5s var(--out)}
.logo:hover i{transform:translateY(44px)}
.hd__nav{display:flex}
.hd__a{display:flex;align-items:center;gap:8px;padding:0 20px;border-left:2px solid var(--ink);text-decoration:none;font:800 15px/1 var(--sans);text-transform:uppercase;transition:background .2s,color .2s}
.hd__a b{font:400 11px var(--mono);color:var(--o-txt)}
.hd__a:hover,.hd__a[aria-current]{background:var(--ink);color:var(--bg)}
.hd__a:hover b,.hd__a[aria-current] b{color:#E36A33}
.grid-tg,.hd__menu{border:0;border-left:2px solid var(--ink);background:none;padding:0 18px}
.grid-tg[aria-pressed="true"]{background:var(--o);color:#000}
.hd__menu{display:none}
.mnav{display:none}

/* hero */
.hero{min-height:calc(100svh - 56px);row-gap:var(--gap);padding-top:var(--gap);padding-bottom:var(--gap);align-content:end;border-bottom:2px solid var(--ink)}
.hero__k{grid-row:1;align-self:start}
.hero__t{grid-row:2;font:900 clamp(42px,11.4vw,210px)/.84 var(--sans);font-stretch:75%;letter-spacing:-.035em;text-transform:uppercase;margin:0;hyphens:manual}
.hero__p{grid-row:1/3;align-self:end}
.poster{width:100%;height:auto;display:block}
.arc{transform:rotate(calc(var(--r0) + var(--spin,0deg) * (var(--k) - 1)));transition:transform .2s linear;transform-origin:0 0}
.hero__l{grid-row:3;margin:0;font-size:19px;font-weight:600;border-top:2px solid var(--ink);padding-top:10px}
.hero__l.mono{font-weight:400;font-size:12px}
.hero__price{grid-row:3;margin:0;border-top:2px solid var(--o);padding-top:10px;display:flex;flex-direction:column}
.hero__price b{font:900 44px/1 var(--sans);font-stretch:75%}

.band{padding:0;border-bottom:2px solid var(--ink);background:var(--o);color:#000;overflow:hidden}
.marq{display:flex;white-space:nowrap;font:900 clamp(30px,4vw,64px)/1.2 var(--sans);font-stretch:75%;text-transform:uppercase}
.marq span{padding-right:20px}
html:not(.rm) .marq{animation:marq 26s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}

.sec{padding-top:90px;padding-bottom:90px;border-bottom:2px solid var(--ink)}
section.sec.dark{padding-top:70px;padding-bottom:110px}
section.page-h{padding-top:130px;padding-bottom:50px}
.sec.dark{background:var(--ink);color:var(--bg)}
.sec.dark .mono{color:#C9C6BE}
.sh{margin-bottom:48px;align-items:baseline}
.sh h2,.page-h h1{font:900 clamp(40px,9vw,160px)/.86 var(--sans);font-stretch:75%;text-transform:uppercase;letter-spacing:-.03em;margin:0}
.sh p:not(.mono){margin:18px 0 0;font-size:19px}
.page-h{align-items:baseline;row-gap:20px;padding-top:120px}
.svc,.pk{list-style:none;margin:0;padding-top:0;padding-bottom:0}
.svc li,.pk li{border-top:2px solid var(--ink);padding-top:14px}
.big-n{display:block;font:900 96px/.9 var(--sans);font-stretch:62%;color:var(--o)}
.svc h3,.pk h3{font:900 28px/1 var(--sans);text-transform:uppercase;margin:12px 0 10px;font-stretch:85%}
.pk h3{font-size:56px;font-stretch:75%}
.pr{font:900 34px/1 var(--sans);font-stretch:75%;margin:12px 0 0;display:flex;flex-direction:column}
.pr small{font:400 11px var(--mono);text-transform:uppercase;margin-top:4px}
.pk li:hover,.svc li:hover{border-top-color:var(--o)}
a{text-decoration-thickness:2px;text-underline-offset:3px}

/* generator */
.gen{align-items:start;row-gap:30px}
.gen__f{display:grid;gap:20px}
.fld{border:0;padding:0;margin:0;display:grid;gap:8px}
.fld input:not([type]),.fld input[name=navn]{background:transparent;border:0;border-bottom:2px solid currentColor;color:inherit;font:900 28px/1.1 var(--sans);font-stretch:85%;padding:6px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{position:relative}
.chips input,.sw input{position:absolute;opacity:0;inset:0;margin:0}
.chips span{display:block;border:2px solid currentColor;padding:7px 11px;font:800 13px/1 var(--sans);text-transform:uppercase}
.chips input:checked+span{background:var(--o);border-color:var(--o);color:#000}
.chips input:focus-visible+span,.sw label:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px}
.sw{display:flex;gap:8px}
.sw label{position:relative;width:34px;height:34px;background:var(--c);border:2px solid #fff}
.sw label:has(input:checked){outline:3px solid var(--o);outline-offset:2px}
.brw{border:2px solid #fff;background:#222}
.brw__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:2px solid #fff;color:#ddd}
.brw__bar i{width:10px;height:10px;border-radius:50%;background:#555}
.brw__bar span{margin-left:12px}
.brw__vp{background:#444;height:min(64vh,560px);overflow:hidden;display:flex;justify-content:center}
.site{width:100%;height:100%;transition:width .6s var(--out);overflow:hidden;background:var(--s-bg);color:var(--s-fg);font-family:var(--s-font);display:flex;flex-direction:column}
.brw.is-m .site{width:375px}
.s-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:var(--s-rule)}
.s-logo{font-weight:900;font-size:18px;letter-spacing:-.01em;text-transform:var(--s-case)}
.s-menu{display:flex;gap:16px;font-size:12px;font-weight:600}
.s-hero{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:24px 20px;align-content:end;position:relative}
.s-h{grid-column:1/6;font-size:clamp(28px,4.6vw,64px);line-height:.92;font-weight:var(--s-w);letter-spacing:-.03em;margin:0;text-transform:var(--s-case);transition:all .4s}
.s-blk{position:absolute;right:20px;top:24px;width:28%;aspect-ratio:1;background:var(--s-acc);transition:all .5s var(--out);border-radius:var(--s-rad)}
.s-p{grid-column:1/5;font-size:14px;margin:6px 0 0;opacity:.85}
.s-cta{grid-column:1/4;justify-self:start;margin-top:10px;background:var(--s-acc);color:var(--s-on);padding:12px 18px;font-weight:800;font-size:13px;border-radius:var(--s-rad);text-transform:var(--s-case)}
.s-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--s-rule)}
.s-row div{padding:14px 20px;font-size:12px;border-right:var(--s-rule)}
.s-row b{display:block;font-size:15px;margin-bottom:4px}
.s-tag{position:absolute;left:20px;top:16px;font:400 10px var(--mono);text-transform:uppercase;background:var(--s-fg);color:var(--s-bg);padding:3px 5px}
.brw.is-m .s-menu{display:none}.brw.is-m .s-row{grid-template-columns:1fr}.brw.is-m .s-row div{border-right:0;border-bottom:var(--s-rule)}
.brw.is-m .s-h{grid-column:1/-1;font-size:40px}.brw.is-m .s-p{grid-column:1/-1}

/* arbeid */
.wr{padding-top:30px;padding-bottom:30px;border-top:2px solid var(--ink);row-gap:10px;align-items:start}
.wr h2{font:900 clamp(32px,3.6vw,60px)/.9 var(--sans);font-stretch:75%;text-transform:uppercase;margin:0}
.wr__i{grid-row:1/4;display:block;overflow:hidden;border:2px solid var(--ink)}
.wr__i img{display:block;width:100%;transition:transform .8s var(--out),filter .4s;filter:grayscale(1)}
.wr__i:hover img{transform:scale(1.04);filter:none}
.ar{padding-top:30px;padding-bottom:30px;border-top:2px solid var(--ink);align-items:start}
.ar h2{font:900 40px/.95 var(--sans);font-stretch:75%;text-transform:uppercase;margin:0}
.lead{font-size:21px;font-weight:600;margin:0 0 12px}
.ptab{overflow-x:auto}
.ptab table{width:100%;border-collapse:collapse;min-width:640px}
.ptab th,.ptab td{padding:12px 10px;border-top:2px solid var(--ink);text-align:left;vertical-align:top}
.ptab thead th{font:900 40px/1 var(--sans);font-stretch:75%;text-transform:uppercase}
.ptab th.rec{color:var(--o-txt)}
.ptab th small{display:block;font:400 11px var(--mono);text-transform:uppercase}
.ptab tbody th{font:400 12px var(--mono);text-transform:uppercase}
.h3{font:900 34px var(--sans);font-stretch:75%;text-transform:uppercase;margin:0 0 14px}
.addons{list-style:none;padding:0;margin:0}
.addons li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--ink)}
.addons li span:last-child{font:400 12px var(--mono);text-align:right}
.terms p{font:400 12px/1.6 var(--mono)}
.faq__i{border-top:2px solid var(--ink)}
.faq__q{list-style:none;font:900 26px/1.1 var(--sans);font-stretch:85%;text-transform:uppercase;padding:16px 0}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:" +";color:var(--o)}
.faq__a{margin:0 0 16px;max-width:60ch}
.tm{margin:0}
.tm__p{aspect-ratio:3/2;border:2px solid var(--ink);display:flex;align-items:flex-end;justify-content:space-between;padding:16px}
.tm__p span{font:900 180px/.8 var(--sans);font-stretch:62%;color:var(--o)}
.tm figcaption{display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:2px solid var(--ink);margin-top:10px}
.tm b{font:900 24px var(--sans);text-transform:uppercase;font-stretch:85%}
.q{font:900 clamp(30px,3.6vw,60px)/1 var(--sans);font-stretch:75%;text-transform:uppercase;margin:0}
.big{font:900 clamp(26px,2.8vw,44px)/1 var(--sans);font-stretch:85%;word-break:break-word}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__f{display:flex;flex-direction:column;gap:6px;font:400 12px var(--mono);text-transform:uppercase}
.form__f--wide,.form__b,.form__note{grid-column:1/-1}
.form input,.form select,.form textarea{border:2px solid var(--ink);background:transparent;padding:12px;font:600 17px var(--sans);text-transform:none;border-radius:0}
.form__b{background:var(--ink);color:var(--bg);border:0;padding:18px;font:900 18px var(--sans);text-transform:uppercase}
.form__b:hover{background:var(--o);color:#000}
.form__note{font:400 12px/1.5 var(--mono);text-transform:none}

.ft{padding-top:60px;padding-bottom:30px;background:var(--o);color:#000;align-items:end}
.ft__n{font:900 clamp(90px,17vw,300px)/.8 var(--sans);font-stretch:62%;text-transform:uppercase;margin:0;letter-spacing:-.03em}
.ft__r{display:grid;gap:16px}
.ft__r a{color:#000}
.ft__l{margin:0}
.btn{display:block;background:#000;color:var(--bg)!important;text-decoration:none;padding:20px;font:900 20px var(--sans);text-transform:uppercase;text-align:center}
.btn:hover{background:var(--bg);color:#000!important}

.preloader{background:var(--bg);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:0 var(--pad)}
.preloader i{background:var(--ink);transform-origin:top;transform:scaleY(calc(var(--p,0) * 1.6 - var(--i) * .05));min-height:100%}
.pre__n{position:absolute;right:var(--pad);bottom:var(--pad);font:900 120px/.8 var(--sans);font-stretch:62%;color:var(--o)}
.preloader{transition:clip-path .8s cubic-bezier(.7,0,.2,1);clip-path:inset(0)}
.preloader.is-done{clip-path:inset(0 0 0 100%)}
.transition{display:grid;grid-template-columns:repeat(12,1fr)}
.transition i{background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 18ms)}
html.is-leaving .transition i,html.is-entering .transition i{transform:scaleY(1)}
html.is-entering .transition i{transition:none}
::view-transition-old(root){animation:k5o .4s steps(6) both}
::view-transition-new(root){animation:k5i .55s cubic-bezier(.7,0,.2,1) both}
@keyframes k5o{to{clip-path:inset(0 0 100% 0)}}
@keyframes k5i{from{clip-path:inset(100% 0 0 0)}}
@supports (animation-timeline:view()){
 html:not(.rm) .big-n{animation:k5n linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
 @keyframes k5n{from{font-stretch:125%;letter-spacing:.1em}to{font-stretch:62%}}
}

@media (max-width:900px){
 .hd__nav,.grid-tg{display:none}.hd__menu{display:block}
 .mnav{display:flex;flex-direction:column;position:fixed;inset:56px 0 0;z-index:49;background:var(--o);padding:var(--pad);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--out)}
 html.menu-open .mnav{transform:none}
 .mnav__a{font:900 54px/1.05 var(--sans);font-stretch:75%;text-transform:uppercase;text-decoration:none;border-bottom:2px solid #000;color:#000}
 .g>*{grid-column:1/-1!important;grid-row:auto!important}
 .g{row-gap:16px}
 .hero__p{max-width:260px}
 .svc li,.pk li{margin-bottom:24px}
 .form{grid-template-columns:1fr}
 .tm__p span{font-size:120px}
 .brw.is-m .site{width:100%}
 .s-hero{min-height:300px}
}