/* Flyttfirma Skellefteå. Systersajt till Serviceförmedlingen "Granit".
   Layoutidé: sajten är en flyttsedel. Mörk granit för löften, ljus kalk för innehåll,
   och bokningen ritas som ett transportdokument med rutt från A till B. */
:root{
  --granit:#0E1218; --granit-2:#161B23; --granit-3:#232A35;
  --kalk:#F1EEE7; --kalk-2:#E6E1D6; --papper:#FBFAF6;
  --guld:#E8B84B; --guld-mork:#8A6512;
  --fjord:#3F5A6E; --text:#1B2028; --text-2:#4A5260; --ljus-2:#AEB5C0;
  --linje:rgba(14,18,24,.16); --linje-ljus:rgba(241,238,231,.16);
  --fel:#A3321F; --ok:#2F6B45;
  --f-rubrik:"Familjen Grotesk","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --s-1:.8125rem; --s0:1.0625rem; --s1:1.25rem; --s2:1.625rem; --s3:2.25rem; --s4:clamp(2.5rem,5.6vw,4.4rem);
  --r:4px; --max:1200px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kalk);color:var(--text);font:400 var(--s0)/1.6 var(--f-text);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--granit)}
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--guld);outline-offset:2px}
h1,h2,h3{font-family:var(--f-rubrik);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:var(--s4)} h2{font-size:var(--s3)} h3{font-size:var(--s1);letter-spacing:-.01em;line-height:1.25}
p{margin:0;max-width:65ch}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.etikett{font:500 .75rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fjord)}
.mork .etikett,.hero .etikett,.sidhuvud .etikett{color:var(--guld)}
.hoppa{position:absolute;left:-999px;top:0;background:var(--guld);color:var(--granit);padding:.6rem 1rem;z-index:100}
.hoppa:focus{left:1rem;top:calc(env(safe-area-inset-top,0px) + 1rem)}

/* Knappar */
.knapp{display:inline-flex;align-items:center;gap:.6rem;font:600 1rem/1 var(--f-text);padding:1rem 1.35rem;border-radius:var(--r);border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.knapp:hover{transform:translateY(-1px)}
.knapp-guld{background:var(--guld);color:var(--granit)}
.knapp-guld:hover{background:#F0C766}
.knapp-kontur{border-color:currentColor;background:transparent;color:inherit}
.knapp svg{width:1.1em;height:1.1em}

/* Sidhuvud */
.topp{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--granit);color:var(--kalk);border-bottom:1px solid var(--linje-ljus)}
.topp .wrap{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.marke-glyf{width:34px;height:34px;flex:none}
.marke b{display:block;font:600 1.15rem/1 var(--f-rubrik);letter-spacing:-.02em}
.marke small{display:block;font:500 .66rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ljus-2);margin-top:.2rem}
.meny{display:none;gap:1.4rem}
.meny a{text-decoration:none;font-size:.95rem;color:var(--ljus-2)}
.meny a:hover,.meny a[aria-current]{color:var(--kalk)}
.topp-tel{display:none;font:500 .95rem var(--f-mono);text-decoration:none}
.topp .knapp{padding:.75rem 1rem;font-size:.95rem}
@media (min-width:1000px){.meny{display:flex}.topp-tel{display:block}}
@media (max-width:999px){.topp .knapp{display:none}}

/* Hero */
.hero{background:var(--granit);color:var(--kalk);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:2.5rem;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:4rem}}
.hero h1 em{font-style:normal;color:var(--guld)}
.hero-ingress{font-size:var(--s1);line-height:1.5;color:#D6D9DE;margin-top:1.5rem;max-width:34ch}
.hero-fakta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:2rem 0 0;padding:0;list-style:none;font:500 .85rem/1.4 var(--f-mono);color:var(--ljus-2)}
.hero-fakta li{display:flex;gap:.5rem;align-items:center}
.hero-fakta li::before{content:"";width:7px;height:7px;background:var(--guld);border-radius:50%}
.hero-tel{margin-top:2rem;font-size:.95rem;color:var(--ljus-2)}
.hero-tel a{font:500 1.15rem var(--f-mono);color:var(--kalk)}

/* Flyttsedeln (bokningskortet) */
.sedel{background:var(--papper);color:var(--text);border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);position:relative}
.sedel-huvud{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;border-bottom:1.5px dashed var(--linje);font:500 .72rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-2)}
.sedel-kropp{padding:1.4rem;display:grid;gap:1.1rem}
.rutt{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.9rem}
.rutt-linje{grid-row:1/3;display:flex;flex-direction:column;align-items:center;padding-top:2.05rem;padding-bottom:1.55rem}
.rutt-linje i{width:12px;height:12px;border-radius:50%;border:2px solid var(--granit);flex:none}
.rutt-linje i:last-child{background:var(--guld);border-color:var(--guld-mork)}
.rutt-linje span{flex:1;width:2px;background:repeating-linear-gradient(to bottom,var(--granit) 0 5px,transparent 5px 10px);opacity:.45;margin:3px 0}
.rutt .falt+.falt{margin-top:.9rem}
.sedel-fot{padding:1.1rem 1.4rem 1.4rem;border-top:1.5px dashed var(--linje);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.sedel-fot small{color:var(--text-2);font-size:.85rem;max-width:30ch}
.hal{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--granit);top:calc(3.15rem - 11px)}
.hal.v{left:-11px}.hal.h{right:-11px}

/* Formulärfält */
.falt{display:grid;gap:.35rem;min-width:0}
.falt label,.falt legend,.falt .lbl{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.falt input,.falt select,.falt textarea{font:400 1rem/1.4 var(--f-text);color:var(--text);background:#fff;border:1.5px solid rgba(14,18,24,.28);border-radius:var(--r);padding:.8rem .85rem;width:100%;min-width:0}
.falt textarea{min-height:7rem;resize:vertical}
.falt input:focus,.falt select:focus,.falt textarea:focus{outline:none;border-color:var(--granit);box-shadow:0 0 0 3px rgba(232,184,75,.55)}
.falt [aria-invalid="true"]{border-color:var(--fel)}
.falt .fel{color:var(--fel);font-size:.875rem}
.falt .hjalp{color:var(--text-2);font-size:.875rem}
.rad{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.rad.två{grid-template-columns:repeat(2,minmax(0,1fr))}.rad.tre{grid-template-columns:repeat(3,minmax(0,1fr))}}
.val{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border:0;padding:0;margin:0}
.val legend{margin-bottom:.5rem}
.val label.chip{display:flex;gap:.6rem;align-items:flex-start;border:1.5px solid rgba(14,18,24,.22);border-radius:var(--r);padding:.75rem .8rem;background:#fff;cursor:pointer;font-size:.95rem;line-height:1.35}
.val label.chip:has(input:checked){border-color:var(--granit);background:#FFF8E6;box-shadow:inset 0 0 0 1px var(--granit)}
.val input{accent-color:var(--granit);margin:.15rem 0 0;flex:none;width:1.05rem;height:1.05rem}
.honung{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Sektioner */
.sektion{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sektion.kalk2{background:var(--kalk-2)}
.mork{background:var(--granit);color:var(--kalk)}
.mork p{color:#D3D7DD}
.delad{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.delad{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem}}
.delad>*{min-width:0}
.delad .rubrik{display:grid;gap:1rem;align-content:start}
.brod{display:grid;gap:1.1rem}
.brod p{font-size:1.06rem}

.kortsvar{border-left:3px solid var(--guld);padding:.2rem 0 .2rem 1.3rem;display:grid;gap:.5rem}
.kortsvar p{font-size:var(--s1);line-height:1.5;color:var(--text)}

/* Steg (verklig ordning) */
.steg{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steg li{counter-increment:s;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;padding:1.5rem 0;border-top:1px solid var(--linje)}
.steg li:last-child{border-bottom:1px solid var(--linje)}
.steg li::before{content:counter(s,decimal-leading-zero);font:500 .95rem var(--f-mono);color:var(--fjord);padding-top:.2rem}
.steg h3{margin-bottom:.4rem}
.steg p{color:var(--text-2)}

/* Bildband */
.bildband{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.bildband{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bildband figure{margin:0;display:grid;gap:.6rem}
.bildband img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.bildband figcaption{font-size:.85rem;color:var(--text-2);line-height:1.4}
.bildband video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;background:var(--granit-2)}

/* Omfattningstabell */
.nivaer{display:grid;gap:0}
.niva{display:grid;gap:.8rem 2rem;padding:1.8rem 0;border-top:1px solid var(--linje);grid-template-columns:minmax(0,1fr)}
.niva:last-child{border-bottom:1px solid var(--linje)}
@media (min-width:800px){.niva{grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;align-items:start}}
.niva ul{margin:0;padding-left:1.1rem;color:var(--text-2);display:grid;gap:.25rem}
.niva .knapp{padding:.7rem 1rem;font-size:.92rem;white-space:nowrap;justify-self:start}
.niva p{color:var(--text-2);margin-top:.35rem}

/* Förtroende */
.intyg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--linje-ljus)}
@media (min-width:700px){.intyg{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}}
.intyg li{padding:1.2rem 0;border-bottom:1px solid var(--linje-ljus);display:grid;gap:.3rem}
.intyg b{font:600 1.05rem var(--f-rubrik);color:var(--kalk)}
.intyg span{color:var(--ljus-2);font-size:.95rem}
.drivs{display:flex;gap:1rem;align-items:center;margin-top:2rem;padding:1.1rem 1.2rem;border:1px solid var(--linje-ljus);border-radius:var(--r)}
.drivs img{width:44px;height:44px;background:var(--kalk);border-radius:50%;padding:5px;flex:none}
.drivs p{font-size:.95rem}

/* Orter */
.orter{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.orter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.orter ul{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.orter li{font-size:.92rem;padding:.3rem .65rem;border:1px solid var(--linje);border-radius:99px;background:var(--papper)}

/* FAQ */
.faq{border-top:1px solid var(--linje)}
.faq details{border-bottom:1px solid var(--linje)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 0;font:600 1.1rem/1.35 var(--f-rubrik)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--f-mono);color:var(--fjord);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .svar{padding:0 0 1.4rem;color:var(--text-2);display:grid;gap:.7rem}

/* Avslutande uppmaning */
.slut{background:var(--guld);color:var(--granit)}
.slut .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between;padding-block:3rem}
.slut h2{font-size:var(--s2);max-width:22ch}
.slut .knapp-guld{background:var(--granit);color:var(--kalk)}
.slut a.tel{font:500 1.2rem var(--f-mono);text-decoration:none}

/* Sidfot */
.fot{background:var(--granit);color:var(--ljus-2);font-size:.92rem;padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
@media (min-width:1000px){.fot{padding-bottom:0}}
.fot .wrap{display:grid;gap:2rem;padding-block:3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){.fot .wrap{grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,3fr))}}
.fot h2{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--guld);margin-bottom:.8rem}
.fot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fot a{color:var(--kalk)}
.fot address{font-style:normal;display:grid;gap:.35rem}
.fot .juridik{border-top:1px solid var(--linje-ljus);padding-block:1.2rem;font:400 .8rem/1.5 var(--f-mono)}

/* Fast knapprad på mobil */
.mobilrad{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;background:var(--granit);border-top:1px solid var(--linje-ljus);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.mobilrad a{justify-content:center;padding:.85rem .5rem}
.mobilrad .knapp-kontur{color:var(--kalk)}
@media (min-width:1000px){.mobilrad{display:none}}

/* Undersidor */
.sidhuvud{background:var(--granit);color:var(--kalk)}
.sidhuvud .wrap{padding-block:clamp(2.5rem,6vw,4.5rem);display:grid;gap:1.2rem}
.sidhuvud p{color:#D3D7DD;font-size:var(--s1);line-height:1.5;max-width:52ch}
.sti{font:500 .75rem var(--f-mono);letter-spacing:.06em;color:var(--ljus-2)}
.sti a{color:var(--ljus-2)}
.prosa{display:grid;gap:1.1rem;max-width:70ch}
.prosa h2{font-size:var(--s2);margin-top:1.6rem}
.prosa h3{margin-top:.8rem}
.prosa ul,.prosa ol{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.tabell{overflow-x:auto}
.tabell table{border-collapse:collapse;width:100%;min-width:480px;font-size:.98rem}
.tabell th,.tabell td{text-align:left;padding:.8rem .6rem;border-bottom:1px solid var(--linje);vertical-align:top}
.tabell th{font:500 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.checklista{list-style:none;padding:0!important;margin:0;display:grid;gap:0!important}
.checklista li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--linje)}
.checklista input{accent-color:var(--granit);width:1.15rem;height:1.15rem;margin-top:.2rem}
.tid{display:grid;gap:2.5rem}
.tid section{display:grid;gap:.8rem}
.tid h2{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.tid h2 .etikett{font-size:.8rem}

/* RUT-räknare och prisruta */
.raknare{background:var(--papper);border:1.5px solid var(--granit);border-radius:6px;padding:1.4rem;display:grid;gap:1rem;max-width:560px}
.raknare output{display:block}
.summa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;font-variant-numeric:tabular-nums}
.summa dt{color:var(--text-2)} .summa dd{margin:0;text-align:right;font:500 1rem var(--f-mono)}
.summa .tot{font-weight:600;color:var(--text);border-top:1.5px solid var(--granit);padding-top:.5rem}
.notis{font-size:.9rem;color:var(--text-2)}

/* Bokningssidan */
.bokning{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1000px){.bokning{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:3.5rem}}
.bokning>*{min-width:0}
.stegrad{display:flex;gap:4px;list-style:none;margin:0 0 1.6rem;padding:0;font:500 .7rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.stegrad li{flex:1;padding-top:.6rem;border-top:3px solid var(--kalk-2);color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stegrad li.klar{border-color:var(--fjord)}
.stegrad li[aria-current]{border-color:var(--guld);color:var(--text)}
@media (max-width:560px){.stegrad li span{display:none}}
.formsteg{border:0;margin:0;padding:0;display:grid;gap:1.3rem}
.formsteg>legend{font:600 var(--s2)/1.15 var(--f-rubrik);letter-spacing:-.02em;margin-bottom:.4rem;padding:0}
.js .formsteg[data-dold]{display:none}
.formknappar{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem;align-items:center}
.formknappar .tillbaka{background:none;border:0;font:500 1rem var(--f-text);color:var(--text-2);cursor:pointer;text-decoration:underline;text-underline-offset:.2em;padding:.5rem}
.sammanfattning{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px);display:grid;gap:1rem}
.sammanfattning dl{margin:0;display:grid;gap:.15rem}
.sammanfattning dt{font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-top:.6rem}
.sammanfattning dd{margin:0;overflow-wrap:anywhere}
.status{padding:1rem 1.1rem;border-radius:var(--r);border:1.5px solid;display:grid;gap:.3rem}
.status.ok{border-color:var(--ok);background:#EEF5EF}
.status.fel{border-color:var(--fel);background:#FBEDEA}
.prisruta{border-top:1.5px dashed var(--linje);padding-top:1rem;display:grid;gap:.5rem}

/* Rörelse */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero-ingress,.hero-fakta{animation:upp .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-ingress{animation-delay:.08s}.hero-fakta{animation-delay:.16s}
  .sedel{animation:in .8s .1s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes upp{from{transform:translateY(14px)}to{transform:none}}
@keyframes in{from{transform:translateY(24px) rotate(1.2deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.falt.val label.chip{font:400 .95rem/1.35 var(--f-text);text-transform:none;letter-spacing:0;color:var(--text)}
#bokning{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 96px)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.matris table{min-width:560px;font-size:1rem}
.tabell.matris th[scope=row]{font:600 1.3rem var(--f-rubrik);letter-spacing:-.01em;text-transform:none;color:var(--text);width:18%}
.matris th[scope=row] a{text-decoration:none}
.matris td{padding:1.2rem .8rem;color:var(--text-2)}
.matris td a{color:var(--text)}
.matris thead th{padding-bottom:1rem}