:root{--bg:#fff;--yta:#f4f4f2;--text:#0b0b0c;--dim:#6b6b70;--linje:#e3e3e0;--accent:#1F2A44;--ok:#1f7a4d;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
h1{font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.025em;font-weight:800;margin:.1em 0 .3em;text-transform:uppercase}
h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.015em;margin:0 0 .5em;font-weight:700;text-transform:uppercase}
h3{margin:0 0 .2em;font-size:18px;font-weight:650}h4{margin:0 0 .6em;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--dim)}.smalt{color:var(--dim);font-size:13px}
.over{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0;font-weight:600}.over a{text-decoration:none}
.ingress{font-size:clamp(17px,2vw,21px);line-height:1.5;max-width:640px}

.topp{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,4vw,56px);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:20;border-bottom:1px solid var(--linje)}
.logo img{height:38px}
.topp nav{display:flex;align-items:center;gap:30px}
.topp nav a{text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--dim);padding:6px 0;border-bottom:2px solid transparent}
.topp nav a:hover,.topp nav a.on{color:var(--text);border-color:var(--text)}
.topp nav a.tel{background:var(--text);color:#fff;padding:10px 16px;border:0;letter-spacing:.08em}
.menyknapp{display:none}.menyikon{display:none;width:34px;height:34px;cursor:pointer;position:relative}
.menyikon span,.menyikon span::before,.menyikon span::after{content:"";position:absolute;left:5px;right:5px;height:2px;background:var(--text);top:16px}
.menyikon span::before{top:-7px;left:0;right:0}.menyikon span::after{top:7px;left:0;right:0}
main{min-height:60vh}
.sektion{padding:clamp(40px,7vw,96px) clamp(18px,4vw,56px);max-width:var(--max);margin:0 auto}
.sektion.smal{max-width:820px}
.grå{max-width:none;background:var(--yta)}.grå>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.rubrikrad{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px}.rubrikrad a{font-weight:600;font-size:14px}
.tva{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}

.knapp{display:inline-block;background:var(--text);color:#fff;border:1px solid var(--text);padding:14px 26px;font:700 12px var(--font);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:.15s}
.knapp:hover{background:#fff;color:var(--text)}.knapp.sek{background:#fff;color:var(--text)}.knapp.sek:hover{background:var(--text);color:#fff}
.knappar{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:min(78vh,720px)}
.herotext{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,90px) clamp(18px,4vw,56px)}
.herobild{position:relative;background:var(--yta);overflow:hidden}.herobild img{width:100%;height:100%;object-fit:cover;min-height:320px}
.herolank{position:absolute;left:0;bottom:0;background:#fff;padding:14px 22px;text-decoration:none;font-weight:700;font-size:14px}

.rutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:34px 26px}
.bilkort{text-decoration:none;display:block}
.bildyta{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--yta)}.bildyta img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bilkort:hover .bildyta img{transform:scale(1.04)}
.etikett{position:absolute;left:12px;top:12px;background:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:5px 11px}.etikett.sald{background:var(--ok);color:#fff}
.kortinfo{padding:14px 0}.kortpris{font-weight:800;font-size:20px;margin:6px 0 0;letter-spacing:-.01em}

.fordelar{display:grid;gap:22px}.fordelar h3{text-transform:uppercase;letter-spacing:.06em;font-size:15px}.fordelar p{margin:0;color:#333}
.cta{text-align:center;max-width:720px}.cta .knapp{margin-top:8px}

.bilgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"gal fakta" "besk fakta";column-gap:clamp(24px,4vw,56px);row-gap:36px;margin-top:14px;align-items:start}.galleri{grid-area:gal}.faktaruta{grid-area:fakta}.bilbeskr{grid-area:besk}.bilbeskr>div+div{margin-top:32px}.bilbeskr h2{font-size:15px;letter-spacing:.1em;margin-bottom:10px}.bilbeskr p{max-width:62ch}.utr.tvakol{columns:2;column-gap:32px}.garantirad{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--yta);margin-top:4px}.garantirad strong{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.huvud{position:relative;aspect-ratio:4/3;background:var(--yta);overflow:hidden}.huvud img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.miniatyrer{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.miniatyrer img{aspect-ratio:4/3;object-fit:cover;cursor:pointer;opacity:.75;width:100%}.miniatyrer img:hover,.miniatyrer img.on{opacity:1}
.faktaruta h1{font-size:clamp(28px,3.4vw,42px)}.stortpris{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin:.2em 0}
.spec{margin:22px 0;border-top:1px solid var(--text)}.spec div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--linje)}
.spec dt{color:var(--dim)}.spec dd{margin:0;font-weight:600;text-align:right}
.bilinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;margin-top:56px}
.utr{padding-left:18px}.utr li{margin:4px 0;break-inside:avoid}
.prisruta{background:var(--yta);padding:26px 28px;margin-top:28px;max-width:640px}.prisruta .stortpris{margin-top:0}
.steg{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;padding:0;margin:26px 0}
.steg li{counter-increment:s;border-top:2px solid var(--text);padding-top:14px}.steg li::before{content:"0" counter(s);font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--dim)}
.projekt{display:grid;gap:56px}.pbilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:14px}.pbilder img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}

.fot{background:var(--text);color:#cfcfd2;padding:56px clamp(18px,4vw,56px);font-size:14px}
.fot a{color:#fff}.fotgrid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.fot p{margin:.2em 0}.fot h4{color:#fff}.fotlogo{height:30px;margin-bottom:14px}

#lb{position:fixed;inset:0;background:rgba(0,0,0,.93);display:none;align-items:center;justify-content:center;z-index:100;cursor:zoom-out}
#lb.on{display:flex}#lb img{max-width:96vw;max-height:94vh;object-fit:contain}
@media(max-width:860px){
 .hero,.tva,.bilgrid,.fotgrid{grid-template-columns:1fr}.bilgrid{grid-template-areas:"gal" "fakta" "besk"}.utr.tvakol{columns:1}.herobild{order:-1}.herobild img{min-height:240px}
 .menyikon{display:block}
 .topp nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:18px clamp(18px,4vw,56px);gap:14px;border-bottom:1px solid var(--linje)}
 .menyknapp:checked~nav{display:flex}}

.lan{max-width:var(--max);margin:0 auto}
.landel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);margin:28px 0 18px}
.lanform label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:600}
.lanform input,.lanform select,.kform input,.kform select,.kform textarea{display:block;width:100%;margin-top:6px;padding:12px;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1px solid var(--linje);border-radius:2px;text-transform:none;letter-spacing:0}
.lanform input[type=range]{padding:0;border:0;accent-color:var(--text)}
.lanform .fast{float:right;color:var(--text);font-weight:800;letter-spacing:0;text-transform:none;font-size:15px}
.lanres{background:#fff;padding:26px 28px;border:1px solid var(--linje)}
.lanres .stor span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lanres .stor strong{font-size:clamp(34px,5vw,52px);letter-spacing:-.02em;font-weight:800}
.lanres dl{margin:18px 0 0;border-top:1px solid var(--text)}.lanres dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--linje)}
.lanres dt{color:var(--dim)}.lanres dd{margin:0;font-weight:700}
.exempel{font-size:14px;background:#fff;border-left:3px solid var(--text);padding:12px 16px;margin:0 0 18px}
.juridik{font-size:13px;color:#444;max-width:900px}.juridik p{margin:.5em 0}
.kontaktgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:start}
.kform label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:600}
.kform label.kryss{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14px;color:var(--text);font-weight:400}
.kform label.kryss input{width:auto;margin-top:5px}
.honung{position:absolute;left:-9999px;height:0;overflow:hidden}
.formsvar{margin-top:14px;font-weight:600}.formsvar.fel{color:#b3261e}.formsvar.ok{color:var(--ok)}
.text h2{margin-top:2em;font-size:20px}.text h3{margin-top:1.4em}.text p,.text li{max-width:760px}
.text .utkast{background:var(--yta);padding:12px 16px;font-size:14px}
@media(max-width:860px){.landel,.kontaktgrid{grid-template-columns:1fr}}

.bilinfo.standard{border-top:1px solid var(--linje);padding-top:36px}.bilinfo.standard h2{font-size:15px;letter-spacing:.1em}
.forslag{background:#fff;border:1px solid var(--text);padding:26px 28px;margin:24px 0 8px}
.forslagpris{font-size:clamp(20px,3vw,28px);margin:.2em 0}.forslagpris strong{font-size:clamp(34px,6vw,56px);letter-spacing:-.02em;font-weight:800}
.forslagpris span{color:var(--dim);font-size:.7em}.forslagsub{margin:0 0 14px;color:#333}
.forslagtabell{width:100%;border-collapse:collapse;font-size:15px}.forslagtabell th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px 6px;border-bottom:1px solid var(--text)}
.forslagtabell td{padding:9px 6px;border-bottom:1px solid var(--linje)}.forslagvarn{font-size:14px;margin:14px 0 8px}
@media(max-width:700px){.forslagtabell{font-size:13px}.forslagtabell th{font-size:9px}}

.toppmanad{margin:.6em 0 0;font-size:15px;color:#333}.toppmanad a{color:inherit;text-decoration:none}.toppmanad strong{font-size:20px;color:#000}.toppmanad a:hover strong{text-decoration:underline}
.kortmanad{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--dim)}.kortmanad strong{color:#000;font-size:13px;font-weight:700}

/* Bildspel på startsidan */
.herobild{display:flex;flex-direction:column}
.bildspel{position:relative;flex:1;display:flex;flex-direction:column;min-height:320px}
.bs-vy{overflow:hidden;flex:1;position:relative;touch-action:pan-y}
.bs-spar{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.bs-bild{flex:0 0 100%;position:relative;display:block;min-height:320px}
.bs-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bs-pil{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#000;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px;transition:background .2s,transform .2s}
.bs-pil:hover{background:#fff;transform:scale(1.06)}.bs-pil:focus-visible,.bs-prickar button:focus-visible{outline:2px solid #000;outline-offset:2px}
.bs-fore{left:14px}.bs-nasta{right:14px}
.bs-prickar{display:flex;justify-content:center;gap:8px;padding:14px 0;background:#fff}
.bs-prickar button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:#c9c9c9;cursor:pointer;transition:width .3s,background .3s}
.bs-prickar button[aria-selected="true"]{width:24px;background:#000}
@media (max-width:820px){.bildspel,.bs-bild{min-height:240px}.bs-pil{width:38px;height:38px;font-size:22px}}
@media (prefers-reduced-motion:reduce){.bs-spar{transition:none}}

/* Verkstad */
.tjanstrutnat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:22px 0}
.tjanstkort{background:#fff;padding:24px 24px 20px;border-top:2px solid var(--text)}
.tjanstkort h3{margin:0 0 6px;font-size:19px}.tjanstkort p{margin:.5em 0}
.tjanstpris{font-weight:800;font-size:16px}.tjanstpris span{font-weight:400;color:var(--dim);font-size:13px}
.tjanstkort .utr{margin:6px 0 0}
.prissub{margin:-.2em 0 1em;color:var(--dim);font-size:14px}

/* Öppen bok och film */
.utr.check{list-style:none;padding-left:0}.utr.check li{padding-left:26px;position:relative}.utr.check li::before{content:"✓";position:absolute;left:0;font-weight:800}
.dokl{list-style:none;padding:0;margin:0}.dokl li{margin:6px 0}.dokl a{font-weight:700}
.oppenbok{border-top:1px solid #e3e3e0;padding-top:28px;margin-top:8px}
.bilfilm{margin:34px 0}.filmruta{position:relative;aspect-ratio:16/9;background:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:860px;color:#fff;padding:18px;text-align:center}
.filmruta .smalt{color:#bbb;max-width:520px;margin-top:14px}.filmruta iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.filmknapp{background:#fff;color:#000;border:0;padding:14px 28px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px;cursor:pointer}.filmknapp span{margin-right:8px}

.ingar{margin:.2em 0 1em;padding-left:1.1em;color:var(--dim);font-size:14px}.tilltitel{margin-top:36px}
.prislista{border-collapse:collapse;width:100%;max-width:640px;margin:.6em 0}.prislista td{padding:12px 0;border-bottom:1px solid var(--linje,rgba(128,128,128,.25))}.prislista td:last-child{text-align:right;font-weight:700;white-space:nowrap;padding-left:16px}
.prislista .fr{font-weight:400;font-size:13px}.prislista .tx{font-size:13px;font-weight:400}
.viktigt-rubrik{margin:1.2em 0 0;font-weight:700;font-size:14px}.ingar.viktigt{color:var(--text)}
.utr.tvakol{margin:0;padding-left:18px}.utr.tvakol li{margin:0 0 8px}

.jamfor,.egna{margin:14px 0}.jamfor summary,.egna summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none}
.jamfor summary::-webkit-details-marker,.egna summary::-webkit-details-marker{display:none}
.jamfor summary::before,.egna summary::before{content:"+";display:inline-block;width:1.2em;font-weight:800}
.jamfor[open]>summary::before,.egna[open]>summary::before{content:"–"}
.egna{border-top:1px solid var(--linje);margin-top:22px;padding-top:6px}.egna summary{font-size:17px}
@media(max-width:600px){
  .forslag{padding:20px 18px}
  .forslagtabell thead{display:none}
  .forslagtabell,.forslagtabell tbody{display:block}
  .forslagtabell tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--linje)}
  .forslagtabell td{border:0;padding:2px 0;font-size:14px}
  .forslagtabell td::before{content:attr(data-etikett);display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .forslagtabell td:first-child{grid-column:1/-1;font-weight:700}.forslagtabell td:first-child::before{display:none}
}
.herosek{margin:.2em 0 0;color:var(--dim);font-size:16px}.herosek a{color:var(--text);font-weight:600}
.h1sek{display:block;font-size:.52em;line-height:1.1;color:var(--dim);letter-spacing:-.01em;margin-top:.18em}
.hero h1.herorub{font-size:clamp(34px,5vw,64px);line-height:1.02}

.fotcopy{margin:28px 0 0;padding-top:18px;border-top:1px solid rgba(128,128,128,.25);font-size:.8rem;opacity:.7}

.bilkort .fslag{font-weight:600;color:var(--text,#111)}

.herotom{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:320px;padding:40px 28px;gap:6px}
.herobild .herotom img{width:min(300px,70%);height:auto;min-height:0;object-fit:contain;margin-bottom:18px}
@media(max-width:800px){.herobild:has(.herotom){order:0}.herotom{min-height:0;padding:36px 20px}}
.herotom p{margin:0;max-width:420px;color:var(--dim)}
.herotom .herotom-rub{color:var(--text);font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:uppercase}
.herotom .knappar{margin-top:18px;justify-content:center}