@font-face{font-family:'Archivo';src:url(/fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Public Sans';src:url(/fonts/public-sans.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Anybody';src:url(/fonts/anybody.woff2) format('woff2');font-weight:100 900;font-stretch:50% 150%;font-display:swap;unicode-range:U+26}

:root{
  --skiffer:#000000; --skiffer-2:#0D0D0D; --tegel:#D4AF37; --tegel-mork:#9C7A2E;
  --kalk:#F1F0EC; --plat:#8E8E8E; --vit:#FFFFFF; --text:#000000; --mjuk:#5E5E5E;
  --max:1160px; --rad:6px;
  --rubrik:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brod:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;overflow-x:hidden;font-family:var(--brod);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--kalk)}
img,video{max-width:100%;display:block}
a{color:var(--tegel)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--tegel);outline-offset:3px}
h1,h2,h3{font-family:var(--rubrik);font-stretch:118%;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:750}
h3{font-size:1.25rem;font-weight:700;font-stretch:108%}
p{margin:0 0 1em;max-width:68ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.skip{position:absolute;left:-999px;top:0;background:var(--vit);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* Header */
.topp{position:absolute;top:0;left:0;right:0;z-index:50;background:transparent;color:var(--vit)}
.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.logga{display:flex;align-items:center;gap:.55rem;color:var(--vit);text-decoration:none;font-family:var(--rubrik);font-stretch:125%;font-weight:800;font-size:1.45rem;letter-spacing:.02em}
.logga img{height:52px;width:auto}
.fot .logga img{height:64px}
.meny{display:flex;align-items:center;gap:1.4rem}
.meny a{color:#E2E2E2;text-decoration:none;font-weight:600;font-size:.98rem}
.meny a:hover,.meny a[aria-current="page"]{color:var(--vit);text-decoration:underline;text-decoration-color:var(--tegel);text-decoration-thickness:3px;text-underline-offset:8px}
.ring{background:var(--tegel);color:var(--vit)!important;padding:.55rem 1rem;border-radius:var(--rad);text-decoration:none!important;white-space:nowrap}
.ring:hover{background:var(--tegel-mork)}
.menyknapp{display:none;background:none;border:2px solid #444444;color:var(--vit);border-radius:var(--rad);padding:.45rem .7rem;font:600 .95rem var(--brod);cursor:pointer}
@media (max-width:1100px){
  .menyknapp{display:block}
  .meny{position:absolute;left:0;right:0;top:68px;background:var(--skiffer);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.1rem 1.2rem;display:none;border-top:1px solid #1C1C1C}
  .meny.oppen{display:flex}
  .meny a{padding:.8rem 0;border-bottom:1px solid #1C1C1C}
  .meny .ring{margin-top:.9rem;text-align:center;border-bottom:0}
}

/* Hero */
.hero{position:relative;color:var(--vit);background:var(--skiffer) linear-gradient(160deg,#0D0D0D 0%,#000000 60%);overflow:hidden;min-height:min(88vh,760px);display:flex;align-items:flex-end}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}

.hero .wrap{position:relative;z-index:2;padding-top:calc(88px + 4rem);padding-bottom:clamp(5rem,12vw,8rem);width:100%}
.hero h1{max-width:14ch;text-wrap:balance}
.hero p{font-size:1.2rem;color:#EDEDED;max-width:52ch}
.knappar{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.knapp{display:inline-block;padding:.95rem 1.35rem;border-radius:var(--rad);font-weight:700;text-decoration:none;border:2px solid transparent;font-size:1.02rem;cursor:pointer;font-family:var(--brod)}
.knapp.primar{background:var(--tegel);color:var(--vit)}
.knapp.primar:hover{background:var(--tegel-mork)}
.knapp.sekundar{border-color:rgba(255,255,255,.75);color:var(--vit)}
.knapp.sekundar:hover{background:rgba(255,255,255,.1)}
.knapp.mork{border-color:var(--skiffer);color:var(--skiffer)}
.knapp.mork:hover{background:var(--skiffer);color:var(--vit)}

/* Gable divider: the roof line */
.gavel{display:block;width:100%;height:clamp(36px,6vw,80px);color:var(--kalk);margin-top:-1px}
.gavel-hero{position:absolute;left:0;right:0;bottom:-1px;z-index:3}
.gavel.vit{color:var(--vit)}

section{padding:clamp(3.5rem,8vw,6rem) 0}
.ingress{font-size:1.2rem;color:var(--mjuk);max-width:60ch}

/* Services: asymmetrical rows rather than identical cards */
.tjanster{display:grid;gap:0;border-top:2px solid var(--skiffer);margin-top:2.2rem}
.tjanst{display:grid;grid-template-columns:15rem 1fr 11rem;gap:1.5rem;align-items:baseline;padding:1.6rem 0;border-bottom:1px solid #CFCFCF;text-decoration:none;color:inherit}
.tjanst h3{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;font-stretch:122%}
.tjanst p{margin:0;color:var(--mjuk)}
.tjanst .pris{font-weight:700;color:var(--tegel);white-space:nowrap;text-align:right}
.tjanst:hover h3{color:var(--tegel)}
@media (max-width:820px){.tjanst{grid-template-columns:1fr;gap:.4rem}.tjanst .pris{text-align:left}}

/* Calculator — the signature element */
.kalkyl-sektion{background:var(--skiffer);color:var(--vit)}
.kalkyl-sektion .ingress{color:#CFCFCF}
.kalkyl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:2rem;align-items:stretch}
@media (max-width:820px){.kalkyl{grid-template-columns:minmax(0,1fr)}}
.falt{margin-bottom:1.5rem}
.falt label,.falt legend{display:block;font-weight:700;margin-bottom:.5rem}
.falt .hjalp{font-size:.92rem;color:#B5B5B5;margin:.4rem 0 0}
.yta-rad{display:flex;gap:1rem;align-items:center}
.yta-rad input[type=range]{flex:1;min-width:0;accent-color:var(--tegel)}
.yta-rad input[type=number]{width:6.5rem}
.kalkyl input[type=number],.kalkyl select{background:var(--skiffer-2);color:var(--vit);border:2px solid #444444;border-radius:var(--rad);padding:.6rem .7rem;font:inherit}
fieldset{border:0;padding:0;margin:0}
.material{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.material.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.material.tre label{padding:.7rem .65rem;font-size:.95rem}
@media (max-width:520px){.material.tre{grid-template-columns:1fr}}
@media (max-width:420px){.material{grid-template-columns:1fr}}
.material label{display:flex;gap:.6rem;align-items:center;border:2px solid #444444;border-radius:var(--rad);padding:.75rem .85rem;cursor:pointer;font-weight:600;margin:0}
.material input{accent-color:var(--tegel)}
.material label:has(input:checked){border-color:var(--tegel);background:rgba(212,175,55,.18)}
.resultat{background:var(--kalk);color:var(--skiffer);border-radius:var(--rad);padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:space-between}
.resultat .etikett{font-weight:600;color:var(--mjuk);margin:0}
.resultat .belopp{font-family:var(--rubrik);font-stretch:125%;font-weight:800;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.05;margin:.3rem 0 .8rem;color:var(--skiffer)}
.resultat .detalj{color:var(--mjuk);font-size:.98rem}
.resultat .knapp{margin-top:1rem;text-align:center}

/* Two-column text */
.delad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
@media (max-width:820px){.delad{grid-template-columns:1fr}}
.fakta{list-style:none;padding:0;margin:0;border-left:4px solid var(--tegel)}
.fakta li{padding:.65rem 0 .65rem 1.1rem}
ol.fakta{counter-reset:steg}
ol.fakta li{counter-increment:steg;position:relative;padding-left:3.2rem}
ol.fakta li::before{content:counter(steg);position:absolute;left:1.1rem;top:.6rem;font-family:var(--rubrik);font-weight:800;font-size:1.3rem;color:var(--tegel)}
.fakta strong{display:block;font-family:var(--rubrik);font-stretch:115%;font-size:1.1rem}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid #CFCFCF}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font-family:var(--rubrik);font-stretch:110%;font-weight:700;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--tegel);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.1rem;color:var(--mjuk);margin:0}

/* Page header */
.sidhuvud{background:var(--skiffer);color:var(--vit);padding:calc(88px + clamp(3rem,7vw,5rem)) 0 clamp(1rem,3vw,2rem)}
.sidhuvud p{color:#D6D6D6;font-size:1.15rem}

/* CTA band */
.cta{background:var(--tegel);color:var(--vit);text-align:left}
.cta .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.cta h2{margin:0;max-width:20ch}
.cta .knapp.sekundar:hover{background:rgba(0,0,0,.12)}

/* Form */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:720px}
.formular .hel{grid-column:1/-1}
.formular label{display:block;font-weight:700;margin-bottom:.35rem}
.formular input,.formular textarea{width:100%;font:inherit;padding:.75rem .8rem;border:2px solid #BDBDBD;border-radius:var(--rad);background:var(--vit);color:var(--text)}
.formular input:focus,.formular textarea:focus{border-color:var(--skiffer)}
.formular textarea{min-height:160px;resize:vertical}
.valfri{font-weight:400;color:var(--mjuk)}
@media (max-width:600px){.formular{grid-template-columns:1fr}}
.dold{position:absolute!important;left:-9999px!important}
.kontaktsatt{list-style:none;padding:0;margin:0 0 2rem}
.kontaktsatt li{margin-bottom:.7rem;font-size:1.15rem}
.kontaktsatt a{font-weight:700;color:var(--skiffer)}

/* Footer */
.fot{background:var(--skiffer);color:#CFCFCF;padding:3rem 0 2rem;font-size:.97rem}
.fot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.fot a{color:var(--vit)}
.fot h3{color:var(--vit);font-size:1.05rem}
.fot ul{list-style:none;padding:0;margin:0}
.fot li{margin-bottom:.35rem}
.fot .rad{grid-column:1/-1;max-width:none;border-top:1px solid #1C1C1C;padding-top:1.2rem;margin-top:1rem;font-size:.88rem;color:#9A9A9A}
@media (max-width:760px){.fot .wrap{grid-template-columns:1fr}}

/* Tjänstekort (som Setterman) */
.tjanster-head{display:grid;gap:1rem;margin-bottom:2.5rem}
@media (min-width:900px){.tjanster-head{grid-template-columns:1fr 1fr;align-items:end}}
.tjanster-head h2{margin:0}
.tjanster-head .ingress{margin:0}
.kort-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (min-width:900px){.kort-grid{grid-template-columns:repeat(3,1fr)}}
.kort{display:flex;flex-direction:column;background:var(--vit);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.08);border-bottom:4px solid transparent;transition:border-color .25s,transform .25s}
.kort:hover{border-bottom-color:var(--tegel);transform:translateY(-4px)}
.kort-bild{aspect-ratio:4/3;overflow:hidden;background:var(--skiffer-2)}
.kort-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.kort:hover .kort-bild img{transform:scale(1.05)}
.kort h3{font-size:1.45rem;margin:1.2rem 1.3rem .5rem;font-stretch:120%}
.kort p{margin:0 1.3rem 1rem;color:var(--mjuk);line-height:1.55}
.kort-lank{margin:auto 1.3rem 1.4rem;font-weight:700;color:var(--tegel)}
.kort-cta{background:var(--skiffer);color:var(--vit);justify-content:center;padding:1.5rem .2rem}
.kort-cta p{color:#CFCFCF}
.kort-cta .knapp{align-self:flex-start;margin:.5rem 1.3rem 0}
@media (prefers-reduced-motion:reduce){.kort,.kort-bild img{transition:none}.kort:hover{transform:none}}
.hero h1,.hero p{text-shadow:0 2px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}

/* Guldknappar */
:root{--guld:#D4AF37;--guld-mork:#9C7A2E}
.knapp.primar,.ring{background:var(--guld)!important;color:#000000!important}
.knapp.primar:hover,.ring:hover{background:var(--guld-mork)!important}
.kort-cta .knapp{background:var(--guld);color:#000000}

.kalkyl-sektion + .kalkyl-sektion{border-top:1px solid #1C1C1C}

@media (min-width:1101px){.meny a:not(.ring){text-shadow:0 1px 8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}}

/* Takvideo bakom takkalkylatorn */
.kalkyl-sektion.med-video{position:relative;overflow:hidden;background:#000000}
.kalkyl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.kalkyl-sektion.med-video::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.kalkyl-sektion.med-video .wrap{position:relative;z-index:2}
.kalkyl-sektion.med-video h2,.kalkyl-sektion.med-video .ingress,.kalkyl-sektion.med-video legend{text-shadow:0 1px 6px rgba(0,0,0,.6)}
.kalkyl-sektion.med-video .material label{background:rgba(0,0,0,.6)}

/* Guld överallt */
a,.kort-lank,.tjanst .pris,ol.fakta li::before,.faq summary::after,.tjanst:hover h3{color:#86671F}
.knapp{color:inherit}
.fot a{color:#FFFFFF}
.meny a{color:#E2E2E2}
.meny a:hover,.meny a[aria-current="page"]{color:#FFFFFF}
.kontaktsatt a{color:#000000}
.cta{background:var(--tegel);color:#000000}
.cta .knapp.sekundar{border-color:rgba(0,0,0,.85);color:#000000}
.cta .knapp.sekundar:hover{background:rgba(0,0,0,.08)}

/* Shiny guld (som Setterman) */
:root{--guld-grad:linear-gradient(135deg,#7a5a22 0%,#b8913f 16%,#f3dfa0 34%,#d4af37 50%,#fbeec0 62%,#b38b34 80%,#6b4f1c 100%);--guld-grad-hover:linear-gradient(135deg,#6b4f1c 0%,#c9a24a 30%,#f3dfa0 50%,#b38b34 75%,#5e4416 100%);--tegel:#D4AF37;--guld:#D4AF37}
.knapp.primar,.ring,.kort-cta .knapp{background:var(--guld-grad)!important;color:#000000!important;border:0;box-shadow:0 6px 18px rgba(212,175,55,.28);transition:transform .2s,box-shadow .2s}
.knapp.primar:hover,.ring:hover,.kort-cta .knapp:hover{background:var(--guld-grad-hover)!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,175,55,.35)}
.cta{background:var(--guld-grad)}
@media (prefers-reduced-motion:reduce){.knapp.primar:hover,.ring:hover{transform:none}}

/* Hero helskärm */
.hero{min-height:100vh;min-height:100svh}

/* Tak-topp: video bakom rubrik och kalkylator */
.tak-topp{position:relative;overflow:hidden;color:#FFFFFF;background:#000000;min-height:100vh;min-height:100svh;padding:calc(88px + clamp(2rem,5vw,3.5rem)) 0 clamp(5rem,10vw,7rem)}
.tak-topp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tak-topp::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1}
.tak-topp .wrap{position:relative;z-index:2}
.tak-topp h1,.tak-topp>.wrap>p,.tak-topp legend{text-shadow:0 2px 10px rgba(0,0,0,.6)}
.tak-topp>.wrap>p{font-size:1.15rem;color:#EDEDED}
.tak-topp .kalkyl{margin-top:1.5rem}
.tak-topp .material label{background:rgba(0,0,0,.6)}

/* CTA med formulär */
.cta-form .wrap{display:grid;align-items:start}
.cta-form h2{max-width:16ch;margin-bottom:1.5rem}
.cta-tel-etikett{margin:0;font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.cta-tel{display:inline-block;font-family:var(--rubrik);font-stretch:118%;font-weight:800;font-size:clamp(2rem,5vw,3rem);color:#000000!important;text-decoration:none;margin:.2rem 0 1rem}
.cta-tel:hover{text-decoration:underline;text-underline-offset:6px}
.cta-text{max-width:38ch;font-size:1.05rem}
.cta-form .formular{max-width:none}
.cta-form .formular input,.cta-form .formular textarea{border-color:rgba(0,0,0,.35);background:rgba(255,255,255,.92)}
.cta-form .formular input:focus,.cta-form .formular textarea:focus{border-color:#000000}
.cta-form .valfri{color:rgba(0,0,0,.65)}
.cta-form .knapp.primar{background:#000000!important;color:#FFFFFF!important;box-shadow:none}
.cta-form .knapp.primar:hover{background:#151515!important}

/* Välkomnande herotext */
.hero .wrap>p{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-variation-settings:"SOFT" 100;font-weight:500;font-size:clamp(1.45rem,2.8vw,2.15rem);line-height:1.35;letter-spacing:-.005em;max-width:30ch;color:#FFFFFF;text-wrap:pretty}

/* Större logga */
.topp .wrap{min-height:88px}
.topp .logga img{height:72px;width:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
@media (max-width:1100px){.topp .wrap{min-height:76px}.topp .logga img{height:60px}.meny{top:76px}}

/* Hero som Setterman */
.hero h1{font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;font-weight:800;margin:0 0 1.2rem;max-width:none}
.hero .wrap>p{font-size:clamp(1.15rem,1.8vw,1.45rem);max-width:38rem;line-height:1.45}

/* Guldknapp för beräkna pris på korten */
.kort-lank.knapp-guld{align-self:flex-start;background:var(--guld-grad);color:#000000!important;padding:.7rem 1.1rem;border-radius:6px;box-shadow:0 6px 18px rgba(212,175,55,.28);transition:transform .2s,box-shadow .2s}
.kort:hover .knapp-guld{background:var(--guld-grad-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,175,55,.35)}

/* Klassiskt &-tecken i rubriker */
.amp{font-family:'Anybody',var(--rubrik);font-weight:800;font-stretch:130%}

/* Formulärbandet: svart bakgrund, guldknappar */
.cta.cta-form{background:#000000;color:#FFFFFF}
.cta-form .cta-tel-etikett{color:#CFCFCF;opacity:1}
.cta-form .cta-tel{color:#D4AF37!important}
.cta-form .cta-text{color:#CFCFCF}
.cta-form .formular label{color:#FFFFFF}
.cta-form .valfri{color:#9A9A9A}
.cta-form .formular input,.cta-form .formular textarea{background:#0D0D0D;border-color:#444444;color:#FFFFFF}
.cta-form .formular input::placeholder,.cta-form .formular textarea::placeholder{color:#8E8E8E}
.cta-form .formular input:focus,.cta-form .formular textarea:focus{border-color:#D4AF37}
.cta-form .knapp.primar{background:var(--guld-grad)!important;color:#000000!important;box-shadow:0 6px 18px rgba(212,175,55,.28)}
.cta-form .knapp.primar:hover{background:var(--guld-grad-hover)!important}

/* Mörka sektioner (svart & guld) */
.sektion-mork{background:#000000;color:#FFFFFF;border-top:1px solid #1C1C1C}
.sektion-mork h2{color:#FFFFFF}
.sektion-mork p{color:#CFCFCF}
.sektion-mork .fakta{border-left-color:#D4AF37}
.sektion-mork .fakta strong{color:#D4AF37}
.sektion-mork .fakta li{color:#CFCFCF}
.sektion-mork .faq details{border-bottom-color:#1C1C1C}
.sektion-mork .faq summary{color:#FFFFFF}
.sektion-mork .faq summary::after{color:#D4AF37}
.sektion-mork .faq details p{color:#BDBDBD}
.sektion-mork a{color:#D4AF37}

/* Kompakt kalkylator på telefon */
@media (max-width:600px){
  .kalkyl{gap:1.1rem;margin-top:1.1rem}
  .falt{margin-bottom:.9rem}
  .falt legend{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#CFCFCF;margin-bottom:.4rem}
  .material,.material.tre{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .material:not(.tre){grid-template-columns:repeat(2,minmax(0,1fr))}
  .material label,.material.tre label{position:relative;justify-content:center;text-align:center;padding:.6rem .25rem;font-size:.82rem;font-weight:600;border-width:1.5px;line-height:1.2;min-height:2.6rem}
  .material input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
  .material label:has(input:checked){color:#FFFFFF;font-weight:700}
  .material label:has(input:focus-visible){outline:2px solid #D4AF37;outline-offset:2px}
  .resultat{padding:1.1rem 1.2rem;border-radius:10px}
  .resultat .etikett{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
  .resultat .belopp{font-size:clamp(1.25rem,6vw,1.65rem);margin:.25rem 0 .4rem;white-space:nowrap}
  .resultat .detalj{font-size:.85rem;margin-bottom:.4em;line-height:1.45}
  .resultat .knapp{margin-top:.7rem;padding:.8rem 1rem;font-size:.95rem}
  .tak-topp h1{font-size:2.3rem}
  .tak-topp>.wrap>p{font-size:1rem;margin-bottom:.4rem}
}

/* Klockguld: polerad metallkänsla */
.knapp.primar,.ring,.kort-cta .knapp,.kort-lank.knapp-guld,.cta-form .knapp.primar{background-size:160% 100%!important;background-position:0% 50%!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 18px rgba(212,175,55,.25)!important;text-shadow:0 1px 0 rgba(255,255,255,.35);transition:background-position .5s ease,transform .2s,box-shadow .2s}
.knapp.primar:hover,.ring:hover,.kort-cta .knapp:hover,.kort:hover .knapp-guld,.cta-form .knapp.primar:hover{background-position:100% 50%!important}
.cta:not(.cta-form){background-size:100% 100%}

.resultat .detalj-vinst{color:#000000;font-weight:600;border-top:1px solid rgba(0,0,0,.12);padding-top:.7rem;margin-top:.7rem}

/* Fast bakgrundsvideo (Tak-sidan): videon står still, innehållet scrollar */
body.fast-video{background:#000000}
body.fast-video .tak-topp{background:transparent;overflow:visible}
body.fast-video .tak-topp-video{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;object-fit:cover;z-index:0}
body.fast-video .tak-topp::before{position:fixed;inset:0;height:100lvh;background:rgba(0,0,0,.55);z-index:1}
body.fast-video main>section{position:relative;z-index:2;background:transparent!important}
body.fast-video main>section+section{border-top:1px solid rgba(255,255,255,.12)}
body.fast-video .cta-form .formular input,body.fast-video .cta-form .formular textarea{background:rgba(0,0,0,.55)}

/* Mer luft ovanför rubriken på Tak-sidan (som Setterman) */
.tak-topp{padding-top:calc(88px + clamp(3.5rem,14vh,9rem))}
@media (max-width:600px){.tak-topp{padding-top:calc(76px + clamp(3rem,12vh,6rem))}}

/* Ännu större logga på dator */
@media (min-width:1101px){
  .topp .wrap{min-height:116px}
  .topp .logga img{height:100px}
  .sidhuvud{padding-top:calc(116px + clamp(3rem,7vw,5rem))}
  .hero .wrap{padding-top:calc(116px + 4rem)}
  .tak-topp{padding-top:calc(116px + clamp(3.5rem,14vh,9rem))}
}

/* Meny ut mot kanterna */
.topp .wrap{max-width:none;padding-left:clamp(1.1rem,2.5vw,2.5rem);padding-right:clamp(1.1rem,2.5vw,2.5rem)}

/* Inga linjer på Tak-sidan */
body.fast-video main>section,body.fast-video main>section+section,body.fast-video .sektion-mork{border-top:0!important}

/* Tak-topp på dator som Setterman */
@media (min-width:1101px){
  .tak-topp{padding-top:max(calc(116px + 3rem),42vh)}
  .tak-topp .wrap{max-width:none;padding-left:clamp(1.25rem,6vw,5rem);padding-right:clamp(1.25rem,6vw,5rem)}
  .tak-topp h1{margin:.6rem 0 1.4rem;line-height:.98}
  .tak-topp .kalkyl{max-width:1100px}
}

/* Dölj hembesökskortet på mobil */
@media (max-width:600px){.kort-cta{display:none}}

/* Sidor utan kalkylator: rubriken nere i bild som Setterman */
.tak-topp.utan-kalkyl{display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding-bottom:clamp(3rem,10vh,6rem)}
.tak-topp.utan-kalkyl>.wrap{width:100%}
.tak-topp.utan-kalkyl>.wrap>p{max-width:38rem;font-size:clamp(1.05rem,1.6vw,1.3rem)}
@media (min-width:1101px){.tak-topp.utan-kalkyl{padding-top:calc(116px + 3rem)}}

/* Fast video på startsidan: videon står still, korten och formuläret scrollar */
body.fast-hero{background:#000000}
body.fast-hero .hero{background:transparent;overflow:visible}
body.fast-hero .hero video{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;object-fit:cover;z-index:0}
body.fast-hero .hero .wrap{z-index:2}
body.fast-hero .gavel-hero{display:none}
body.fast-hero main>section{position:relative;z-index:2}
body.fast-hero .tjanster-sektion{background:transparent}
body.fast-hero .cta-form{background:rgba(0,0,0,.68)!important}
body.fast-hero .cta-form .formular input,body.fast-hero .cta-form .formular textarea{background:rgba(0,0,0,.55)}

/* Ingen toning över bakgrunden på undersidorna – texten får skugga för läsbarhet */
body.fast-video .tak-topp::before{display:none}
body.fast-video h1,body.fast-video h2,body.fast-video legend,body.fast-video .cta-tel-etikett,body.fast-video .cta-tel,body.fast-video .cta-text,body.fast-video .formular label,body.fast-video .faq summary,body.fast-video .faq details p,body.fast-video .tak-topp>.wrap>p{text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.7)}
body.fast-video .material label{background:rgba(0,0,0,.62)}

.tak-topp>.wrap>p a{color:#D4AF37;font-weight:700;text-decoration:none}

/* Ingen toning bakom formuläret på startsidan – texten får skugga */
body.fast-hero .cta-form{background:transparent!important}
body.fast-hero .cta-form h2,body.fast-hero .cta-tel-etikett,body.fast-hero .cta-tel,body.fast-hero .cta-text,body.fast-hero .cta-form .formular label{text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.7)}
body.fast-hero .cta-form .formular input,body.fast-hero .cta-form .formular textarea{background:rgba(0,0,0,.6)}

/* Mörk panel bakom frågor och svar */
body.fast-video .faq{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:.4rem clamp(1rem,3vw,2rem);max-width:860px}
body.fast-video .faq details:last-child{border-bottom:0}
body.fast-video .faq summary,body.fast-video .faq details p{text-shadow:none}

/* Omdömen */
.stjarnor,.betyg-stjarnor{color:#D4AF37;letter-spacing:.08em}
.betyg-kort{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3rem);align-items:center;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:clamp(1.4rem,4vw,2.6rem);max-width:860px}
.betyg-siffra{font-family:var(--rubrik);font-stretch:118%;font-weight:800;font-size:clamp(4rem,12vw,7rem);line-height:1;color:#D4AF37}
.betyg-info{flex:1;min-width:240px}
.betyg-stjarnor{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:.4rem}
.betyg-info p{color:#CFCFCF;text-shadow:none}

/* Företagsuppgifter, GDPR-rad och integritetspolicy */
.foretagsinfo{position:relative;z-index:2;text-align:center;padding:1.4rem clamp(1.1rem,4vw,2rem) 2rem;font-size:.82rem;color:#CFCFCF;background:#000000}
.foretagsinfo p{margin:0 auto;max-width:none}
.foretagsinfo a{color:#D4AF37;text-decoration:none}
body.fast-video .foretagsinfo,body.fast-hero .foretagsinfo{background:transparent;text-shadow:0 1px 3px rgba(0,0,0,.9),0 1px 10px rgba(0,0,0,.7)}
.form-gdpr{font-size:.85rem;color:#CFCFCF;margin:0}
.form-gdpr a{color:#D4AF37}
.juridik-sida{padding-top:calc(116px + 3rem)}
@media (max-width:1100px){.juridik-sida{padding-top:calc(76px + 2rem)}}
.juridik{background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:clamp(1.2rem,4vw,2.4rem);max-width:860px}
.juridik h2{font-size:1.25rem;margin:1.6rem 0 .4rem;color:#D4AF37}
.juridik p{color:#E2E2E2;text-shadow:none}
.juridik a{color:#D4AF37}

/* SEO-text på startsidan */
.seo-sektion{position:relative;z-index:2;padding-bottom:0}
.seo-text{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:clamp(1.3rem,4vw,2.4rem);max-width:900px;color:#E2E2E2}
.seo-text h2{color:#FFFFFF;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.8rem}
.seo-text p{color:#E2E2E2}
.seo-text p:last-child{margin-bottom:0}
.seo-text a{color:#D4AF37;text-decoration:none;font-weight:600}
.seo-text a:hover{text-decoration:underline}

/* Google-omdömen */
.omdome-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.5rem;max-width:1100px}
.omdome{margin:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.omdome-stjarnor{color:#D4AF37;font-size:1.25rem;letter-spacing:.08em}
.omdome-stjarnor .tom{color:#444444}
.omdome blockquote{margin:0;color:#E2E2E2;line-height:1.55;text-shadow:none}
.omdome figcaption{color:#CFCFCF;font-size:.9rem;margin-top:auto}
.omdome figcaption a{color:#FFFFFF;font-weight:700;text-decoration:none}
.google-attr{margin:1rem 0 0;font-size:.85rem;color:#CFCFCF;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.google-attr a{color:#D4AF37}

.omdome-betyg blockquote{font-style:italic}

/* Herotext nere till vänster på startsidan */
body.fast-hero .hero .wrap{max-width:none;margin:0;padding-left:clamp(1.1rem,2.5vw,2.5rem);padding-right:clamp(1.1rem,2.5vw,2.5rem);padding-bottom:clamp(1.8rem,5vh,3.5rem)}

/* Mobil: rubriken på två rader i nederkant */
.h1-rad{white-space:nowrap}
@media (max-width:600px){
  body.fast-hero .hero h1{font-size:clamp(1.9rem,9.8vw,2.9rem);line-height:1.02;margin-bottom:0}
  body.fast-hero .hero .wrap{padding-bottom:calc(1.4rem + env(safe-area-inset-bottom,0px))}
}

/* Mobil: tjänstekorten två i bredd */
@media (max-width:600px){
  .kort-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .kort{border-radius:12px}
  .kort h3{font-size:1.05rem;margin:.7rem .75rem .3rem;font-stretch:112%}
  .kort p{font-size:.8rem;line-height:1.4;margin:0 .75rem .7rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .kort-lank{margin:auto .75rem .85rem;font-size:.78rem;line-height:1.25}
  .kort-lank.knapp-guld{padding:.5rem .6rem;border-radius:6px}
}

/* Mobil: utzoomad herovideo – visar ungefär dubbelt så mycket av bilden, tonar ut i svart nedtill */
@media (max-width:600px){
  body.fast-hero .hero video{top:0;bottom:auto;height:60vh;height:60svh;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}
}

/* Mobil: rubriken direkt där det blir svart, tjänsterna följer efter med samma avstånd som förut */
@media (max-width:600px){
  body.fast-hero .hero{min-height:0;height:auto}
  body.fast-hero .hero .wrap{padding-top:60vh;padding-top:60svh}
}

/* Tjänstekort: bild över hela kortet, vit text överst, knapp längst ner */
.kort:not(.kort-cta){position:relative;aspect-ratio:3/4;min-height:300px;background:#000000;color:#FFFFFF;border-bottom:0}
.kort:not(.kort-cta) .kort-bild{position:absolute;inset:0;aspect-ratio:auto;z-index:0}
.kort:not(.kort-cta)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 72%,rgba(0,0,0,.45) 100%)}
.kort:not(.kort-cta) h3,.kort:not(.kort-cta) p,.kort:not(.kort-cta) .kort-lank{position:relative;z-index:2}
.kort:not(.kort-cta) h3{color:#FFFFFF;font-size:1.35rem;margin:1.2rem 1.3rem .35rem;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.kort:not(.kort-cta) p{color:rgba(255,255,255,.9);font-size:1rem;margin:0 1.3rem;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.kort:not(.kort-cta) .kort-lank{margin-top:auto}
.kort:not(.kort-cta) .kort-lank:not(.knapp-guld){color:#FFFFFF!important;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.kort:not(.kort-cta):hover{border-bottom:0}
@media (max-width:600px){
  .kort:not(.kort-cta){min-height:250px}
  .kort:not(.kort-cta) h3{font-size:1.05rem;margin:.75rem .75rem .25rem}
  .kort:not(.kort-cta) p{font-size:.78rem;margin:0 .75rem}
  .kort:not(.kort-cta) .kort-lank{margin:auto .75rem .8rem}
}

/* Tjänstekort utan toning – texten får tydligare skugga i stället */
.kort:not(.kort-cta)::after{display:none}
.kort:not(.kort-cta) h3,.kort:not(.kort-cta) p,.kort:not(.kort-cta) .kort-lank:not(.knapp-guld){text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 12px rgba(0,0,0,.6)}

/* Textstorlek i tjänstekort som Lövångers: stor, kraftig rubrik och luftig brödtext */
.kort:not(.kort-cta) h3{font-size:clamp(1.9rem,2.6vw,2.5rem);font-weight:800;line-height:1.05;margin:1.6rem 1.7rem .7rem}
.kort:not(.kort-cta) p{font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:400;line-height:1.45;margin:0 1.7rem;max-width:22em}
.kort:not(.kort-cta) .kort-lank{margin:auto 1.7rem 1.6rem}
@media (max-width:600px){
  .kort:not(.kort-cta) h3{font-size:1.3rem;margin:.85rem .85rem .35rem}
  .kort:not(.kort-cta) p{font-size:.86rem;line-height:1.4;margin:0 .85rem}
  .kort:not(.kort-cta) .kort-lank{margin:auto .85rem .85rem}
}

/* Fix: tjänstekort överlappar inte på smala skärmar */
.kort:not(.kort-cta){width:100%;min-width:0;box-sizing:border-box}
@media (max-width:900px){
  .kort:not(.kort-cta){aspect-ratio:auto;min-height:0;height:clamp(250px,72vw,420px)}
}
@media (max-width:600px){
  .kort-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}
  .kort:not(.kort-cta){height:clamp(240px,66vw,300px)}
}