/* ============================================================
   HOSS FLYTT & STÄD
   Riktning: factormeals.se, avläst från den riktiga sidan.
   Faktisk stil där: KRÄM + VIT + SVART. Inte grönt.
   - Svarta knappar, 4px radie
   - Plus Jakarta Sans överallt, rubriker i vikt 600
   - Normal letter-spacing, radavstånd 1.2 på rubriker
   - Tunna linjeikoner, enfärgade
   - Hero: krämpanel med text, foto i kant till kant
   Grönt #206B19 finns hos Factor men bara som liten länkfärg.

   MOBILE FIRST. Bas = telefon 360-440px.
   PRISER VISAS INTE på sidan (kundens beslut). Kända internt:
   500 kr/tim flytt, 300 kr/tim städ. Ej bekräftat om inkl moms / före RUT.
   ============================================================ */
:root{
  --cream:#F1F1EA;
  --white:#FFFFFF;
  --ink:#141414;
  --muted:#343434;
  --line:#E0E0E0;
  --accent:#206B19;
  --r:4px;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1280px;
  --pad:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);overflow-x:hidden;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2;letter-spacing:normal;text-wrap:balance}
h1{font-size:2rem;line-height:1.18}
h2{font-size:1.6rem}
h3{font-size:1.125rem;font-weight:600}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.lede{color:var(--muted);font-size:1rem;max-width:46ch}
.lede b{color:var(--ink);font-weight:600}

/* buttons: black, 4px, like Factor's "Beställ nu" */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:.85rem 1.75rem;border-radius:var(--r);font-weight:600;font-size:1rem;
  white-space:nowrap;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-lightline{border-color:#fff;color:#fff;background:transparent}
.btn-lightline:hover{background:#fff;color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* nav */
#top{position:absolute;top:0;height:1px;width:1px}
/* stationär meny: följer INTE med vid scroll */
nav{position:static;background:var(--white);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:60px}
.brand{font-weight:700;font-size:1rem;letter-spacing:.1em;text-decoration:none;color:var(--ink);
  white-space:nowrap;flex:none}
.brand i{display:none;font-style:normal;font-weight:400}
.navlinks{display:none}
.navend{display:flex;align-items:center;gap:.5rem}
.navend .btn{min-height:38px;padding:.4rem 1rem;font-size:.88rem;flex:none}
.fullnum{display:none}
.navend .btn svg{width:16px;height:16px;flex:none}
.burger{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--ink);
  border-radius:var(--r);background:none;color:var(--ink);cursor:pointer}
.burger svg{width:19px;height:19px}
/* menyn fälls ut. grid-template-rows 0fr -> 1fr animerar höjd utan JS-mätning */
#mm{display:grid;grid-template-rows:0fr;background:var(--white);
  border-top:1px solid transparent;
  transition:grid-template-rows .34s var(--ease),border-color .18s linear}
#mm.open{grid-template-rows:1fr;border-top-color:var(--line)}
.mm-in{overflow:hidden;min-height:0;padding-inline:calc(var(--pad) + .6rem)}
#mm a{display:block;padding:1rem .2rem;text-decoration:none;font-weight:600;font-size:1.05rem;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
#mm a:last-child{border-bottom:0;margin-bottom:1rem}
#mm.open a{opacity:1;transform:none}
#mm.open a:nth-child(1){transition-delay:.10s}
#mm.open a:nth-child(2){transition-delay:.15s}
#mm.open a:nth-child(3){transition-delay:.20s}
#mm.open a:nth-child(4){transition-delay:.25s}
#mm.open a:nth-child(5){transition-delay:.30s}
#mm.open a:nth-child(6){transition-delay:.35s}
.burger svg{transition:transform .34s var(--ease)}
.burger[aria-expanded="true"] svg{transform:rotate(90deg)}

/* hero: cream panel + edge-to-edge photo */
.hero{background:var(--cream)}
.hero-copy{padding:2.6rem var(--pad) 2.8rem;max-width:var(--wrap);margin-inline:auto}
.hero-copy{text-align:center}
.hero h1{max-width:16ch;margin-inline:auto}
.hero .lede{margin-inline:auto}
.hero .lede{margin-top:1.1rem}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1.9rem}
.btn-narrow{padding:.8rem 1.5rem}
.tar30{font-size:.85rem;font-weight:700;color:var(--muted);
  animation:hop 1.5s ease-in-out infinite alternate}
/* samma kadens som flexdolly kor pa sina pilar: 1.5s, oandlig, alternate */
@keyframes hop{
  0%{transform:translateY(-4px)}
  100%{transform:translateY(6px)}
}
@media(prefers-reduced-motion:reduce){.tar30{animation:none}}
.hero-photo{aspect-ratio:4/3;background:#ddd}
.hero-photo img{width:100%;height:100%;object-fit:cover}

/* line-icon value strip, white band under hero */
.strip{background:var(--white);border-bottom:1px solid var(--line)}
/* padding-block, inte padding: kortformen nollade .wrap:s padding-inline
   och texten hamnade i skärmkanten på mobil */
.strip-in{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem;padding-block:2.2rem}
/* ikonen ligger över texten på mobil, då börjar texten på samma x som all annan text */
.si{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;
  font-size:.92rem;font-weight:500;line-height:1.35}
.si svg{width:30px;height:30px;flex:none;stroke:var(--ink);stroke-width:1.2;fill:none}


/* ---------- bild + text på tjänstesidorna (saknades i stilmallen) ---------- */
.about-grid{display:grid;gap:2rem;align-items:center}
.about-media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--cream)}
.about-media img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .about-grid{grid-template-columns:1fr 1fr;gap:3.2rem}
  .about-media{aspect-ratio:5/4}
}

section{padding:3.2rem 0}
.sec-head{margin-bottom:2rem;max-width:48ch}
.sec-head p{margin-top:.8rem;color:var(--muted)}
.cream{background:var(--cream)}

/* prices */

/* steps: foto ovanför, som Factor */
.steps{display:grid;gap:2rem}
/* stegen ar behallare nu, inga bilder */
.step-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem}
.step-no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:.82rem;font-weight:700;margin-bottom:.9rem}
.step-card h3{margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.94rem;margin-top:.35rem}

/* services */
.svc{display:grid;gap:1rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--ink)}
.card-media{aspect-ratio:16/10;background:var(--cream);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-in{padding:1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card-in p{color:var(--muted);font-size:.93rem}
.card-go{margin-top:auto;padding-top:1.1rem;font-weight:700;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.4rem}
.card-go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
a.card{text-decoration:none;color:inherit}
a.card:hover .card-go svg{transform:translateX(4px)}

/* rut band */
.rut{background:var(--ink);color:#fff}
.rut h2{color:#fff}
.rut .grid{display:grid;gap:1.5rem;align-items:center}
.rut .big{font-size:3rem;font-weight:600;line-height:1}
.rut p{color:rgba(255,255,255,.75);max-width:44ch}
.rut ul{margin:1.3rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem}
.rut li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem}
.rut li svg{width:18px;height:18px;flex:none;margin-top:4px;stroke:#fff}

/* reviews */
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:2rem 1.5rem;text-align:center}
.rev p{color:var(--muted);margin-top:.7rem;font-size:.95rem;max-width:44ch;margin-inline:auto}
.rev .btn{margin-top:1.5rem}

.areas{display:flex;flex-wrap:wrap;gap:.5rem}
.areas span{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:.45rem .9rem;font-size:.9rem;color:var(--muted)}

.faq{max-width:820px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;position:relative;
  font-weight:600;font-size:1.05rem;min-height:48px;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.4rem;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details .ans{padding:0 0 1.3rem;color:var(--muted);font-size:.95rem;max-width:62ch}

.cta{background:var(--cream);text-align:center}
.cta .lede{margin:.9rem auto 0}
.cta-row{display:flex;flex-direction:column;gap:.6rem;margin-top:1.9rem}

footer{background:var(--ink);color:#B0B0B0;padding:2.8rem 0 1.8rem;font-size:.95rem}
.f-grid{display:grid;gap:2rem;grid-template-columns:1fr}
footer h4{margin:0 0 .85rem;font-size:.95rem;font-weight:600;color:#fff}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:#fff}
.f-brand{font-weight:700;font-size:1.05rem;letter-spacing:.14em;color:#fff}
.f-bot{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid #343434;
  display:flex;flex-direction:column;gap:.5rem;font-size:.86rem}



/* ---------- uppdrag / vision / löfte ---------- */
.loften{display:grid;gap:0}
.lofte{border-top:1px solid var(--line);padding:1.6rem 0}
.lofte:last-child{border-bottom:1px solid var(--line)}
.lofte .no{font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
.lofte h3{margin:.5rem 0 .5rem}
.lofte p{color:var(--muted);font-size:.97rem;max-width:46ch}
@media(min-width:800px){
  .loften{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}
  .lofte{border-bottom:1px solid var(--line);padding:1.8rem 0 2rem}
}

/* ---------- offertformulär ---------- */
.form-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.3rem;max-width:720px;margin-inline:auto;text-align:left}
.fset{border:0;margin:0 0 1.5rem;padding:0}
.fset:last-of-type{margin-bottom:1rem}
.fleg{font-weight:600;font-size:1rem;margin-bottom:.75rem;padding:0;display:block}
.fgrid{display:grid;gap:1rem}
.f{display:flex;flex-direction:column;gap:.4rem}
.f label{font-weight:600;font-size:.9rem}
.f .hint{font-size:.82rem;color:var(--muted);font-weight:400}
.f input,.f select,.f textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1px solid #C9C9C9;border-radius:var(--r);padding:.75rem .85rem;min-height:48px;width:100%}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.f input:invalid:not(:placeholder-shown){border-color:#B3261E}
.err{color:#B3261E;font-size:.83rem;font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;
  border:1px solid #C9C9C9;border-radius:var(--r);font-size:.94rem;font-weight:500;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}

.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.consent input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--ink)}
.form-wrap .btn{width:100%;margin-top:1.2rem}
.formnote{font-size:.83rem;color:var(--muted);margin-top:.8rem;text-align:center}
.fstatus{margin-top:1rem;padding:.9rem 1rem;border-radius:var(--r);font-size:.94rem;font-weight:500;display:none}
.fstatus.ok{display:block;background:#EAF3E9;color:#1B5119;border:1px solid #BFDCBC}
.fstatus.bad{display:block;background:#FBEAE9;color:#8C1D18;border:1px solid #E6BDBA}
#tillblock{display:none}
#tillblock.show{display:grid}
@media(min-width:600px){
  .form-wrap{padding:2.2rem 2rem}
  .fgrid.two{grid-template-columns:1fr 1fr}
  .fgrid.three{grid-template-columns:1fr 1fr 1fr}
  .form-wrap .btn{width:auto;min-width:15rem}
}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation:none!important}}

@media(max-width:359px){:root{--pad:16px}h1{font-size:1.8rem}.price .amt b{font-size:2.1rem}}

@media(min-width:600px){
  :root{--pad:28px}
  .brand{font-size:1.05rem;letter-spacing:.14em}
  .brand i{display:inline}
  .navend .btn{min-height:40px;padding:.5rem 1.15rem;font-size:.94rem}
  h1{font-size:2.4rem}h2{font-size:1.9rem}
  section{padding:4.2rem 0}
  .cta-row{flex-direction:row;flex-wrap:wrap}
  .cta-row .btn{flex:0 0 auto}
  .strip-in{grid-template-columns:repeat(4,1fr);gap:1.6rem}
  .si{flex-direction:row;gap:.75rem}
  .prices{grid-template-columns:1fr 1fr;gap:1.1rem}
  .svc{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:repeat(2,1fr)}
  .f-bot{flex-direction:row;justify-content:space-between;flex-wrap:wrap}
}
@media(min-width:900px){
  h1{font-size:2.5rem}h2{font-size:2rem}
  section{padding:5rem 0}
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:4rem 3rem 4rem var(--pad);
    max-width:none;margin:0;margin-left:auto;width:100%;max-width:640px}
  .hero-photo{aspect-ratio:auto;height:100%;min-height:32rem}
  .rut .grid{grid-template-columns:auto 1fr;gap:3.5rem}
  .rut .big{font-size:4rem}
  .fullnum{display:inline}
  .f-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
  .sec-head{margin-bottom:2.6rem}
}
@media(min-width:1060px){
  h1{font-size:2.5rem}
  .navrow{min-height:64px}
  .navlinks{display:flex;gap:1.7rem;align-items:center;margin-inline:auto 1.5rem}
  .navlinks a{text-decoration:none;color:var(--ink);font-weight:500;font-size:1rem;transition:opacity .2s}
  .navlinks a:hover{opacity:.6}
  .burger{display:none}
  .prices{grid-template-columns:repeat(3,1fr)}
  .svc{grid-template-columns:repeat(3,1fr)}
}


/* ---------- flersidigt: aktiv menypost + sidhuvud ---------- */
.navlinks a.active{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
#mm a.active{font-weight:700}
.phead{background:var(--cream);padding:2.6rem 0 2.8rem}
.phead h1{max-width:20ch}
.phead .lede{margin-top:.9rem}
.crumb{font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:.7rem}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
@media(min-width:900px){.phead{padding:3.6rem 0 3.8rem}}

/* områdesgrupper */
.omr{display:grid;gap:1.6rem}
.omr-grp h3{margin-bottom:.7rem}
@media(min-width:700px){.omr{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.omr{grid-template-columns:repeat(3,1fr);gap:2rem}}

/* checklista, vad som ingår */
.checks{display:grid;gap:0}
.checks div{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 0;
  border-bottom:1px solid var(--line);font-size:.96rem}
.checks svg{width:17px;height:17px;flex:none;margin-top:5px;stroke:var(--ink)}
@media(min-width:640px){.checks{grid-template-columns:1fr 1fr;column-gap:2.5rem}}

/* kontaktrader */
.kontakt-list{display:grid;gap:1.1rem;margin-top:1.4rem}
.kr{display:flex;gap:.8rem;align-items:flex-start}
.kr svg{width:20px;height:20px;flex:none;margin-top:3px;stroke:var(--ink);fill:none;stroke-width:1.6}
.kr b{display:block;font-weight:600}
.kr a{font-weight:600}
.kr span{color:var(--muted);font-size:.94rem}


/* ============ flytande knappar: upp-pil + fråge-bot ============ */
.fabs{position:fixed;right:14px;bottom:14px;z-index:80;display:flex;flex-direction:column;
  align-items:flex-end;gap:.55rem}
.fab{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.13);
  transition:transform .2s var(--ease),opacity .25s var(--ease),background .15s}
.fab:hover{background:var(--cream)}
.fab:active{transform:translateY(1px)}
.fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
#toTop{opacity:0;pointer-events:none;transform:translateY(8px)}
#toTop.on{opacity:1;pointer-events:auto;transform:none}
#botBtn{background:var(--ink);color:#fff;border-color:var(--ink);width:50px;height:50px}
#botBtn:hover{background:#000}
#botBtn svg{width:21px;height:21px}

/* botpanel */
.bot{position:fixed;right:14px;bottom:78px;z-index:81;width:min(340px,calc(100vw - 28px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 40px rgba(0,0,0,.20);display:grid;grid-template-rows:0fr;
  opacity:0;pointer-events:none;
  transition:grid-template-rows .3s var(--ease),opacity .22s var(--ease)}
.bot.on{grid-template-rows:1fr;opacity:1;pointer-events:auto}
.bot-in{overflow:hidden;min-height:0}
.bot-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);background:var(--cream)}
.bot-hd b{font-size:.95rem}
.bot-hd button{border:0;background:none;cursor:pointer;color:var(--muted);font:inherit;
  font-size:1.2rem;line-height:1;padding:.2rem .3rem}
.bot-log{padding:.9rem 1rem;max-height:min(46vh,340px);overflow-y:auto;display:grid;gap:.6rem}
.msg{font-size:.9rem;line-height:1.5;padding:.6rem .8rem;border-radius:var(--r);max-width:88%}
.msg.b{background:var(--cream);justify-self:start}
.msg.u{background:var(--ink);color:#fff;justify-self:end}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1rem .8rem}
.chips button{font:inherit;font-size:.79rem;font-weight:600;padding:.4rem .7rem;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.chips button:hover{background:var(--cream)}
.bot-in form{display:flex;gap:.4rem;padding:.7rem 1rem 1rem;border-top:1px solid var(--line)}
.bot-in input{flex:1;font:inherit;font-size:.9rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:var(--r);min-height:42px;color:var(--ink)}
.bot-in input:focus{outline:2px solid var(--ink);outline-offset:1px}
.bot-in form button{border:0;background:var(--ink);color:#fff;border-radius:var(--r);
  padding:0 .9rem;cursor:pointer;font:inherit;font-weight:700;font-size:.85rem}
@media(prefers-reduced-motion:reduce){.bot,#toTop{transition:none}}


/* ============================================================
   KONVERTERINGSLAGER
   Varianter: band (B), fotoruta (C), miniguide (D), tyst (E),
   vägvisare (F). Varje sida får sin egen kombination så att två
   sidor efter varandra aldrig ser likadana ut.
   ============================================================ */

/* --- B. helbreddsband, mörkt, centrerat --- */
.band{background:var(--ink);color:#fff;text-align:center;padding:3.4rem 0}
.band h2{color:#fff;max-width:19ch;margin-inline:auto}
.band p{color:rgba(255,255,255,.76);margin:1.05rem auto 0;max-width:44ch}
.band .hero-cta{margin-top:1.9rem}
.band .tar30{color:rgba(255,255,255,.7)}
.btn-invert{background:#fff;color:var(--ink)}
.btn-invert:hover{background:var(--cream)}

/* --- C. foto i bakgrunden med mörk hinna, ingen "Tar 30 sekunder" --- */
.photocta{position:relative;isolation:isolate;background:var(--ink);color:#fff;
  text-align:center;padding:4.6rem 0}
.photocta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photocta::after{content:"";position:absolute;inset:0;background:rgba(18,18,18,.66);z-index:-1}
.photocta h2{color:#fff;max-width:18ch;margin-inline:auto}
.photocta p{color:rgba(255,255,255,.82);margin:1.05rem auto 0;max-width:44ch}
.photocta .btn{margin-top:1.9rem}

/* --- E. tyst centrerad, mycket luft --- */
.quiet{text-align:center}
.quiet .inner{max-width:36rem;margin-inline:auto}
.quiet p{color:var(--muted);margin-top:1.1rem}
.quiet .hero-cta{margin-top:2.2rem}

/* --- F. vägvisare, leder vidare till en tjänstesida --- */
.route{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem}
.route .btn{width:100%}
@media(min-width:600px){
  .route{flex-direction:row;flex-wrap:wrap}
  .route .btn{width:auto}
}

/* --- D. miniguide: en fråga, sedan vidare till offertguiden --- */
.mini{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem 1.2rem;max-width:36rem}
.mini.on-cream{background:var(--cream);border-color:#DCDCD3}
.mini h2{font-size:1.2rem}
.mini .q{color:var(--muted);font-size:.93rem;margin-top:.45rem}
.mchips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.mchip{position:relative}
.mchip input{position:absolute;opacity:0;width:0;height:0}
.mchip span{display:inline-flex;align-items:center;min-height:46px;padding:.6rem 1rem;
  background:var(--white);border:1px solid #C9C9C9;border-radius:var(--r);
  font-size:.94rem;font-weight:600;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.mchip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.mchip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
/* staplade val, för frågor med längre alternativ */
.mstack{display:grid;gap:.5rem;margin-top:1.1rem}
.mstack .mchip span{width:100%;justify-content:flex-start}
.mrow{display:flex;gap:.6rem;margin-top:1.1rem;align-items:stretch}
.mrow input{flex:1;min-width:0;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid #C9C9C9;border-radius:var(--r);
  padding:.75rem .85rem;min-height:48px}
.mrow input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.mrow .btn{flex:none}
.mini .go{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:1.2rem}
.mini .go .btn{width:100%}
@media(min-width:600px){.mini .go .btn{width:auto;min-width:13rem}}

/* --- brödtext och tvåspalt för förtroendeavsnitten --- */
.prose{max-width:64ch}
.prose p{margin-top:1.05rem;color:var(--muted)}
.prose p:first-child{margin-top:0}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}
.two-col{display:grid;gap:1.8rem}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr;gap:3.4rem}}

/* --- numrerad sekvens, för "så går det till" --- */
.flow{margin:0;padding:0;list-style:none;counter-reset:f;display:grid;gap:0}
.flow li{counter-increment:f;display:grid;grid-template-columns:2.6rem 1fr;gap:0 1rem;
  padding:1.4rem 0;border-top:1px solid var(--line)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow li::before{content:counter(f,decimal-leading-zero);font-size:.85rem;font-weight:700;
  color:var(--muted);letter-spacing:.06em;padding-top:.2rem}
.flow h3{margin-bottom:.4rem}
.flow p{color:var(--muted);font-size:.96rem;max-width:52ch}

/* --- faktarad: det som går att kontrollera --- */
/* langre textblock: alltid en underrubrik, aldrig bara brodtext */
.prose-wide{max-width:68ch}
.prose-wide h3{font-size:1.08rem;margin-top:1.8rem;margin-bottom:.5rem}
.prose-wide h3:first-child{margin-top:0}
.prose-wide p{margin-bottom:0}

/* rubrik som ligger centrerad, för omväxling mot vänsterställda avsnitt */
.mid{text-align:center;margin-inline:auto}
.mid .lede{margin-inline:auto}