/* K03 · Ishavsgravyr */
:root{--paper:#EFE8DA;--ink:#17140F;--red:#B3261E;--mute:#6B5F4E;--rule:rgba(23,20,15,.35);
 --bl:'Grenze Gotisch',serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--it:'Cormorant Garamond',Georgia,serif;
 --out:cubic-bezier(.16,1,.3,1);--pad:clamp(16px,3vw,48px);--focus:var(--red)}
body{background:var(--paper);color:var(--ink);font:500 19px/1.5 var(--it);
 background-image:radial-gradient(rgba(23,20,15,.05) 1px,transparent 1px);background-size:3px 3px}
::selection{background:#C8501E;color:#fff}
.mono{font:400 12.5px/1.55 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.small{font-size:11.5px}
.it{font-style:italic;font-size:22px}
.rom{font:400 54px/1 var(--bl);color:var(--red)}
.mark-bek{font-family:var(--mono);font-size:10px}

/* markør: gravørstikkel */
.cursor{width:0;height:0}
.cursor__x{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .35s var(--out),background .3s,border-color .3s}
.cursor__x::before,.cursor__x::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%}
.cursor__x::before{width:1px;height:30px;transform:translate(-50%,-50%) rotate(-45deg)}
.cursor__x::after{width:30px;height:1px;transform:translate(-50%,-50%) rotate(-45deg)}
.cursor__label{position:absolute;left:16px;top:10px;font:400 26px/1 var(--bl);color:var(--red);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .35s var(--out)}
.cursor.has-label .cursor__label{opacity:1;transform:none}
.cursor.state-link .cursor__x{transform:rotate(45deg) scale(1.9);background:var(--red);border-color:var(--red)}
.cursor.state-grave .cursor__x{transform:rotate(0) scale(1.3);border-color:var(--red)}
.cursor.is-down .cursor__x{transform:rotate(45deg) scale(.6)}

/* header */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px var(--pad);background:var(--paper);border-bottom:3px double var(--ink)}
.logo{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;text-decoration:none;margin-right:auto}
.logo__w{font:400 40px/1 var(--bl)}
.logo__p{width:14px;height:14px;background:var(--red);transition:transform .5s var(--out)}
.logo:hover .logo__p{transform:rotate(45deg)}
.logo__s{grid-column:1/-1;font:400 9.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.14em}
.hd__nav{display:flex;gap:22px}
.hd__a{font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.hd__a span{color:var(--red)}
.hd__a:hover,.hd__a[aria-current]{border-bottom-color:var(--ink)}
.hd__menu{display:none;font:400 13px var(--mono);text-transform:uppercase;background:none;border:1.5px solid var(--ink);padding:8px 12px}
.mnav{display:none}

/* hero med levende gravyr */
.hero{position:relative;height:calc(100svh - 72px);min-height:560px;border-bottom:3px double var(--ink);overflow:hidden}
.grav{display:block;width:100%;height:100%}
.grav--hero{position:absolute;inset:0}
.hero__txt{position:absolute;left:var(--pad);top:7%;max-width:min(560px,90vw);pointer-events:none}
.hero__kick{background:var(--paper);display:inline-block;padding:4px 8px;border:1px solid var(--ink)}
.hero__t{font:400 clamp(110px,17vw,300px)/.82 var(--bl);margin:12px 0 8px;color:var(--ink);text-shadow:0 0 0 var(--paper);-webkit-text-stroke:8px var(--paper);paint-order:stroke fill}
.hero__sub{font:500 italic clamp(22px,2.2vw,32px)/1.15 var(--it);background:var(--paper);display:inline;padding:2px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero__fig{position:absolute;left:var(--pad);bottom:16px;max-width:620px;background:var(--paper);padding:8px 10px;border:1px solid var(--ink);margin:0}
.stamp{position:absolute;right:calc(var(--pad) + 10px);bottom:40px;width:130px;height:130px;border:3px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font:400 22px/1 var(--bl);color:var(--red);transform:rotate(-14deg);background:rgba(239,232,218,.85);box-shadow:inset 0 0 0 5px rgba(239,232,218,.85),inset 0 0 0 6.5px var(--red)}
html:not(.rm) .stamp{animation:stampIn .6s 1.2s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stampIn{from{transform:rotate(-30deg) scale(2.2);opacity:0}}

section{padding:100px var(--pad)}
section.intro{padding:130px var(--pad)}
section.demo{padding:80px var(--pad) 110px}
section.work{padding:120px var(--pad) 90px}
section.ledger-s{padding:90px var(--pad) 140px}
section.page-h{padding:120px var(--pad) 70px}
.intro{border-bottom:1px solid var(--rule)}
.drop{font:500 clamp(24px,2.6vw,38px)/1.3 var(--it);max-width:34ch;margin:0 auto}
.drop::first-letter{font:400 3.4em/.8 var(--bl);float:left;margin:.06em .1em 0 0;color:var(--red)}
.sh{text-align:center;margin-bottom:56px}
.sh h2,.page-h h1{font:400 clamp(56px,8vw,140px)/.9 var(--bl);margin:6px 0 14px}
.lede{max-width:56ch;margin:0 auto;font-size:21px}
.page-h{text-align:center;border-bottom:3px double var(--ink)}
.svc__l{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.svc__l li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:26px 22px;text-align:center;transition:background .4s}
.svc__l li:hover{background:var(--ink);color:var(--paper)}
.svc__l h3{font:400 34px/1 var(--bl);margin:12px 0}

.demo{background:var(--ink);color:var(--paper)}
.demo .rom,.demo .sh p.mono{color:#E8563F}
.demo__w{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:stretch}
.grav--demo{height:min(70vh,640px);border:1px solid var(--paper)}
.demo__ctl{display:flex;flex-direction:column;gap:20px;border:1px solid rgba(239,232,218,.4);padding:20px}
.demo__ctl fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.demo__ctl legend{margin-bottom:10px}
.demo__ctl label{font-size:20px;display:flex;gap:10px;align-items:center}
.demo__ctl input[type=radio]{accent-color:#E8563F;width:16px;height:16px}
.rng{flex-direction:column;align-items:stretch!important;gap:6px!important}
.rng input{accent-color:#E8563F}
.btn{font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:14px;background:#E8563F;color:var(--ink);border:0;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{background:var(--paper)}

.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.plate{display:block;text-decoration:none}
.plate__img{display:block;border:1px solid var(--ink);padding:8px;background:var(--paper);box-shadow:4px 4px 0 var(--ink);transition:transform .5s var(--out),box-shadow .5s var(--out)}
.plate__img img{filter:grayscale(1) contrast(1.4) sepia(.35);mix-blend-mode:multiply;transition:filter .6s;aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.plate:hover .plate__img{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red)}
.plate:hover .plate__img img{filter:none;mix-blend-mode:normal}
.plate__cap{display:block;font:500 19px/1.3 var(--it);padding-top:12px}
.plate__cap b{font:400 12px var(--mono);text-transform:uppercase;color:var(--red)}
.more{text-align:center;margin-top:40px;font:400 13px var(--mono);text-transform:uppercase}
.more a{color:var(--red)}

.ledger{list-style:none;padding:0;margin:0 auto;max-width:900px}
.ledger li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.lg__n{font:400 46px/1 var(--bl)}
.lg__dots{border-bottom:2px dotted var(--ink);transform:translateY(-8px)}
.lg__p{font:400 15px var(--mono)}
.lg__f{grid-column:1/-1;font-style:italic;color:var(--mute)}
.ledger-s .mono.small{text-align:center;max-width:760px;margin:16px auto 0}
.ptab{overflow-x:auto;max-width:1000px;margin:50px auto 0}
.ptab table{width:100%;border-collapse:collapse;min-width:620px;border:3px double var(--ink)}
.ptab th,.ptab td{padding:12px;border:1px solid var(--rule);text-align:left;font-size:17px}
.ptab thead th{font:400 30px var(--bl)}
.ptab th small{display:block;font:400 10px var(--mono);text-transform:uppercase;color:var(--red)}
.ptab tbody th{font:400 12px var(--mono);text-transform:uppercase}

.catalog{display:grid;gap:80px}
.cat{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.cat:nth-child(even) .plate{order:2}
.cat h2{font:400 clamp(44px,5vw,80px)/.95 var(--bl);margin:6px 0 12px}
.areas{display:grid;gap:0;max-width:1100px;margin:0 auto}
.ar{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:34px 0;border-bottom:1px solid var(--rule)}
.ar h2{font:400 54px/1 var(--bl);margin:0 0 8px}
.ar ul{padding-left:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1100px;margin:0 auto}
.h3{font:400 44px/1 var(--bl);margin:0 0 16px}
.addons{list-style:none;padding:0;margin:0}
.addons li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dotted var(--ink)}
.addons li span:last-child{font:400 12.5px var(--mono)}
.terms p{font:400 12px/1.6 var(--mono)}
.faq{max-width:900px;margin:0 auto}
.faq__i{border-bottom:1px solid var(--rule)}
.faq__q{font:400 34px/1.1 var(--bl);padding:18px 0;list-style:none;cursor:pointer}
.faq__q::-webkit-details-marker{display:none}
.faq__q::before{content:"☞ ";color:var(--red);font-family:var(--it)}
.faq__a{margin:0 0 18px;font-size:21px}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:40px;justify-content:center}
.pt{margin:0;text-align:center}
.pt__f{position:relative;aspect-ratio:4/5;border:1px solid var(--ink);padding:10px;background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.pt__f canvas{width:100%;height:100%;opacity:.35}
.pt__f span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 130px/1 var(--bl);color:var(--red)}
.pt figcaption{display:flex;flex-direction:column;padding-top:16px;gap:4px}
.pt b{font:400 36px/1 var(--bl);font-weight:400}
.steps__l{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.steps__l b{display:block;font:400 34px var(--bl);font-weight:400;margin:8px 0}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;max-width:1200px;margin:0 auto}
.big{font:400 clamp(30px,3.4vw,52px)/1 var(--bl);word-break:break-word}
.big a{color:var(--red)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:3px double var(--ink);padding:26px}
.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{font:500 19px var(--it);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;text-transform:none}
.form__b{font:400 13px var(--mono);text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;padding:16px}
.form__b:hover{background:var(--red)}
.form__note{font:400 12px/1.5 var(--mono)}

.ft{background:var(--ink);color:var(--paper);padding:60px var(--pad) 0;overflow:hidden;text-align:center}
.ft__rule{border-top:3px double var(--paper);margin-bottom:40px}
.ft__big{font:400 clamp(44px,6vw,100px)/.95 var(--bl);margin:0}
.ft__mail{font:500 italic 28px var(--it)}
.ft__mail a{color:#E8563F}
.ft__cols{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;margin-top:30px}
.ft__l{margin:0;font:400 11.5px var(--mono)}
.ft__wm{font:400 clamp(160px,30vw,520px)/.7 var(--bl);margin:40px 0 0;color:#E8563F;transform:translateY(18%)}

.preloader{background:var(--paper);display:flex;align-items:flex-end;justify-content:center;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.pre__cv{position:absolute;inset:0;width:100%;height:100%}
.pre__t{position:relative;font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;background:var(--paper);padding:8px 12px;border:1px solid var(--ink);margin-bottom:30px}
.preloader.is-done{transform:translateY(-100%)}

.transition{background:var(--ink);display:flex;align-items:center;justify-content:center;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:clip-path .5s cubic-bezier(.7,0,.2,1)}
.transition span{font:400 200px var(--bl);color:#E8563F}
html.is-leaving .transition,html.is-entering .transition{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
html.is-entering .transition{transition:none}
::view-transition-old(root){animation:k3o .5s ease-in both}
::view-transition-new(root){animation:k3i .8s cubic-bezier(.16,1,.3,1) both}
@keyframes k3o{to{opacity:0;filter:contrast(3) grayscale(1)}}
@keyframes k3i{from{clip-path:polygon(0 0,100% 0,100% 0,0 0)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@supports (animation-timeline:view()){
 html:not(.rm) .plate__img{animation:k3r linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
 @keyframes k3r{from{transform:rotate(-2.5deg) translateY(40px)}to{transform:none}}
}

@media (max-width:900px){
 .hd__nav{display:none}.hd__menu{display:block}
 .mnav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:49;background:var(--ink);color:var(--paper);justify-content:center;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .4s}
 html.menu-open .mnav{opacity:1;pointer-events:auto}
 html.menu-open .hd{color:var(--ink)}
 .mnav__a{font:400 56px/1.1 var(--bl);text-decoration:none}
 .svc__l{grid-template-columns:1fr 1fr}.plates,.cat,.two,.contact,.team,.demo__w{grid-template-columns:1fr}
 .steps__l{grid-template-columns:1fr 1fr}
 .cat:nth-child(even) .plate{order:0}
 .stamp{width:96px;height:96px;font-size:16px;bottom:auto;top:20px}
 .hero__fig{font-size:10px;right:var(--pad)}
 section{padding:70px var(--pad)}
 .form{grid-template-columns:1fr}
 .ar{grid-template-columns:1fr}
 .grav--demo{height:56vh}
 .lg__n{font-size:34px}
}