/* provsida: bilens bakdel som hero i full bredd, rött ända upp i menyn */
body.bil header{background:var(--red);--hh:84px;--lw:clamp(220px,21vw,360px)}
body.bil header.solid{border-color:rgba(0,0,0,.12)}
body.bil header .logo img{top:calc((var(--hh) - var(--lw) / 5.27) / 2)}
body.bil header.solid .logo img{width:220px;top:calc((var(--hh) - 42px) / 2)}
body.bil header nav .l{color:#fff}
body.bil header nav .l:hover{color:#FFD5CE}
body.bil header .hbtn{background:var(--ink);color:#fff}
body.bil header .menu{background:var(--ink)}
body.bil header .menu span{background:#fff}
body.bil .mnav{background:var(--red)}
body.bil .mnav a{color:#fff;border-color:rgba(255,255,255,.2)}

.bhero{background:var(--red);overflow:hidden;margin-top:calc(-1 * var(--hb));padding-top:var(--hb)}
/* menyn ligger genomskinlig över vägfotot högst upp, blir röd när man scrollar */
body.bil{--hb:84px}
body.bil header{transition:background-color .25s,border-color .3s}
body.bil header:not(.solid){background:transparent}

.bcar{position:relative;container-type:inline-size;width:min(90%,calc((100vh - var(--hh,84px) - 12px) * 1.265));margin:clamp(4px,1vw,16px) auto 0}
.bcar img{display:block;width:100%;height:auto}
/* vägen bakom bilen, knappt synlig: det röda tar över */
.bcar img.bvag{position:absolute;left:50%;width:max(var(--vz),var(--vb));translate:-50% var(--vhz);max-width:none;height:auto;z-index:0;opacity:var(--vag,.5);pointer-events:none}
.bcar img.bbil{position:relative;z-index:1}
.bplate{z-index:2}
/* regnummerfältet ligger på den renderade skylten: bara texten är HTML */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bplate{position:absolute;left:var(--px);top:var(--py);width:var(--pw);height:var(--ph);display:flex;border-radius:3px}
/* texten skrivs direkt på skylten: ingen ram, bara markören */
.bplate input{flex:1;min-width:0;border:0;background:transparent;padding:0 0 0 9%;text-align:center;text-transform:uppercase;outline:none;
  font:600 calc(var(--pwn) * .2cqw)/1 'Barlow Semi Condensed','Barlow Condensed',Arial Narrow,sans-serif;letter-spacing:.02em;color:#141414;
  text-shadow:0 .035em .03em rgba(0,0,0,.35),0 -.02em 0 rgba(255,255,255,.5);caret-color:#E3200F;mix-blend-mode:multiply}
/* texten trycks in i skylten: multiply låter skyltens ljus och korn synas genom bokstäverna, skuggan ger prägling */
.bhint{position:absolute;inset:0 0 0 9%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font:600 calc(var(--pwn) * .1cqw)/1 'Barlow Semi Condensed','Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#141414;transition:opacity .15s;mix-blend-mode:multiply;text-shadow:0 .035em .03em rgba(0,0,0,.35),0 -.02em 0 rgba(255,255,255,.5)}
/* som en riktig skylt (DIN-likt, fett, präglat): Barlow Semi Condensed, tät spärrning, skugga nertill */
.bhint b{font-weight:inherit;white-space:pre}
.bhint i{width:.12em;height:1.25em;margin-left:.25em;background:#E3200F;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bplate:focus-within .bhint,.bplate.har .bhint{opacity:0}
@media(prefers-reduced-motion:reduce){.bhint i{animation:none}}
/* knappen glider fram under skylten när det står något på den, med regnumret i */
.bok{position:absolute;left:50%;top:calc(100% + 1.5cqw);translate:-50% -6px;width:max-content;min-width:100%;min-height:max(52px,4.2cqw);box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 8px 0 22px;border:0;border-radius:10px;background:#111;color:#fff;
  font:600 max(15px,1.25cqw)/1 Inter,sans-serif;cursor:pointer;box-shadow:0 18px 36px -14px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .2s,translate .3s cubic-bezier(.2,.8,.2,1),background .15s}
.bok b{font:600 1.18em/1 'Barlow Condensed',sans-serif;letter-spacing:.06em}
.bok i{display:grid;place-items:center;width:max(38px,3.1cqw);aspect-ratio:1;border-radius:7px;background:#E3200F;transition:transform .2s}
.bok svg{width:45%;height:45%}
.bplate.har .bok{opacity:1;translate:-50% 0;pointer-events:auto}
.bok:hover{background:#000}
.bok:hover i{transform:translateX(3px)}
.bok:focus-visible{outline:2px solid #111;outline-offset:3px}
@media(max-width:900px){
  body.bil header{--hh:68px;--lw:min(210px,54vw)}
  body.bil{--hb:68px}
      .bcar{width:108%;margin-left:-4%;max-width:none}
  /* bara skylten på bilen i mobilen: fältet växer osynligt till 44 px tryckyta, 16 px text så iPhone inte zoomar */
  .bplate input{margin-block:-13px;font-size:max(16px,calc(var(--pwn) * .2cqw))}
  .bok{top:calc(100% + 10px);min-height:48px}
}
/* loggan uppe till vänster i menyn; bakrutan bär sloganen. Menyn står i mitten, loggan krymper när man scrollar */
body.bil header .wrap{position:relative;justify-content:center}
body.bil header nav{margin:0 auto}
body.bil header .logo{position:absolute;left:var(--pad);top:0;height:var(--hh);width:var(--lw)}
body.bil header.solid .logo,body.bil header:has(.mnav:not([hidden])) .logo{width:220px}
body.bil header.solid .logo img,body.bil header:has(.mnav:not([hidden])) .logo img{width:220px;top:calc((var(--hh) - 42px) / 2)}
@media(max-width:1199px){body.bil header .wrap{justify-content:flex-end}body.bil header nav{margin:0}}
@media(max-width:600px){body.bil header.solid .logo,body.bil header:has(.mnav:not([hidden])) .logo{width:160px}body.bil header.solid .logo img,body.bil header:has(.mnav:not([hidden])) .logo img{width:160px;top:calc((var(--hh) - 30px) / 2)}}

/* Fast eller avtagbar: närbild från samma 3D-scen, siffror direkt på bilden */
.bkrok{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#F4F3EF}
.bkb{position:relative}
.bkrok img{display:block;width:100%;height:auto;transition:opacity .45s}
.bkrok img+img{position:absolute;inset:0}
.bkrok img:not(.on){opacity:0}
.bkrok .pt{position:absolute;translate:-50% -50%;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:800 italic 14px/1 Archivo;box-shadow:0 0 0 4px rgba(255,255,255,.85);transition:opacity .3s}
.bkrok[data-m="fast"] .pt[data-m="avt"],.bkrok[data-m="avt"] .pt[data-m="fast"],.bkrok:not([data-m]) .pt[data-m="avt"]{opacity:0}
.bkrok figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px clamp(14px,2vw,24px)}
.bkrok ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bkrok li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.35}
.bkrok li b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:800 italic 12px/1 Archivo}
.bkrok li strong{display:block;font-weight:700;color:var(--ink)}
.bkrok li em{font-style:normal;color:var(--mute)}
@media(max-width:700px){.bkrok figcaption{position:static;background:#F4F3EF}.bkrok ol{grid-template-columns:1fr}}
/* foton i samma stil: svartvitt med kontrast, så det röda bär sidan */
body.bil .tj figure img,body.bil .st figure img{filter:grayscale(1) contrast(1.12) brightness(.96)}
body.bil .tj .card .pr,body.bil .st .pr{background:var(--ink);color:#fff;border-radius:4px}
body.bil .st .n{border-radius:6px}

/* Det här gör vi: platta rutor som läses uppifrån och ner: tjänst, en rad, pris. Svart vid hover som hjältens knapp */
.tlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.tlist a{display:flex;flex-direction:column;height:100%;min-height:180px;padding:clamp(18px,2vw,28px);border-radius:var(--r-s);background:var(--soft);color:var(--ink);transition:background .2s,color .2s}
.tlist b{font:800 italic clamp(22px,1.9vw,30px)/1.05 Archivo;letter-spacing:-.025em}
.tlist em{font-style:normal;font-size:15px;color:var(--mute);margin-top:6px;transition:color .2s}
.tlist .tp{margin-top:auto;padding-top:20px;font:800 italic clamp(20px,1.6vw,26px)/1 Archivo;letter-spacing:-.02em;color:var(--red);transition:color .2s}
.tlist .tp small{font:600 13px Inter;font-style:normal;letter-spacing:0;color:var(--mute);margin-right:4px;transition:color .2s}
.tlist a:hover{background:var(--ink);color:#fff}
.tlist a:hover em,.tlist a:hover small{color:rgba(255,255,255,.62)}
.tlist a:hover .tp{color:#fff}
.tlist a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:900px){.tlist{grid-template-columns:repeat(2,1fr)}.tlist a{min-height:150px;padding:16px}.tlist em{font-size:14px}}

/* Jonas: svart band, porträttet i full höjd till vänster, texten luftigt till höger */
.bjonas{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff;margin-top:clamp(8px,1vw,16px)}
.bj-f{margin:0;position:relative;min-height:clamp(480px,46vw,720px)}
.bj-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.12) brightness(.92)}
.bj-t{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding:clamp(48px,6vw,112px) var(--pad) clamp(48px,6vw,112px) clamp(32px,6vw,112px);max-width:760px}
.bjonas blockquote{font:800 italic clamp(40px,4.6vw,80px)/.98 Archivo;letter-spacing:-.03em;word-spacing:.06em;color:#fff;margin:0}
.bjonas blockquote span{display:block;color:var(--red)}
.bj-t>p{font-size:18px;line-height:1.5;color:rgba(255,255,255,.7);max-width:30ch}
.bj-t dl{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);margin:8px 0 0;width:100%;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.bj-t dt{font:800 italic clamp(22px,2vw,30px)/1 Archivo;letter-spacing:-.02em}
.bj-t dd{margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.58)}
.bjonas .more{color:#fff;border-color:#fff;margin-top:4px}
.bjonas .more svg{width:16px;height:16px}
@media(max-width:900px){
  .bjonas{grid-template-columns:1fr}
  .bj-f{min-height:0;aspect-ratio:4/3.8}
  .bj-f img{object-position:50% 4%}
  .bj-t{padding:40px var(--pad) 52px;gap:20px}
  .bj-t dl{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:380px){.bj-t dl{grid-template-columns:1fr}}
/* frågorna i rubrikstilen */
body.bil .q button{font:800 italic clamp(19px,1.5vw,23px)/1.15 Archivo;letter-spacing:-.02em;min-height:72px}
body.bil .q .a p{font-size:16px;color:var(--mute)}
body.bil .q{border-color:var(--line)}
body.bil .faq .fgrid>div{border-bottom:1px solid var(--line)}
/* kontakt och sidfot i ett rött block */
body.bil .contact{padding-block:clamp(56px,6vw,96px) clamp(40px,4vw,64px)}
body.bil .form .btn{min-height:52px}
.bfot{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-block:28px;border-top:1px solid rgba(255,255,255,.3)}
.bfot img{height:34px;width:auto}
.bfot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.bfot nav a{display:inline-flex;align-items:center;min-height:44px;font:600 15px Inter;color:#fff}
.bfot nav a:hover{text-decoration:underline;text-underline-offset:4px}
.bfbar{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-bottom:28px;font:500 12px/1.5 Inter;color:rgba(255,255,255,.72)}
@media(max-width:900px){
  .bfot{flex-direction:column;align-items:flex-start}
  .bfot nav{display:grid;grid-template-columns:1fr 1fr;width:100%}
}
/* telefonnumret över skarven vitt/rött: samma text, röd på den vita halvan och vit på den röda */
.bskarv{display:block;overflow:hidden;margin-top:clamp(24px,3vw,48px);background:linear-gradient(#fff 50%,var(--red) 50%)}
.bskarv b{display:block;width:max-content;padding-right:.06em;font:800 italic calc((min(100vw,var(--max)) - 2 * var(--pad)) / 6.75)/.86 Archivo;letter-spacing:-.035em;word-spacing:.04em;white-space:nowrap;
  background:linear-gradient(var(--red) 50%,#fff 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bskarv:hover b{background:linear-gradient(var(--ink) 50%,#fff 50%);-webkit-background-clip:text;background-clip:text}
.bskarv:focus-visible{outline:none}.bskarv:focus-visible b{outline:3px solid var(--ink);outline-offset:4px}
body.bil .bskarv+.contact{padding-top:clamp(28px,3vw,48px)}
body.bil .bskarv+.contact .cinfo{margin-top:0}
.bskarv .wrap{display:block}
body.bil .bskarv+.contact .contact-box{align-items:start}
body.bil .bskarv+.contact .cinfo{border-top:0;padding-top:clamp(8px,1vw,16px);font-size:17px}
/* loggan över skarven (SKARV = logga i bil.py) */
body.bil .bskarvl{margin-top:clamp(24px,3vw,48px)}
body.bil .bskarvl img{width:100%;max-width:none}
body.bil .bskarvl+.contact{padding-top:clamp(28px,3vw,56px)}
/* skarven går genom loggans visuella mitt (tyngdpunkt 0,58 ur sticker.py) */
body.bil .bskarvl{background:linear-gradient(#fff 58%,var(--red) 58%)}
body.bil .bskarvl img{display:block}
body.bil .bfbar{padding-top:20px;border-top:1px solid rgba(255,255,255,.25);font-size:12px;color:rgba(255,255,255,.6)}
/* utan kontur: skarven mitt genom svarta DRAGMONTERING-blocket (80,9 % av loggans höjd) */
body.bil .bskarvl{background:linear-gradient(#fff 74%,var(--red) 74%)}
/* förfrågan i kontaktblocket */
.bforfr{gap:14px}
.bforfr .ff2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bforfr textarea.f{min-height:96px;padding:12px;resize:vertical;line-height:1.45}
.bforfr textarea.f::placeholder{color:#9A9893}
.bforfr .btn{min-height:52px;width:100%}
@media(max-width:380px){.bforfr .ff2{grid-template-columns:1fr}}

/* skylten i priskollen: samma EU-fält som på bilen (mättat blått, tolv gula stjärnor, vitt S) */
body.bil .plate .eu{width:36px;background:#0A46E4 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20fill%3D%22%23FFCC00%22%3E%3Cpolygon%20points%3D%2220.00%2C3.60%2020.80%2C5.90%2023.23%2C5.95%2021.29%2C7.42%2022.00%2C9.75%2020.00%2C8.36%2018.00%2C9.75%2018.71%2C7.42%2016.77%2C5.95%2019.20%2C5.90%22/%3E%3Cpolygon%20points%3D%2226.50%2C5.34%2027.30%2C7.64%2029.73%2C7.69%2027.79%2C9.16%2028.50%2C11.49%2026.50%2C10.10%2024.50%2C11.49%2025.21%2C9.16%2023.27%2C7.69%2025.70%2C7.64%22/%3E%3Cpolygon%20points%3D%2231.26%2C10.10%2032.06%2C12.40%2034.49%2C12.45%2032.55%2C13.92%2033.26%2C16.25%2031.26%2C14.86%2029.26%2C16.25%2029.96%2C13.92%2028.02%2C12.45%2030.46%2C12.40%22/%3E%3Cpolygon%20points%3D%2233.00%2C16.60%2033.80%2C18.90%2036.23%2C18.95%2034.29%2C20.42%2035.00%2C22.75%2033.00%2C21.36%2031.00%2C22.75%2031.71%2C20.42%2029.77%2C18.95%2032.20%2C18.90%22/%3E%3Cpolygon%20points%3D%2231.26%2C23.10%2032.06%2C25.40%2034.49%2C25.45%2032.55%2C26.92%2033.26%2C29.25%2031.26%2C27.86%2029.26%2C29.25%2029.96%2C26.92%2028.02%2C25.45%2030.46%2C25.40%22/%3E%3Cpolygon%20points%3D%2226.50%2C27.86%2027.30%2C30.16%2029.73%2C30.21%2027.79%2C31.68%2028.50%2C34.01%2026.50%2C32.62%2024.50%2C34.01%2025.21%2C31.68%2023.27%2C30.21%2025.70%2C30.16%22/%3E%3Cpolygon%20points%3D%2220.00%2C29.60%2020.80%2C31.90%2023.23%2C31.95%2021.29%2C33.42%2022.00%2C35.75%2020.00%2C34.36%2018.00%2C35.75%2018.71%2C33.42%2016.77%2C31.95%2019.20%2C31.90%22/%3E%3Cpolygon%20points%3D%2213.50%2C27.86%2014.30%2C30.16%2016.73%2C30.21%2014.79%2C31.68%2015.50%2C34.01%2013.50%2C32.62%2011.50%2C34.01%2012.21%2C31.68%2010.27%2C30.21%2012.70%2C30.16%22/%3E%3Cpolygon%20points%3D%228.74%2C23.10%209.54%2C25.40%2011.98%2C25.45%2010.04%2C26.92%2010.74%2C29.25%208.74%2C27.86%206.74%2C29.25%207.45%2C26.92%205.51%2C25.45%207.94%2C25.40%22/%3E%3Cpolygon%20points%3D%227.00%2C16.60%207.80%2C18.90%2010.23%2C18.95%208.29%2C20.42%209.00%2C22.75%207.00%2C21.36%205.00%2C22.75%205.71%2C20.42%203.77%2C18.95%206.20%2C18.90%22/%3E%3Cpolygon%20points%3D%228.74%2C10.10%209.54%2C12.40%2011.98%2C12.45%2010.04%2C13.92%2010.74%2C16.25%208.74%2C14.86%206.74%2C16.25%207.45%2C13.92%205.51%2C12.45%207.94%2C12.40%22/%3E%3Cpolygon%20points%3D%2213.50%2C5.34%2014.30%2C7.64%2016.73%2C7.69%2014.79%2C9.16%2015.50%2C11.49%2013.50%2C10.10%2011.50%2C11.49%2012.21%2C9.16%2010.27%2C7.69%2012.70%2C7.64%22/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 7px/20px 20px;padding-bottom:7px;font:400 15px/1 Arial,sans-serif;color:#fff}
body.bil .contact-box{align-items:start}

/* Tre steg i mobil: lika höga bilder och luft mellan stegen */
@media(max-width:900px){body.bil .st figure{min-height:0;height:auto;aspect-ratio:1/1}body.bil .st figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}body.bil .sgrid{gap:18px}}
/* sidfoten: läsbar text på rött */
body.bil .bfbar{color:rgba(255,255,255,.85)}
/* undersidorna: samma röda meny, loggan syns hela tiden till vänster */
body.bil.sub header .wrap{justify-content:space-between}
body.bil.sub header nav{margin:0}
body.bil.sub header .logo{position:relative;left:auto;opacity:1;visibility:visible;width:220px}
body.bil.sub header .logo img{width:220px;top:calc((var(--hh) - 42px) / 2)}
@media(max-width:600px){body.bil.sub header .logo,body.bil.sub header .logo img{width:160px}body.bil.sub header .logo img{top:calc((var(--hh) - 30px) / 2)}}
body.bil.sub header,body.bil.sub header:not(.solid){background:var(--red)}
body.bil header nav a.l:hover,body.bil header nav a.l.cur{background:rgba(255,255,255,.16);color:#fff}
body.bil .kgrid .bforfr{background:var(--soft);border-radius:var(--r);padding:clamp(20px,2.4vw,32px)}
/* undersidornas foton i samma svartvita ton som startsidan */
body.bil.sub .phero figure img,body.bil.sub .svcrow img,body.bil.sub .gal img{filter:grayscale(1) contrast(1.12) brightness(.96)}
/* ankarlänkar hamnar under den fasta menyn */
body.bil [id]{scroll-margin-top:100px}

/* helheten 30/10: Jonas utan foto, Tre steg på rött band med samma röda bil, närbilderna på rött */
body.bil .bj-solo{grid-template-columns:1fr}
body.bil .bj-solo .bj-t{max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(32px,6vw,120px);align-items:end;padding:clamp(56px,7vw,120px) var(--pad)}
body.bil .bj-solo blockquote{grid-row:span 3;align-self:center}
@media(max-width:900px){body.bil .bj-solo .bj-t{grid-template-columns:1fr;padding:48px var(--pad) 56px}body.bil .bj-solo blockquote{grid-row:auto}}
body.bil .bsteg{background:var(--red);color:#fff}
body.bil .bsteg h2,body.bil .bsteg h2 .red{color:#fff}
body.bil .bsteg h2 .red{color:var(--ink)}
body.bil .bsteg .st p{color:rgba(255,255,255,.82)}
body.bil .bsteg .st .n{background:#fff;color:var(--red)}
body.bil .bsteg .st figure img{filter:none;object-fit:cover;width:100%;height:100%}
body.bil .bsteg .st figure{background:#c81c0d}
body.bil .bkrok .pt{background:var(--ink)}
body.bil .bkrok figcaption{color:#fff}
body.bil .bkrok figcaption em{color:rgba(255,255,255,.78)}
body.bil .bkrok figcaption b{background:#fff;color:var(--red)}
body.bil .bj-solo .more{justify-self:start}
@media(max-width:700px){body.bil .bkrok figcaption{background:#d61e0e}}
body.bil .bkrok figcaption strong{color:#fff}
body.bil .bsteg .st:nth-child(1) figure img{object-position:50% 50%}
body.bil .bsteg .st:nth-child(3) figure img{object-position:50% 50%}
body.bil .mono{text-transform:none;letter-spacing:0;font-size:13px}