/* Kaseja Snickeri, v2. Charred wood, oak and raw cream. Poster-scale type, growth rings in the hero. */
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");font-weight:400 900;font-display:swap;
  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}
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");font-weight:400 900;font-display:swap;
  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}

:root{
  --char:#13100c; --char2:#1c1813; --char3:#2a241c;
  --cream:#efe8dc; --cream2:#e5dccc;
  --oak:#B88C56; --oak-deep:#6a4423;
  --ink:#1a1612; --mute-d:#b4a994; --mute-l:#5b5145;
  --line-d:#3a3227; --line-l:#cfc4b1;
  --font:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:max(20px,env(safe-area-inset-left,0px)); --gutr:max(20px,env(safe-area-inset-right,0px));
  --pad:clamp(20px,4vw,64px);
  --ph:#8f846f; --err:#ffb38a; --mat-hover:#ece3d4;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--oak) var(--char)}
body{margin:0;background:var(--char);color:var(--cream);font:400 17px/1.55 var(--font);font-kerning:normal;overflow-x:clip}
::selection{background:var(--oak);color:var(--char)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:12px;z-index:99;background:var(--oak);color:var(--char);padding:10px 14px}
.skip:focus{left:20px}
section{position:relative}

/* Header */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutr) 16px var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  transition:transform .5s var(--ease),background .4s;}
.top.scrolled{background:color-mix(in srgb,var(--char) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top.hide{transform:translateY(-110%)}
.brand{margin-right:auto;display:block;line-height:0}
.logo-svg{height:34px;width:auto;display:block}
.nav{display:flex;gap:26px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--mute-d);transition:color .2s}
.nav a:hover{color:var(--cream)}
.top-tel{font-size:15px;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:1080px){.nav{display:none}}
@media (max-width:620px){.top-tel{display:none}.logo-svg{height:28px}.top{gap:12px}}

.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--cream);color:var(--char);
  font:700 17px/1 var(--font);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn svg{width:20px;height:20px;fill:currentColor;transition:transform .4s var(--ease)}
.btn:hover{background:var(--oak)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-oak{background:var(--oak);color:var(--char)}
.btn-oak:hover{background:var(--cream)}

/* Hero: growth rings behind poster type */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--char)}
.rings{position:absolute;inset:0;z-index:0}
.rings canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.rings-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity 1.2s var(--ease)}
.rings.live .rings-poster{opacity:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 20% 80%,color-mix(in srgb,var(--char) 88%,transparent) 0%,color-mix(in srgb,var(--char) 55%,transparent) 45%,transparent 75%)}
.hero-in{position:relative;z-index:2;align-self:end;padding:calc(110px + env(safe-area-inset-top,0px)) var(--gutr) clamp(28px,5vh,56px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));display:grid;gap:clamp(24px,4vh,48px)}
.h1{font-weight:900;line-height:.86;letter-spacing:-.04em;font-size:clamp(68px,15.5vw,250px);display:grid}
/* Ett långt ord i rubriken: mindre grad så att det ryms på en rad, bryts vid bindestrecket i mobilen */
.h1-long{font-size:clamp(48px,9.2vw,168px);hyphens:manual;line-height:.92}
.h1-long .ln{padding-bottom:.1em}
.h1-long .ln-sub{font-size:.42em;margin-top:.15em}
@media (max-width:620px){.h1-long{font-size:calc((100vw - 40px) / 5.4)}.h1-long .ln-sub{font-size:max(.36em,24px)}}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block}
.ln-sub{font-size:.3em;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--oak);margin-top:.35em;padding-left:.08em}
.hero-foot{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px 48px}
.lead{max-width:44ch;font-size:clamp(17px,1.35vw,20px);color:var(--cream);opacity:.88}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.call{font-weight:600;font-variant-numeric:tabular-nums;min-height:44px;display:inline-flex;align-items:center;text-decoration-color:var(--oak)}

.ticker{position:relative;z-index:2;border-top:1px solid var(--line-d);overflow:hidden;white-space:nowrap;padding:14px 0;font-weight:600;font-size:15px;color:var(--mute-d)}
.ticker-track{display:inline-flex;align-items:center;gap:22px;animation:tick 38s linear infinite;padding-left:22px}
.ticker i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--oak);display:inline-block}
@keyframes tick{to{transform:translateX(-50%)}}

/* Statement */
.statement{background:var(--cream);color:var(--ink);padding:clamp(110px,16vw,240px) var(--gutr) clamp(110px,16vw,240px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.say{font-size:clamp(34px,6vw,104px);line-height:1.02;font-weight:800;letter-spacing:-.04em;max-width:23ch;text-wrap:balance}
.say .w{opacity:.14;transition:opacity .2s}
.say .w.on{opacity:1}

/* Work: horizontal panels */
.work{background:var(--char);padding:clamp(96px,12vw,170px) 0 clamp(64px,8vw,110px)}
.work-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(36px,5vw,64px);
  padding:0 var(--gutr) 0 var(--gut);padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.work-head h2{font-size:clamp(46px,8vw,132px);line-height:.9;max-width:9ch}
.work-head p{max-width:34ch;color:var(--mute-d);font-size:18px}
.work-track{display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--gutr) 0 var(--gut);padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));will-change:transform}
.panel{flex:0 0 min(78vw,620px);display:grid;grid-template-rows:auto 1fr;background:var(--char2);border-radius:28px;overflow:hidden;min-width:0}
.panel-img{margin:0;aspect-ratio:4/3;background:radial-gradient(80% 80% at 50% 45%,var(--char3),var(--char2));display:grid;place-items:center;overflow:hidden}
.panel-img img{width:88%;height:88%;object-fit:contain;transition:transform 1s var(--ease)}
.panel:hover .panel-img img{transform:scale(1.04) rotate(-1deg)}
.panel-txt{padding:24px 28px 30px;display:grid;gap:12px;align-content:start}
.panel-txt h3{font-size:clamp(30px,3vw,46px);line-height:1}
.panel-txt p{color:var(--mute-d)}
.tag{justify-self:start;font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--oak);color:var(--oak);text-decoration:none}
.tag-link:hover{background:var(--oak);color:var(--char)}
.panel-plan{background:var(--oak);color:var(--char)}
.panel-plan .panel-txt p{color:var(--ink)}
.panel-plan .tag{border-color:var(--char);color:var(--char)}
.panel-plan .tag-link:hover{background:var(--char);color:var(--oak)}
.plan-num{aspect-ratio:4/3;display:grid;place-content:center;font-weight:900;letter-spacing:-.05em;font-size:clamp(70px,9vw,150px);line-height:.85;text-align:center}
.plan-num span{font-size:.38em;letter-spacing:-.02em}
.note{margin:22px 0 0;padding:0 var(--gutr) 0 var(--gut);padding-left:max(var(--pad),env(safe-area-inset-left,0px));font-size:14px;color:var(--mute-d)}
@media (max-width:899px){
  .work-track{flex-direction:column}
  .panel{flex:none;width:100%}
}

/* Facts: the oak drench */
.facts{background:var(--oak);color:var(--char);padding:clamp(80px,10vw,150px) var(--gutr) clamp(80px,10vw,150px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.facts-list{list-style:none;margin:0;padding:0;display:grid}
.facts-list li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:0 18px;padding:clamp(10px,2vw,24px) 0;border-top:2px solid var(--char)}
.facts-list li:last-child{border-bottom:2px solid var(--char)}
.facts-list b{font-weight:900;font-size:clamp(76px,15vw,240px);line-height:.82;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.facts-list .u{font-weight:800;font-size:clamp(26px,4vw,64px);letter-spacing:-.03em}
.facts-list .d{justify-self:end;max-width:28ch;font-weight:500;font-size:clamp(15px,1.3vw,19px);text-align:right}
@media (max-width:760px){.facts-list li{grid-template-columns:auto minmax(0,1fr)}.facts-list .d{grid-column:1/-1;justify-self:start;text-align:left;margin-top:8px}}

/* Materials */
.materials{background:var(--cream);color:var(--ink);padding:clamp(110px,14vw,200px) var(--gutr) clamp(90px,11vw,160px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;overflow:hidden}
.mat-head h2{font-size:clamp(46px,7.5vw,124px);line-height:.9}
.lead-d{margin-top:22px;font-size:clamp(17px,1.4vw,21px);max-width:38ch;color:var(--mute-l)}
.fan{margin:0;justify-self:center;width:min(100%,560px)}
.mats{grid-column:1/-1;list-style:none;margin:clamp(20px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.mat{display:grid;gap:6px;align-content:start;padding:14px 14px 18px;background:var(--cream2);border-radius:22px;transition:transform .5s var(--ease),background .3s}
.mat:hover{transform:translateY(-6px);background:var(--mat-hover)}
.mat img{width:100%;aspect-ratio:3/2;object-fit:contain}
.mat b{font-weight:800;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.mat small{font-size:14px;color:var(--mute-l)}
@media (max-width:1000px){.mats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.materials{grid-template-columns:minmax(0,1fr)}.fan{width:min(80%,420px)}.mats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CAD: outlined marquee */
.cad{background:var(--char);overflow:hidden;padding:clamp(80px,10vw,140px) 0 clamp(96px,12vw,170px)}
.marquee{white-space:nowrap;overflow:hidden;margin-bottom:clamp(40px,6vw,90px)}
.marquee-track{display:inline-flex;gap:.25em;font-weight:900;font-size:clamp(90px,20vw,340px);line-height:.85;letter-spacing:-.04em;animation:tick 26s linear infinite;
  color:transparent;-webkit-text-stroke:2px var(--oak)}
.marquee-track span:nth-child(4n+1){color:var(--oak);-webkit-text-stroke:0}
.cad-in{padding:0 var(--gutr) 0 var(--gut);padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(24px,5vw,80px);align-items:start}
.cad-in h2{font-size:clamp(40px,5.6vw,92px);line-height:.92}
.cad-in .lead-d{color:var(--mute-d);margin-top:0}
.steps{grid-column:1/-1;list-style:none;margin:20px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);counter-reset:s}
.steps li{counter-increment:s;padding:26px 24px 28px;border-radius:24px;background:var(--char2);display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(s);font-weight:900;font-size:56px;line-height:.9;color:var(--oak);letter-spacing:-.04em}
.steps b{font-size:22px;letter-spacing:-.02em}
.steps span{color:var(--mute-d)}
.cad-in .btn{justify-self:start}
@media (max-width:860px){.cad-in{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:minmax(0,1fr)}}

/* Lokaler */
.place{background:var(--cream);color:var(--ink);padding:clamp(110px,14vw,200px) var(--gutr) clamp(110px,14vw,200px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center;overflow:hidden}
.place h2{font-size:clamp(44px,6.6vw,110px);line-height:.92}
.kv{margin:34px 0 26px;display:grid;border-top:2px solid var(--ink)}
.kv div{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2.4fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line-l)}
.kv dt{font-weight:600;color:var(--mute-l)}
.kv dd{margin:0;font-weight:600}
.link{font-weight:700;font-size:18px;text-decoration-color:var(--oak);text-underline-offset:.3em;text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center}
.place-k{justify-self:center;width:min(100%,460px)}
.place-k img{width:100%}
@media (max-width:860px){.place{grid-template-columns:minmax(0,1fr)}.place-k{width:min(60%,300px);order:-1;justify-self:start}}

/* FAQ */
.faq{background:var(--cream2);color:var(--ink);padding:clamp(96px,12vw,170px) var(--gutr) clamp(96px,12vw,170px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.faq h2{font-size:clamp(44px,6.6vw,110px);line-height:.92;margin-bottom:clamp(30px,4vw,56px)}
.qs{border-top:2px solid var(--ink);max-width:1100px}
.q{border-bottom:1px solid var(--line-l)}
.q summary{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;padding:24px 0;cursor:pointer;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q h3{font-size:clamp(20px,2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.q-x{width:28px;height:28px;border-radius:50%;background:var(--ink);position:relative;transition:transform .4s var(--ease),background .3s}
.q-x::before,.q-x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--cream);transform:translate(-50%,-50%)}
.q-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.q[open] .q-x{transform:rotate(45deg);background:var(--oak-deep)}
.q summary:hover h3{color:var(--oak-deep)}
.q p{padding:0 44px 26px 0;color:var(--mute-l);max-width:68ch;font-size:18px}

/* Contact */
.contact{background:var(--char);padding:clamp(100px,13vw,190px) var(--gutr) clamp(80px,10vw,140px) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.contact-h{font-weight:900;font-size:clamp(70px,14vw,230px);line-height:.84;letter-spacing:-.045em;margin-bottom:clamp(40px,6vw,80px)}
.contact-h span:last-child{color:var(--oak)}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:start}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-intro{grid-column:1/-1;color:var(--mute-d);max-width:56ch;margin-bottom:6px}
.f{display:grid;gap:6px;background:var(--char2);border-radius:18px;padding:14px 18px 12px;transition:box-shadow .2s,background .2s}
.f-wide{grid-column:1/-1}
.f span{font-size:13px;font-weight:600;color:var(--mute-d)}
.f input,.f textarea{font:500 18px/1.4 var(--font);color:var(--cream);background:transparent;border:0;padding:2px 0;width:100%;min-width:0;resize:vertical;caret-color:var(--oak)}
.f input:focus,.f textarea:focus{outline:none}
.f:focus-within{background:var(--char3);box-shadow:inset 0 0 0 1.5px var(--oak)}
.f ::placeholder{color:var(--ph);opacity:1}
.f-send{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.form-note{font-size:15px;color:var(--mute-d);max-width:46ch}
.form-note.err{color:var(--err)}
.direct{display:grid;gap:4px}
.direct h3{font-size:24px;margin-bottom:12px}
.big-tel{display:grid;text-decoration:none;font-weight:800;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;padding:14px 0;border-top:1px solid var(--line-d);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;transition:color .2s}
.big-tel[href^="mailto:"]{font-variant-numeric:normal}
.big-tel small{font-size:14px;font-weight:600;color:var(--mute-d);letter-spacing:0}
.big-tel:hover{color:var(--oak)}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.form{grid-template-columns:minmax(0,1fr)}}

/* Footer */
.foot{background:var(--char);border-top:1px solid var(--line-d);padding:56px var(--gutr) calc(40px + env(safe-area-inset-bottom,0px)) var(--gut);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));display:grid;gap:36px}
.foot-logo{width:min(100%,360px);height:auto}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;color:var(--mute-d);font-size:16px}
.foot-cols a{text-decoration:none;color:var(--cream)}
.foot-cols a:hover{color:var(--oak)}
.foot-note{font-size:14px;color:var(--mute-d)}
@media (max-width:1000px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.foot-cols{grid-template-columns:minmax(0,1fr)}}

/* Motion off: everything static and readable */
@media (prefers-reduced-motion:reduce){
  .ticker-track,.marquee-track{animation:none}
  .say .w{opacity:1}
  *{transition-duration:.01ms!important}
}
.no-js .say .w,.say:not(.split) .w{opacity:1}
@media (min-width:900px){.rings{inset:-6% -18% -6% 34%}}
@media (max-width:899px){.rings-poster{object-position:60% 30%}}
@media (max-width:620px){.ln-sub{font-size:max(.3em,26px)}}
/* Only on lanserad.se/visa/kaseja/: the line saying this is an example shown with permission */
.ex-bar{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-width:calc(100% - 24px);
  background:var(--cream);color:var(--char);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 8px 30px -10px rgb(0 0 0 / .6)}
.ex-bar a{color:var(--oak-deep)}

/* Work track: a wrapping grid by default (no JS, reduced motion, narrow screens); a pinned row only with motion */
.work-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.panel{flex:none;width:auto}
.work-count{font-weight:700;font-size:15px;color:var(--mute-d);font-variant-numeric:tabular-nums;display:none}
.work-count b{color:var(--oak)}
@media (min-width:900px){
  .motion .work{padding-top:clamp(40px,5vw,80px)}
  .motion .work-pin{padding-top:96px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .motion .work-head{margin-bottom:clamp(20px,3vh,40px)}
  .motion .work-head h2{font-size:clamp(46px,6.4vw,104px)}
  .motion .work-track{display:flex;flex-wrap:nowrap}
  .motion .panel{flex:0 0 min(44vw,560px,calc((100svh - 400px) * 1.3))}
  .motion .panel-img{aspect-ratio:16/10}
  .motion .work-count{display:block}
}

/* Quote form: file drop, inline errors, sent state */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.f-file{gap:10px;border:1.5px dashed var(--line-d);transition:border-color .2s,background .2s}
.f-file.drag{border-color:var(--oak);background:var(--char3)}
.f-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.file-pick{display:flex;align-items:center;gap:10px;min-height:48px;font-size:17px;color:var(--cream);cursor:pointer}
.file-pick b{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--cream);color:var(--char);font-size:15px}
.f-file:focus-within .file-pick b{outline:2px solid var(--oak);outline-offset:2px}
.f-file small{font-size:14px;color:var(--mute-d)}
.file-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.file-list li{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:8px 12px;border-radius:12px;background:var(--char3);overflow-wrap:anywhere}
.file-list li span{color:var(--mute-d);white-space:nowrap}
.file-list button{background:none;border:0;color:var(--oak);font:600 14px var(--font);cursor:pointer;min-height:32px;padding:0 4px}
.f-err{font-style:normal;font-size:14px;font-weight:600;color:var(--err)}
.f.invalid{box-shadow:inset 0 0 0 1.5px var(--err)}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}
.sent{background:var(--char2);border-radius:24px;padding:clamp(24px,4vw,44px);display:grid;gap:12px;align-content:start;outline:none}
.sent h3{font-size:clamp(28px,3vw,44px);color:var(--oak)}
.sent p{color:var(--mute-d);font-size:18px;max-width:46ch}
.sent a{color:var(--cream)}
.form[hidden],.sent[hidden],.f-err[hidden]{display:none}
.draw{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px clamp(24px,5vw,80px);align-items:start;padding:clamp(26px,3.4vw,44px);border-radius:24px;border:1.5px solid var(--oak);margin-bottom:10px}
.draw h3{font-size:clamp(28px,3.2vw,48px);line-height:.98;letter-spacing:-.03em;color:var(--oak)}
.draw p{margin:0;color:var(--cream);font-size:18px;max-width:52ch}
.draw-tags{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.draw-tags li{padding:8px 16px;border-radius:999px;background:var(--char2);font-weight:600;font-size:15px}
@media (max-width:860px){.draw{grid-template-columns:minmax(0,1fr)}}
/* Real footage from the workshop and the machine list in CAD och CNC */
.film{margin:0;display:grid;gap:10px;align-content:start}
.film video{width:100%;height:auto;aspect-ratio:1280/614;object-fit:cover;border-radius:24px;background:var(--char2);display:block}
.film figcaption{font-size:14px;color:var(--mute-d)}
.machines{display:grid;gap:14px;align-content:start}
.machines h3{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em}
.machines ul{list-style:none;margin:0;padding:0;display:grid}
.machines li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-d);font-size:18px}
.machines li span{color:var(--oak);font-variant-numeric:tabular-nums;white-space:nowrap}
.machines p{margin:4px 0 0;color:var(--mute-d);max-width:46ch}
.panel-light{background:#f4f1ec}
.panel-img video{width:100%;height:100%;object-fit:contain;display:block}
.meet{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line-d);color:var(--mute-d);font-size:17px;max-width:40ch}
.meet b{color:var(--cream)}
.foot-nav{display:grid;gap:6px;align-content:start}
.links{display:flex;flex-wrap:wrap;gap:8px 28px}
.draw .tag{grid-column:1/-1}
.nav a[aria-current=page]{color:var(--cream)}

/* Subpages: CNC och legotillverkning, CAD-underlag, Lokaler */
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.sub-hero{padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.crumb{display:flex;gap:10px;font-size:14px;color:var(--mute-d);margin-bottom:clamp(20px,3vw,36px)}
.crumb a{color:var(--mute-d);text-decoration:none}
.crumb a:hover{color:var(--cream)}
.sub-h1{font-size:clamp(52px,8.4vw,136px)}
.sub-h1 .ln-sub{font-size:.42em;color:var(--oak);letter-spacing:-.03em;margin-top:.25em}
.sub-lead{margin-top:clamp(22px,3vw,34px);font-size:clamp(18px,1.5vw,22px);max-width:40ch;color:var(--cream2)}
.sub-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.sub-cta .link{color:var(--cream)}
.sub-media{margin:0;display:grid;gap:10px}
.sub-media img,.sub-media video{width:100%;height:auto;border-radius:24px;background:var(--char2);display:block}
.sub-media figcaption{font-size:14px;color:var(--mute-d)}
.sec{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(80px,10vw,150px)}
.sec-light{background:var(--cream);color:var(--ink)}
.sec-light .lead-d{color:var(--mute-l)}
.sec-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(24px,5vw,80px);align-items:start}
.sec h2{font-size:clamp(40px,5.6vw,92px);line-height:.92}
.sec .lead-d{margin-top:0}
.cards{grid-column:1/-1;list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,2vw,24px)}
.cards li{padding:26px 24px 28px;border-radius:24px;background:var(--char2);display:grid;gap:8px;align-content:start}
.sec-light .cards li{background:var(--cream2)}
.cards b{font-size:22px;letter-spacing:-.02em}
.cards span{color:var(--mute-d)}
.sec-light .cards span{color:var(--mute-l)}
.formats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.formats li{list-style:none;font-weight:900;font-size:clamp(40px,6vw,96px);letter-spacing:-.04em;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--oak)}
.formats li:nth-child(odd){color:var(--oak);-webkit-text-stroke:0}
.formats{margin:0;padding:0}
.stat{font-weight:900;font-size:clamp(80px,14vw,220px);letter-spacing:-.05em;line-height:.85}
.stat small{display:block;font-size:.16em;letter-spacing:-.01em;font-weight:700;color:var(--mute-l);margin-top:14px}
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin-top:clamp(28px,4vw,44px)}
.more a{display:grid;gap:6px;padding:24px;border-radius:24px;border:1.5px solid var(--line-d);text-decoration:none;transition:border-color .3s,background .3s}
.more a:hover{border-color:var(--oak);background:var(--char2)}
.more b{font-size:22px;letter-spacing:-.02em}
.more span{color:var(--mute-d)}
.direct-big{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px 40px}
@media (max-width:900px){.sub-hero,.sec-2{grid-template-columns:minmax(0,1fr)}}
.machines-light li{border-bottom-color:var(--line-l)}
.machines-light li span{color:var(--oak-deep)}
.sec-light .steps li{background:var(--cream2)}
.sec-light a{text-decoration-color:var(--oak-deep)}
.kv-dark{border-top-color:var(--cream);margin:0}
.kv-dark div{border-bottom-color:var(--line-d)}
.kv-dark dt{color:var(--mute-d)}
.sub-stat{align-self:center}
.sub-stat .stat small{color:var(--mute-d)}
.sec .lead-d a{color:inherit}
.sub-hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.sub-h1{font-size:clamp(44px,5.6vw,104px)}
.sec:not(.sec-light) .lead-d{color:var(--mute-d)}
@media (max-width:900px){.sub-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.sub-h1{font-size:calc((100vw - 48px) / 7.6)}}
.sub-stat .stat{font-size:clamp(72px,9vw,150px)}.sub-stat .stat small{font-size:clamp(18px,1.6vw,24px);max-width:24ch}
.sub-stat .stat small{line-height:1.25;margin-top:18px}

/* Mobile: the services become a swipeable row, snapping card by card */
@media (max-width:899px){
  .work-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--pad),env(safe-area-inset-left,0px));
    gap:14px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .work-track::-webkit-scrollbar{display:none}
  .work-track .panel{flex:0 0 min(84vw,420px);scroll-snap-align:start}
  .work-head p::after{content:" Svep för fler.";color:var(--oak)}
}

/* Menu: a full-screen sheet on narrow screens (needs JS; without it the footer lists every page) */
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;border:1px solid var(--line-d);background:color-mix(in srgb,var(--char) 70%,transparent);
  color:var(--cream);font:600 15px/1 var(--font);cursor:pointer}
.menu-lines{position:relative;width:18px;height:2px;background:currentColor;transition:background .2s}
.menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.menu-lines::before{top:-6px}.menu-lines::after{top:6px}
.menu-btn[aria-expanded=true] .menu-lines{background:transparent}
.menu-btn[aria-expanded=true] .menu-lines::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-lines::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){.js .menu-btn{display:inline-flex}}
@media (max-width:620px){.js .top .btn-sm{display:none}}
.sheet{position:fixed;inset:0;z-index:-1;background:var(--char);padding:calc(96px + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow-y:auto}
.sheet[hidden]{display:none}
.sheet-nav{display:grid;gap:2px}
.sheet-nav a{font-weight:800;font-size:clamp(32px,9vw,56px);line-height:1.05;letter-spacing:-.04em;text-decoration:none;padding:6px 0;color:var(--cream);opacity:0;transform:translateY(24px)}
.sheet-nav a[aria-current=page]{color:var(--oak)}
.sheet.open .sheet-nav a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.sheet.open .sheet-nav a:nth-child(2){transition-delay:.04s}.sheet.open .sheet-nav a:nth-child(3){transition-delay:.08s}
.sheet.open .sheet-nav a:nth-child(4){transition-delay:.12s}.sheet.open .sheet-nav a:nth-child(5){transition-delay:.16s}.sheet.open .sheet-nav a:nth-child(6){transition-delay:.2s}
.sheet-foot{display:grid;gap:14px;justify-items:start}
.sheet-tel{text-decoration:none;font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.sheet-tel small{display:block;font-size:13px;font-weight:600;color:var(--mute-d)}
.menu-open{overflow:hidden}
.menu-open .top{background:var(--char)}
@media (prefers-reduced-motion:reduce){.sheet-nav a{opacity:1;transform:none}}

/* Gallery: real photos, swipe or arrows, gentle autoplay while on screen */
.gallery{background:var(--char);padding:clamp(80px,10vw,150px) 0}
.gal-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,52px);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.gal-head h2{font-size:clamp(46px,8vw,132px);line-height:.9}
.gal-head .lead-d{margin:0;color:var(--mute-d);max-width:34ch}
.car-track{list-style:none;margin:0;display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:0 max(var(--pad),env(safe-area-inset-right,0px)) 4px max(var(--pad),env(safe-area-inset-left,0px));scroll-padding-inline:max(var(--pad),env(safe-area-inset-left,0px));
  scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:-3px}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 min(86vw,720px);scroll-snap-align:start}
.car-slide figure{margin:0;display:grid;gap:12px}
.car-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;background:var(--char2);transition:transform .9s var(--ease),filter .9s var(--ease);filter:saturate(.92)}
.car-slide.is-on img{filter:none}
.car-slide figcaption{font-size:15px;color:var(--mute-d)}
.car-ui{display:none;align-items:center;gap:16px;margin-top:22px;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.js .car-ui{display:flex}
.car-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-d);background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.car-btn svg{width:20px;height:20px;fill:currentColor}
.car-btn:hover{background:var(--oak);border-color:var(--oak);color:var(--char)}
.car-count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--mute-d);min-width:4.5ch}
.car-count b{color:var(--cream)}
.car-bar{flex:1;height:2px;background:var(--line-d);border-radius:2px;overflow:hidden}
.car-bar span{display:block;height:100%;width:0;background:var(--oak);transition:width .5s var(--ease)}

/* Mobile quick actions: call or send a drawing, docked once the hero is passed */
.dock{display:none}
@media (max-width:700px){
  .dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;grid-template-columns:1fr 1.6fr;gap:8px;
    transform:translateY(140%);transition:transform .5s var(--ease)}
  .dock.on{transform:none}
  .dock a{min-height:52px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .dock-tel{background:var(--char3);color:var(--cream);border:1px solid var(--line-d)}
  .dock-cta{background:var(--oak);color:var(--char)}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
.menu-open .top{backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
@media (max-width:899px){.work-track{flex-direction:row}}
@media (max-width:700px){
  .dock{padding:6px;border-radius:999px;background:color-mix(in srgb,var(--char) 92%,transparent);border:1px solid var(--line-d);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.4)}
  .dock a{box-shadow:none;min-height:48px}
  .dock-tel{border:0;background:var(--char3)}
}
.foot-credit{margin-top:-26px;font-size:14px;color:var(--mute-d)}.foot-credit a{color:var(--cream);text-decoration-color:var(--oak)}.foot-credit a:hover{color:var(--oak)}

/* Light version: the same tokens inverted. Dark sections turn to paper, the cream sections turn dark,
   bronze darkens so text in it keeps 4.5:1. Light is the default; the theme button switches and is remembered (theme.js). */
:root[data-theme=light]{
  --char:#f4efe6; --char2:#ebe4d7; --char3:#e0d7c6;
  --cream:#1a1612; --cream2:#26201a;
  --oak:#835c2e; --oak-deep:#d2a66e;
  --ink:#f1ebe0; --mute-d:#5e5446; --mute-l:#b4a994;
  --line-d:#d5cab7; --line-l:#3d342a;
  --ph:#6f6555; --err:#b0401a; --mat-hover:#352d24;
  color-scheme:light;
}
.logo-light{display:none}
:root[data-theme=light] .logo-dark{display:none}
:root[data-theme=light] .logo-light{display:block}
:root[data-theme=light] .rings canvas{opacity:.9}
:root[data-theme=light] .dock,:root[data-theme=light] .top.scrolled{box-shadow:0 1px 0 var(--line-d)}

.theme-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-d);background:transparent;color:var(--cream);display:none;place-items:center;cursor:pointer;flex:none;transition:background .3s,border-color .3s}
.js .theme-btn{display:grid}
.theme-btn:hover{border-color:var(--oak)}
.theme-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-btn .i-sun{display:none}
:root[data-theme=light] .theme-btn .i-sun{display:block}
:root[data-theme=light] .theme-btn .i-moon{display:none}
@media (max-width:620px){.top .theme-btn{display:none}}
.sheet-foot .theme-btn{width:auto;border-radius:999px;padding:0 18px;gap:10px;grid-auto-flow:column;font:600 15px/1 var(--font);min-height:44px}
:root[data-theme=light] .rings-poster{display:none}
.sec-light .steps span{color:var(--mute-l)}.sec-light .steps li::before{color:var(--oak-deep)}