/* Specialsnickerier — Ateljén (från mockup ateljen-d) */

/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/caveat-latin-400-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sorts-mill-goudy-latin-ext-italic-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sorts-mill-goudy-latin-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sorts-mill-goudy-latin-ext-normal-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sorts-mill-goudy-latin-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spline-sans-mono-latin-ext-normal-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spline-sans-mono-latin-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --papper:#FBF9F4;
  --blek:#F1EDE3;
  --black:#171410;
  --grafit:#4d463c;
  --falu:#96382B;
  --ljusgron:#F5F7EC;
  --linje:#d8d2c4;
  --rail:56px;
}
@media(max-width:960px){:root{--rail:0px}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--papper);color:var(--black);
  font-family:"Sorts Mill Goudy",serif;font-size:1.22rem;line-height:1.6;
}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--falu);outline-offset:3px}
img,video{max-width:100%;display:block}
.mono{font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
section[id]{scroll-margin-top:4.2rem}

/* Tumstocken — tonar in först nedanför heron */
.tumstock{
  position:fixed;top:0;bottom:0;left:0;width:56px;z-index:40;
  border-right:1px solid var(--linje);
  background:
    repeating-linear-gradient(to bottom, var(--grafit) 0 1px, transparent 1px 10px) 44px 0/6px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--grafit) 0 1px, transparent 1px 50px) 32px 0/18px 100% no-repeat,
    var(--blek);
}
.tumstock .mm{position:absolute;left:8px}
.tumstock .mm span{
  display:block;transform:rotate(90deg) translateY(-100%);transform-origin:0 0;
  font-family:"Spline Sans Mono",monospace;font-size:.58rem;letter-spacing:.1em;color:var(--grafit);white-space:nowrap;
}
.tumstock .pil{position:absolute;left:0;top:0;width:100%;height:2px;background:var(--falu)}
.scrollmatt{
  position:fixed;left:10px;bottom:14px;z-index:41;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Spline Sans Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  color:var(--falu);background:var(--blek);padding:.5rem .2rem;
}
.tumstock,.scrollmatt{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
body.forbi .tumstock,body.forbi .scrollmatt{opacity:1;visibility:visible;transition:opacity .4s ease}
@media(max-width:960px){.tumstock,.scrollmatt{display:none}}
.sida{margin-left:var(--rail)}

.wrap{max-width:1150px;margin:0 auto;padding:0 clamp(1.4rem,4.5vw,3rem)}

/* Menyn — hänger i luften, ingen bakgrund i något läge */
header.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:center;align-items:center;gap:3.2rem;
  padding:calc(1.1rem + env(safe-area-inset-top,0px)) calc(clamp(1.4rem,4.5vw,3rem) + env(safe-area-inset-right,0px)) 1.1rem calc(var(--rail) + clamp(1.4rem,4.5vw,3rem) + env(safe-area-inset-left,0px));
  color:var(--papper);text-shadow:0 1px 14px rgba(23,20,16,.5);
  border-bottom:1px solid transparent;
  transition:color .35s ease,background .35s ease,border-color .35s ease,padding .35s ease;
}
header.top .brand{display:flex;align-items:center;text-decoration:none}
header.top .brand img{width:92px;flex:none;max-width:none;transition:transform .5s ease}
header.top .brand:hover img{transform:rotate(14deg)}
header.top .brand .mork{display:none}
nav.main{text-align:center}
nav.main a{text-decoration:none;display:inline-block;white-space:nowrap;margin-left:1.7rem;font-size:1.12rem;color:inherit;opacity:.94}
nav.main a:first-child{margin-left:0}
nav.main a:hover{
  color:var(--papper);opacity:1;
  text-decoration:underline;text-decoration-color:var(--falu);
  text-decoration-thickness:2px;text-underline-offset:.4em;
}
/* Vit bakgrund efter ca fem raders scroll (body.harbg, JS-tröskel 160px) */
body.harbg header.top{background:#fff;color:var(--black);text-shadow:none;border-color:var(--linje);padding-top:calc(.7rem + env(safe-area-inset-top,0px));padding-bottom:.7rem}
body.harbg header.top .brand .ljus{display:none}
body.harbg header.top .brand .mork{display:block}
body.harbg nav.main a{color:var(--grafit)}
body.harbg nav.main a:hover{color:var(--falu)}
@media(max-width:780px){
  header.top{gap:1.5rem;padding-top:calc(.55rem + env(safe-area-inset-top,0px));padding-bottom:.55rem}
  body.harbg header.top{padding-top:calc(.45rem + env(safe-area-inset-top,0px));padding-bottom:.45rem}
  header.top .brand img{width:48px}
  nav.main{flex:0 1 auto;white-space:nowrap}
  nav.main a{margin-left:.9rem;font-size:1rem}
  nav.main a:first-child{margin-left:0}
  nav.main .dolj-mobil{display:none}
}

/* Hero — bilden täcker hela första sidan */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(9rem,16vh,11rem) 0 clamp(4.5rem,10vh,6.5rem);
  color:var(--papper);
}
.herobild{position:absolute;inset:0;overflow:hidden}
.herobild picture{display:contents}
.herobild img{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;backface-visibility:hidden;
  transform:scale3d(1.06,1.06,1) rotate(.02deg);
  animation:ssn-herodrift 16s linear infinite alternate;
}
/* Mikrorotationen tvingar subpixelfiltrering i Firefox/Windows,
   annars vibrerar den långsamma zoomen (0,5 %/s) där. */
@keyframes ssn-herodrift{
  from{transform:scale3d(1.06,1.06,1) translate3d(-.5%,-.3%,0) rotate(.02deg)}
  to{transform:scale3d(1.14,1.14,1) translate3d(.5%,.3%,0) rotate(.02deg)}
}
.herobild::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(18,14,10,.42) 100%),
    linear-gradient(to bottom,rgba(18,14,10,.62),rgba(18,14,10,.28) 32%,rgba(18,14,10,.24) 60%,rgba(18,14,10,.58));
}
.herogrid{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:3fr 2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
@media(max-width:880px){.herogrid{grid-template-columns:1fr}.herobadge{order:-1}}
.hero .matt{color:rgba(251,249,244,.72);margin-bottom:1.6rem}
.hero h1{
  font-weight:400;font-style:italic;
  font-size:clamp(1.9rem,2.6vw,2.5rem);
  line-height:1.22;letter-spacing:-.01em;
}
.hero h1 em{font-style:normal}
@media(max-width:880px){.hero h1 br{display:none}.hero h1{font-size:clamp(1.9rem,5.5vw,2.4rem)}}
.hero .under{margin-top:2.4rem}
.hero .under p{max-width:30em;color:rgba(251,249,244,.9);font-size:1.15rem}
.knappar{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
.mattext .knappar+.knappar{margin-top:.9rem}
.btn{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:1rem 1.7rem;border:1px solid var(--black);
  transition:background .25s,color .25s,border-color .25s;cursor:pointer;background:transparent;color:var(--black);
}
.btn:hover{background:var(--black);color:var(--papper)}
.btn.rod{background:var(--falu);border-color:var(--falu);color:var(--papper)}
.btn.rod:hover{background:#7E2B23}
.hero .btn{border-color:rgba(251,249,244,.8);color:var(--papper);text-shadow:none}
.hero .btn:hover{background:var(--papper);border-color:var(--papper);color:var(--black)}
.hero .btn.rod{background:var(--falu);border-color:var(--falu)}
.hero .btn.rod:hover{background:#7E2B23;color:var(--papper)}

.herobadge{display:flex;justify-content:center}
.logobygge{position:relative;width:min(320px,60vw);aspect-ratio:1;filter:drop-shadow(0 6px 30px rgba(18,14,10,.45))}
.logobygge svg,.logobygge img{position:absolute;inset:0;width:100%;height:100%}
.logobygge svg{opacity:0}
.logobygge svg g{stroke:var(--papper)}
.bladdra{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:rgba(251,249,244,.72);text-decoration:none;
}
.bladdra .streck{width:1px;height:46px;background:currentColor;animation:ssn-dyk 2.6s ease-in-out infinite;transform-origin:top}
@keyframes ssn-dyk{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media(max-height:620px),(max-width:880px){.bladdra{display:none}}
@media(max-width:880px){
  .logobygge{width:min(220px,52vw)}
  .herobadge{margin-bottom:.5rem}
}
@media(max-width:780px){.hero{padding-top:14rem}}

/* Dokumentsidor (integritetspolicy m.fl.) */
body.dokument .tumstock,body.dokument .scrollmatt{display:none}
.dok{max-width:820px;margin:0 auto;padding:11rem clamp(1.4rem,4.5vw,3rem) 5rem}
@media(max-width:780px){.dok{padding-top:14rem}}
.dok .matt{color:var(--falu);margin-bottom:1.2rem}
.dok h1{font-weight:400;font-style:italic;font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin-bottom:.4rem}
.dok .uppdaterad{font-style:italic;color:var(--grafit);margin-bottom:2.6rem}
.dok h2{font-weight:400;font-style:italic;font-size:1.5rem;margin:2em 0 .6em}
.dok p{color:var(--grafit);margin-bottom:1em}
.dok ul{margin:0 0 1em 1.3em;color:var(--grafit)}
.dok li{margin-bottom:.45em}
.dok a{color:var(--falu)}
.dok strong{font-weight:400;color:var(--black)}
.dok .tillbaka{margin-top:3.5rem}
.dok .tillbaka a{color:var(--falu);text-decoration:none}

/* Storbild — film (ligger mellan Arbetsgång och Referensbilder) */
.storbild{border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)}
.storbild .bildram{overflow:hidden}
.storbild video{width:100%;height:clamp(320px,55vw,600px);object-fit:cover}
.storbild .bildrad{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem clamp(1.4rem,4.5vw,3rem);color:var(--grafit);
}

section{padding:clamp(3.6rem,8vw,6rem) 0}
.rubrikrad{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:2.4rem;flex-wrap:wrap}
.rubrikrad .matt{color:var(--falu)}
h2{font-weight:400;font-size:clamp(1.7rem,3.6vw,2.5rem);font-style:italic}

.omgrid{display:grid;grid-template-columns:5fr 4fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:880px){.omgrid{grid-template-columns:1fr}}
.omgrid .text p+p{margin-top:1.2em}
.omgrid .text p{color:var(--grafit)}
.omgrid .text p:first-child{color:var(--black);font-size:1.35rem;line-height:1.5}
.faktaruta{border:1px solid var(--linje);background:var(--blek);padding:1.8rem}
.faktaruta dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:1.02rem}
.faktaruta dt{font-family:"Spline Sans Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--falu);padding-top:.3rem}
.faktaruta dd{color:var(--black)}

.materialsektion{background:var(--ljusgron);border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)}
.material{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;align-items:start}
@media(max-width:960px){.material{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.material{grid-template-columns:1fr}}
.tra{border:1px solid var(--linje);background:var(--papper)}
.tra summary{cursor:pointer;list-style:none;position:relative;display:block;padding:1.4rem 1.3rem 2.1rem}
.tra summary::-webkit-details-marker{display:none}
.tra summary::after{
  content:"+";position:absolute;right:1rem;bottom:.9rem;
  font-family:"Spline Sans Mono",monospace;font-size:1.15rem;color:var(--falu);
  transition:transform .25s ease;
}
.tra[open] summary::after{transform:rotate(45deg)}
.tra summary:hover h3{color:var(--falu)}
.tra .prov{position:relative;display:block;width:100%;aspect-ratio:1/1;margin-bottom:1rem;border:1px solid rgba(0,0,0,.12);overflow:hidden}
.tra .provbild{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .7s ease}
.tra .provbild.gammal{opacity:0}
.tra.visagammal .provbild.gammal{opacity:1}
.tra h3{font-weight:400;font-size:1.25rem;font-style:italic}
.tra summary p{font-size:.95rem;color:var(--grafit);margin-top:.3rem;min-height:6.5em}
.trainfo{padding:1rem 1.3rem 1.3rem;border-top:1px dashed var(--linje);margin:0 0}
.aldring{display:flex;gap:.45rem;margin-bottom:1rem}
.aldring button{
  font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--linje);background:#fff;color:var(--grafit);padding:.5em .7em;cursor:pointer;white-space:nowrap;
}
.aldring button.aktiv{border-color:var(--falu);background:var(--falu);color:#fff}
.skalor{display:grid;gap:.55rem;margin-bottom:1rem}
.skala{display:grid;grid-template-columns:5.6em 1fr;align-items:center;gap:.7rem}
.skala .mono{font-size:.6rem;letter-spacing:.12em;color:var(--grafit)}
.skala .linje{
  position:relative;height:9px;
  background:
    linear-gradient(var(--grafit),var(--grafit)) 0 4px/100% 1px no-repeat,
    linear-gradient(var(--grafit),var(--grafit)) 0 1px/1px 7px no-repeat,
    linear-gradient(var(--grafit),var(--grafit)) 100% 1px/1px 7px no-repeat;
}
.skala .linje i{position:absolute;top:1px;width:7px;height:7px;background:var(--falu);transform:translateX(-50%) rotate(45deg)}
.trad{font-size:.85rem;color:var(--grafit);margin:.45rem 0;line-height:1.45;min-height:5.6rem}
.trad .mono{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--falu);margin-bottom:.15rem}
.anteckning{margin-top:1rem;padding:.75rem .9rem .85rem;background:#fff;border-left:2px solid var(--falu);font-family:'Caveat',cursive;font-size:1.35rem;line-height:1.18;color:var(--black);min-height:13rem}
.anteckning .mono{display:block;font-family:"Spline Sans Mono",monospace;font-size:.6rem;letter-spacing:.14em;color:var(--falu);margin-bottom:.35rem}
.material-not{margin-top:1.8rem;color:var(--grafit);font-style:italic}

/* Snickerier som måttsatta ritningar på millimeterpapper */
.ritngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
@media(max-width:960px){.ritngrid{grid-template-columns:1fr}}
.ritnyta{
  border:1px solid var(--linje);padding:1.1rem;
  background:
    repeating-linear-gradient(to right, rgba(77,70,60,.055) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, rgba(77,70,60,.055) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right, rgba(77,70,60,.09) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(77,70,60,.09) 0 1px, transparent 1px 40px),
    #fff;
}
.ritnyta svg{width:100%;height:auto;display:block;color:var(--grafit)}
.ritnyta svg .matt{color:var(--falu)}
.ritnyta svg text{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.08em;fill:var(--falu)}
.ritnhuvud{border:1px solid var(--linje);border-top:0;background:var(--papper);padding:.5rem .9rem;display:flex;justify-content:flex-end}
.ritnhuvud .mono{color:var(--falu)}
.ritn h3{font-weight:400;font-size:1.4rem;font-style:italic;margin:1.1rem 0 .35rem}
.ritn p{color:var(--grafit);font-size:1.05rem}

/* Måtthjälps-kortet efter Snickerier */
section.mattbanner{padding:0 0 clamp(3.6rem,8vw,6rem)}
.mattkort{
  display:grid;grid-template-columns:3fr 2fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  text-decoration:none;color:inherit;
  border:1px solid var(--linje);padding:clamp(1.6rem,4vw,3rem);
  background:
    repeating-linear-gradient(to right, rgba(77,70,60,.055) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, rgba(77,70,60,.055) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right, rgba(77,70,60,.09) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(77,70,60,.09) 0 1px, transparent 1px 40px),
    #fff;
}
@media(max-width:880px){.mattkort{grid-template-columns:1fr}}
.mattext .matt{color:var(--falu)}
.mattext h2{margin:.7rem 0 .8rem}
.mattext p{color:var(--grafit);font-size:1.08rem;max-width:30em;margin-bottom:1.5rem}
.mattbild img{
  width:100%;max-width:420px;margin:0 auto;background:#fff;
  border:1px solid var(--linje);box-shadow:8px 10px 28px rgba(23,20,16,.14);
  transform:rotate(1.6deg);
}

/* Blankettöversikten /blankett/ */
.blista{border-top:1px solid var(--linje);margin-bottom:2.5rem}
.brad{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1.4rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--linje)}
@media(max-width:600px){.brad{grid-template-columns:3.4rem 1fr}.brad .btn{grid-column:2}}
.bkod{color:var(--falu)}
.btext h3{font-weight:400;font-style:italic;font-size:1.25rem}
.btext p{color:var(--grafit);font-size:1rem;margin:0}

/* Presentkortsteaser + beställningssida */
section.pkteaser{background:var(--papper)}
.pkinre{display:grid;grid-template-columns:3fr 2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:880px){.pkinre{grid-template-columns:1fr}}
.pktext .matt{color:var(--falu)}
.pktext h2{margin:.7rem 0 .8rem}
.pktext p{color:var(--grafit);font-size:1.08rem;max-width:30em;margin-bottom:1.5rem}
.pkbild{display:block}
.pkbild img{width:100%;max-width:430px;margin:0 auto;background:#fff;border:1px solid var(--linje);box-shadow:8px 10px 28px rgba(23,20,16,.14);transform:rotate(-1.4deg)}
.swishruta{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:start;border:1px solid var(--linje);background:#fff;padding:2rem;margin-top:1.5rem}
@media(max-width:700px){.swishruta{grid-template-columns:1fr;justify-items:center;text-align:center}}
#swish-qr{background:#fff;padding:10px;border:1px solid var(--linje)}
#swish-qr img,#swish-qr canvas{display:block}
.swishinfo p{margin-bottom:1rem;font-size:1.1rem}
.swishinfo .mono{color:var(--falu)}
.swishinfo .btn{margin:.5rem 0 1rem;display:inline-block}
.swishnot{color:var(--grafit);font-size:.98rem;max-width:30em}

/* CTA-rad efter referensbilderna */
section.ctarad{background:var(--blek);border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);padding:2.6rem 0}
.ctainre{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.ctainre p{font-style:italic;font-size:clamp(1.25rem,2.2vw,1.5rem);color:var(--black)}
@media(max-width:640px){.ctainre{justify-content:center;text-align:center}}

/* Vanliga frågor */
.faq{border-top:1px solid var(--linje)}
.faq details{border-bottom:1px solid var(--linje)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  font-style:italic;font-size:1.3rem;padding:1.2rem 3rem 1.2rem 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-family:"Spline Sans Mono",monospace;font-size:1.25rem;font-style:normal;color:var(--falu);
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--falu)}
.fsvar{padding:0 3rem 1.4rem 0}
.fsvar p{color:var(--grafit);font-size:1.08rem;max-width:44em}
.fsvar a{color:var(--falu)}

.steg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media(max-width:960px){.steg-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steg-grid{grid-template-columns:1fr}}
.steg .dim{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;color:var(--falu)}
.steg .dim::before,.steg .dim::after{content:"";flex:1;border-top:1px solid var(--falu)}
.steg .dim i{font-style:normal;font-family:"Spline Sans Mono",monospace;font-size:.66rem;letter-spacing:.14em}
.steg h3{font-weight:400;font-style:italic;font-size:1.4rem;margin-bottom:.5rem}
.steg p{color:var(--grafit);font-size:1.05rem}

/* Galleri med kategorifilter + bildvisare */
.gfilter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.gfilter button{
  font-family:"Spline Sans Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.6rem 1.1rem;border:1px solid var(--linje);background:var(--papper);color:var(--grafit);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.gfilter button:hover{border-color:var(--falu);color:var(--falu)}
.gfilter button.aktiv{background:var(--falu);border-color:var(--falu);color:var(--papper)}
.galleri{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:960px){.galleri{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.galleri{grid-template-columns:1fr}}
.g-item{border:0;padding:0;background:none;font:inherit;text-align:left;cursor:zoom-in;display:block;width:100%}
.g-item .bildram{display:block;overflow:hidden}
.g-item img{width:100%;height:280px;object-fit:cover;transition:transform .5s ease}
.g-item:hover img{transform:scale(1.04)}
.g-item .g-text{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding-top:.6rem;color:var(--grafit);min-height:2.95rem}
.g-item .g-kat{color:var(--falu);flex:none}
.g-item[hidden]{display:none}
dialog.bildvisare{border:0;padding:0;background:transparent;max-width:min(1100px,94vw)}
dialog.bildvisare::backdrop{background:rgba(23,20,16,.85)}
.bildvisare figure{margin:0;background:var(--papper);padding:10px;position:relative}
.bildvisare img{max-width:100%;max-height:80vh;width:auto;margin:0 auto}
.bildvisare figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .2rem .2rem;color:var(--grafit)}
.bildvisare .stang{
  position:absolute;top:-2.6rem;right:0;border:0;background:none;color:var(--papper);cursor:pointer;
  font-size:.72rem;letter-spacing:.14em;
}
.bildvisare .bv-pil{
  position:absolute;top:50%;transform:translateY(-50%);
  border:1px solid var(--linje);background:var(--papper);color:var(--black);cursor:pointer;
  width:2.6rem;height:2.6rem;font-size:1.3rem;line-height:1;font-family:"Sorts Mill Goudy",serif;
  transition:background .2s,color .2s;
}
.bildvisare .bv-pil:hover{background:var(--falu);border-color:var(--falu);color:var(--papper)}
.bildvisare .bv-fore{left:-3.4rem}
.bildvisare .bv-nasta{right:-3.4rem}
@media(max-width:700px){
  .bildvisare .bv-fore{left:6px;top:auto;bottom:-3.2rem;transform:none}
  .bildvisare .bv-nasta{right:6px;top:auto;bottom:-3.2rem;transform:none}
}
.igrad{margin-top:2rem;font-style:italic;color:var(--grafit)}
.igrad a{color:var(--falu)}

.kontakt{background:var(--ljusgron);color:var(--black);border-top:1px solid var(--linje)}
.kontakt .rubrikrad .matt{color:var(--falu)}
.kontakt h2{color:var(--black)}
.kontaktgrid{display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:960px){.kontaktgrid{grid-template-columns:1fr}}
.kontakt .tel{font-size:clamp(1.9rem,4.5vw,3rem);font-style:italic;text-decoration:none;display:inline-block;margin:.6rem 0 1rem}
.kontakt .tel:hover{color:var(--falu)}
.kontakt p{color:var(--grafit)}
.kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:1.05rem;margin-top:1.4rem}
.kontakt dt{font-family:"Spline Sans Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--falu);padding-top:.3rem}
.kontakt dd{color:var(--black)}

.blankett{
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(23,20,16,.06) 27px 28px),
    var(--papper);
  color:var(--black);padding:clamp(1.8rem,4vw,2.8rem);border:1px solid var(--linje);
}
.blankett .rubrik{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:2px solid var(--black);padding-bottom:.8rem;margin-bottom:1.6rem;flex-wrap:wrap}
.blankett .rubrik h3{font-weight:400;font-style:italic;font-size:1.5rem}
.blankett .rubrik .mono{color:var(--falu)}
.kvitto{border:1px solid var(--linje);background:var(--blek);padding:1rem 1.2rem;margin-bottom:1.5rem;font-size:1.05rem}
.kvitto .mono{color:var(--falu);display:block;margin-bottom:.2rem}
.kvitto.varning{border-color:var(--falu)}
.falt{margin-bottom:1.3rem}
.falt label{display:block;margin-bottom:.35rem}
.falt label .mono{color:var(--grafit)}
.falt input,.falt textarea{
  width:100%;border:0;border-bottom:1px solid var(--grafit);background:transparent;
  font-family:"Sorts Mill Goudy",serif;font-size:1.15rem;padding:.35rem .1rem;color:var(--black);
}
.falt textarea{border:1px solid var(--grafit);min-height:120px;padding:.6rem;resize:vertical}
.faltrad{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.faltrad .falt{display:flex;flex-direction:column}
.faltrad .falt input{margin-top:auto}
@media(max-width:600px){.faltrad{grid-template-columns:1fr}}
.falt-webbplats{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.falt-fil input{border:1px dashed var(--grafit);padding:.8rem;font-size:.95rem;cursor:pointer}
.falt-fil input::file-selector-button{
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--falu);background:transparent;color:var(--falu);padding:.5rem .9rem;margin-right:.9rem;cursor:pointer;
}
.falt input::placeholder{color:#a89f8f;font-style:italic}
.blankett .fot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.blankett .fot small{font-style:italic;color:var(--grafit);font-size:.95rem}

/* Footer — ljust avslut: centrerad logga över spalterna + bottenrad */
footer{background:var(--papper);color:var(--black);border-top:1px solid var(--linje);padding:clamp(4rem,7vw,6rem) 0 0}
.fotlogga{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.fotlogga img{width:120px;height:auto;margin:0 auto 1.2rem;display:block}
.fottag{color:var(--grafit);font-size:1.05rem;line-height:1.6;max-width:30em;margin:0 auto}
.fotgrid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(max-width:1050px){.fotgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fotgrid{grid-template-columns:1fr}}
.fotkol h3{font-weight:400;color:var(--falu);margin-bottom:1.1rem}
.fotkol ul{list-style:none;margin:0;padding:0}
.fotkol li{margin-bottom:.6rem;font-size:1.05rem;color:var(--black);line-height:1.5}
.fotkol a{color:var(--black);text-decoration:none;border-bottom:1px solid rgba(23,20,16,.22);transition:border-color .2s,color .2s}
.fotkol a:hover{color:var(--falu);border-color:var(--falu)}
.fotqr{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:0}
.fotqr a{display:block;background:#fff;border:1px solid var(--linje);padding:9px;line-height:0}
.fotqr img{width:118px;height:118px}
.fotqr figcaption{color:var(--grafit)}
.fotbotten{border-top:1px solid var(--linje);margin-top:clamp(3rem,6vw,5rem)}
.fotbottenrad{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.7rem;padding-bottom:calc(1.7rem + env(safe-area-inset-bottom,0px))}
.fotbotten .mono{color:var(--grafit)}